Skip to content

Feature/159 improve asyncimage loading state #296

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
kilalabu merged 5 commits into from
Aug 28, 2025
Merged

Feature/159 improve asyncimage loading state #296

kilalabu merged 5 commits into from
Aug 28, 2025

Conversation

@angryPodo
Copy link
Contributor

@angryPodo angryPodo commented Aug 22, 2025

Issue

Overview

  • Improved the user experience by providing visual feedback for asynchronous image loading states (loading, error).
  • Modified the rememberAsyncImagePainter function in ImagePainter.kt to return an appropriate painter for each state
    • Loading State: Displays a gray ColorPainter as a placeholder, providing
      immediate visual feedback.
    • Error State: Displays a predefined error_mascot drawable if the image fails to load.
    • Success State: Displays the successfully loaded image.

Links

  • N/A

Screenshot

Before After
Error Error
image image
Loading Loading
Loading before Loading after

@angryPodo
feat(droidkaigiui): Improve AsyncImage to handle loading and error st…
8199702 
…ates

Modify rememberAsyncImagePainter to provide visual feedback during different image loading states.

- On loading: Display a placeholder painter.
- On error: Display a predefined error mascot image.
- On success: Display the loaded image.

This change improves user experience by clearly indicating the status of image loading.

Fixes DroidKaigi#159
@angryPodo
Merge remote-tracking branch 'upstream/main' into feature/159-improve…
433a963 
…-asyncimage-loading-state
@angryPodo
feat(droidkaigiui): Improve AsyncImage to handle loading and error st…
9914878 
…ates

Modify rememberAsyncImagePainter to provide visual feedback during different image loading states.

- On loading: Display a placeholder painter.
- On error: Display a predefined error mascot image.
- On success: Display the loaded image.

This change improves user experience by clearly indicating the status of image loading.

Fixes DroidKaigi#159
@angryPodo angryPodo requested a review from a team as a code owner August 22, 2025 18:12
@angryPodo angryPodo requested review from kilalabu and removed request for a team August 22, 2025 18:12
kilalabu
kilalabu reviewed Aug 23, 2025
View reviewed changes
Copy link
Contributor

@kilalabu kilalabu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Thanks for this PR.
I need to get a design check on this, so it won't be merged right away 🙏
I'll wait for feedback from the designer.

@kilalabu
Copy link
Contributor

kilalabu commented Aug 27, 2025

@angryPodo
Sorry for the wait 🙏
The designer gave the green light, so let's move forward with the UI you proposed!
Could you please resolve the conflicts?

@angryPodo
Copy link
Contributor Author

angryPodo commented Aug 28, 2025

@kilalabu
Perfect! I’ll resolve the conflicts now and push the update. 🚀

@angryPodo
Merge remote-tracking branch 'upstream/main' into feature/159-improve…
6279dac 
…-asyncimage-loading-state

# Conflicts:
#	feature/profile/src/commonMain/kotlin/io/github/confsched/profile/ProfileEditScreen.kt
#	feature/profile/src/commonMain/kotlin/io/github/confsched/profile/card/ProfileCardScreen.kt
@angryPodo angryPodo requested a review from kilalabu August 28, 2025 07:05
@github-actions
Copy link

github-actions bot commented Aug 28, 2025

Snapshot diff report

File name Image
FavoritesScreenPrevi
ew_compare.png
io.github.droidkaigi
.confsched.favorites
.FavoritesScreenTest
- FavoritesScreen -
when server is oper
ational - with singl
e favorite session -
it should display s
ingle favorite sessi
on_compare.png
io.github.droidkaigi
.confsched.favorites
.FavoritesScreenTest
- FavoritesScreen -
when server is oper
ational - with many
favorite sessions -
scroll to see more s
essions - it should
display scrolled con
tent_compare.png
io.github.droidkaigi
.confsched.favorites
.FavoritesScreenTest
- FavoritesScreen -
when server is oper
ational - with many
favorite sessions -
it should display mu
ltiple favorite sess
ions_compare.png
io.github.droidkaigi
.confsched.favorites
.FavoritesScreenTest
- FavoritesScreen -
when server is oper
ational - with many
favorite sessions -
click first session
bookmark - it should
display remaining f
avorite sessions_com
pare.png
ContributorsScreenPr
eview_compare.png
io.github.droidkaigi
.confsched.staff.Sta
ffScreenTest - Staff
Screen - when server
is operational - wh
en launch - after lo
ading - when scroll
to index 10 - it sho
uld show staffs_comp
are.png
StaffItemPreview_com
pare.png
StaffScreenPreview_c
ompare.png
io.github.droidkaigi
.confsched.staff.Sta
ffScreenTest - Staff
Screen - when server
is operational - wh
en launch - after lo
ading - it should sh
ow first and second
staffs_compare.png
io.github.droidkaigi
.confsched.staff.Sta
ffScreenTest - Staff
Screen - when server
is error - when lau
nch - after loading
- click retry after
server gets operatio
nal - after waiting
for 5 seconds - it s
hould show staffs_co
mpare.png
SponsorScreenPreview
_compare.png
TimetableItemDetailS
creenPreview_compare
.png
io.github.droidkaigi
.confsched.sessions.
SearchScreenTest - S
earchScreen - when s
erver is operational
- after loading - w
hen filter language
chip click - when cl
ick English - it sho
uld selected English
_compare.png
TimetableItemDetailH
eadlineWithMixedPrev
iew_compare.png
TimetableGridItemPre
view_LongTitle_compa
re.png
TimetableItemDetailH
eadlinePreview_compa
re.png
io.github.droidkaigi
.confsched.sessions.
SearchScreenTest - S
earchScreen - when s
erver is operational
- after loading - w
hen filter category
chip click - when cl
ick App Architecture
en - it should sele
cted App Architectur
e en_compare.png
io.github.droidkaigi
.confsched.sessions.
TimetableItemDetailS
creenTest - Timetabl
eItemDetailScreen -
when server is opera
tional - when launch
- it should show se
ssion detail title_c
ompare.png
TimetableItemDetailH
eadlineWithEnglishPr
eview_compare.png
io.github.droidkaigi
.confsched.sessions.
SearchScreenTest - S
earchScreen - when s
erver is operational
- after loading - w
hen filter session t
ype chip click - whe
n click Normal - it
should selected Norm
al_compare.png
TimetableScreenPrevi
ew_Grid_compare.png
io.github.droidkaigi
.confsched.sessions.
SearchScreenTest - S
earchScreen - when s
erver is operational
- after loading - w
hen filter category
chip click - when cl
ick Jetpack Compose
en - it should selec
ted Jetpack Compose
en_compare.png
TimetableGridPreview
_compare.png
io.github.droidkaigi
.confsched.sessions.
TimetableItemDetailS
creenTest - Timetabl
eItemDetailScreen -
when server is opera
tional - when font s
cale is huge - it sh
ould show huge font
session detail(top)_
compare.png
io.github.droidkaigi
.confsched.sessions.
TimetableItemDetailS
creenTest - Timetabl
eItemDetailScreen -
when server is opera
tional - when font s
cale is small - it s
hould show small fon
t session detail_com
pare.png
TimetableScreenPrevi
ew_List_compare.png
TimetableGridItemPre
view_80min_compare.p
ng
TimetableGridItemPre
view_WithError_compa
re.png
TimetableGridItemPre
view_compare.png

@kilalabu
Copy link
Contributor

kilalabu commented Aug 28, 2025

@angryPodo
spotless-check / spotless-check (pull_request) is failing, can you check?

@angryPodo
feat(droidkaigiui): Improve AsyncImage to handle loading and error st…
2c49464 
…ates

Modify rememberAsyncImagePainter to provide visual feedback during different image loading states.

- On loading: Display a placeholder painter.
- On error: Display a predefined error mascot image.
- On success: Display the loaded image.

This change improves user experience by clearly indicating the status of image loading.

Fixes DroidKaigi#159
@angryPodo
Copy link
Contributor Author

angryPodo commented Aug 28, 2025

@kilalabu
Thanks for the heads-up. I've fixed the spotless formatting issues and pushed the corrected commit The CI should be passing now. Please let me know if there are any other issues.

kilalabu
kilalabu approved these changes Aug 28, 2025
View reviewed changes
Copy link
Contributor

@kilalabu kilalabu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!
Sorry for keeping you waiting! Thank you contribution 👍

@kilalabu kilalabu added this pull request to the merge queue Aug 28, 2025
Merged via the queue into DroidKaigi:main with commit e55a27d Aug 28, 2025
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@kilalabu kilalabu kilalabu approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Improve AsyncImage loading state

2 participants

@angryPodo @kilalabu