Adds a skeleton loading animation to the Bookings list #14806
Conversation
Replaced the circular progress indicator in the booking list screen with a new `BookingListIsLoading` composable that displays a skeleton/shimmer loading animation.
irfano
requested review from
AdamGrzybkowski,
JorgeMucientes and
hichamboushaba
📲 You can test the changes from this Pull Request in WooCommerce-Wear Android by scanning the QR code below to install the corresponding build.
|
|
📲 You can test the changes from this Pull Request in WooCommerce Android by scanning the QR code below to install the corresponding build.
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## trunk #14806 +/- ##
=========================================
Coverage 38.17% 38.17%
- Complexity 10076 10077 +1
=========================================
Files 2133 2133
Lines 120318 120318
Branches 16450 16450
=========================================
+ Hits 45928 45932 +4
+ Misses 69761 69759 -2
+ Partials 4629 4627 -2 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
| } | ||
|
|
||
| @Composable | ||
| private fun BookingListIsLoading(controlsState: BookingListControlsState) { |
There was a problem hiding this comment.
⛏️ Nitpick, but the is in the name was a bit confusing, and I kinda expected two states for loading and not. Probably because that's a common prefix for Boolean values.
| private fun BookingListIsLoading(controlsState: BookingListControlsState) { | |
| private fun BookingListLoading(controlsState: BookingListControlsState) { |
There was a problem hiding this comment.
I totally agree. Done: 8b65ac3
| Column( | ||
| modifier = Modifier | ||
| .fillMaxWidth() | ||
| .padding(16.dp) | ||
| ) { | ||
| SkeletonView(Modifier.size(173.dp, 22.dp)) | ||
| Spacer(Modifier.height(2.dp)) | ||
| SkeletonView(Modifier.size(256.dp, 18.dp)) | ||
| Spacer(Modifier.height(8.dp)) | ||
| SkeletonView(Modifier.size(138.dp, 22.dp)) | ||
| } | ||
| HorizontalDivider(Modifier.padding(start = 16.dp)) | ||
| } |
There was a problem hiding this comment.
❓ We have a very similar skeleton layout here that tries to mimic the same component. Would it make sense to extract and reuse?
There was a problem hiding this comment.
In the design, the summary has 4 rows, and the list screen item has 3. But in the app, they’re both the same. Was this intentional, or did we overlook that the details view is different on design?
If we decided to keep them the same across both screens, then yes, it makes sense to use a single skeleton composable, and I can make that change here.
There was a problem hiding this comment.
Those used to be the same, but the design was changed after the implementation. I guess that makes sense to keep those separate. 👍
There was a problem hiding this comment.
👍 I’m merging this, and I’ll also update the design on the booking details screen.
Description
This adds a skeleton (shimmer) loading animation to the Bookings list, displayed when there’s no data and it’s being fetched.
Test Steps
You need to make a fresh install to reproduce the no-data case.
Images/gif
RELEASE-NOTES.txtif necessary. Use the "[Internal]" label for non-user-facing changes.