fix: Flickering when opening conversation details (WPB-19187) #4167
Conversation
ohassine
requested review from
sbakhtiarov and
saleniuk
and removed request for
sbakhtiarov
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## develop #4167 +/- ##
===========================================
+ Coverage 47.81% 47.83% +0.01%
===========================================
Files 507 507
Lines 17336 17340 +4
Branches 2847 2847
===========================================
+ Hits 8290 8294 +4
Misses 8190 8190
Partials 856 856
Continue to review full report in Codecov by Sentry.
🚀 New features to boost your workflow:
|
core/ui-common/src/main/kotlin/com/wire/android/ui/common/button/LoadingWireSecondaryButton.kt
Outdated
Show resolved
Hide resolved
core/ui-common/src/main/kotlin/com/wire/android/ui/common/button/LoadingWireSecondaryButton.kt
Show resolved
Hide resolved
| AnimatedVisibility( | ||
| visible = isScreenLoading.collectAsState().value, | ||
| enter = fadeIn(), | ||
| exit = fadeOut() | ||
| ) { | ||
| LoadingGroupConversationDetailsTopBarCollapsing( | ||
| modifier = Modifier.padding(bottom = MaterialTheme.wireDimensions.spacing16x) | ||
| ) | ||
| } | ||
|
|
||
| AnimatedVisibility( | ||
| visible = !isScreenLoading.collectAsState().value, | ||
| enter = fadeIn( | ||
| animationSpec = tween( | ||
| durationMillis = 500, | ||
| delayMillis = 100 | ||
| ) | ||
| ) + slideInVertically(initialOffsetY = { it / 2 }), | ||
| exit = fadeOut() | ||
| ) { |
There was a problem hiding this comment.
Instead of having two AnimatedVisibility you can use AnimatedContent to animate changing different composables, like:
AnimatedContent(
targetState = isScreenLoading.collectAsState().value,
transitionSpec = {
val enter = slideInVertically(initialOffsetY = { it })
val exit = slideOutVertically(targetOffsetY = { it })
enter.togetherWith(exit)
},
) { isScreenLoading ->
if (isScreenLoading) ...
}
You can even distinct animations for each state if it's needed:
transitionSpec = {
val isScreenLoading = this.targetState
val enter = if (isScreenLoading) {
slideInVertically(initialOffsetY = { it })
} else {
fadeIn(tween(durationMillis = 500, delayMillis = 100)) + slideInVertically(initialOffsetY = { it / 2 }),
}
val exit = fadeOut()
enter.togetherWith(exit)
},
...n/com/wire/android/ui/home/conversations/details/GroupConversationDetailsTopBarCollapsing.kt
Show resolved
Hide resolved
...n/kotlin/com/wire/android/ui/home/conversations/details/GroupConversationDetailsViewModel.kt
Show resolved
Hide resolved
|
the question here why does it take some time to fetch data? is it waiting on an API call ? |
because we have a complex query with 11 joins, which takes at least 300ms |
|
for getting one conversation details this is not great we can do better, lets also work on the query |
PR Submission Checklist for internal contributors
The PR Title
SQPIT-764The PR Description
What's new in this PR?
Issues
Screen is flickering when opening conversation details
Causes (Optional)
Fetching data from data source, which lead to show the UI the default value. and once the data is retrieved, UI gets updated again
Solutions
Add a skeleton UI to be shown while we fetch data
screen-20250807-162726.mp4
Screen_recording_20250807_145214.webm
Needs releases with:
Testing
Test Coverage (Optional)
How to Test
Briefly describe how this change was tested and if applicable the exact steps taken to verify that it works as expected.
Notes (Optional)
Specify here any other facts that you think are important for this issue.
Attachments (Optional)
Attachments like images, videos, etc. (drag and drop in the text box)
PR Post Submission Checklist for internal contributors (Optional)
PR Post Merge Checklist for internal contributors
References
feat(conversation-list): Sort conversations by most emojis in the title #SQPIT-764.