DON-1396 Add Loading Label to BpkCalendarDayCell, update BpkSkeleton #2274
Conversation
…erlay to support the smaller item's animation
Update Loading cell to match design.
henrik-sky
force-pushed
the
donburi/DON-1396_Calendar_Loading
branch
from
94b2927 to
7b23486
Compare
There was a problem hiding this comment.
Spacing is updated in figma
https://www.figma.com/design/irZ3YBx8vOm16ICkAr7mB3/Backpack-Components?node-id=20677-22316&m=dev
henrik-sky
force-pushed
the
donburi/DON-1396_Calendar_Loading
branch
from
d8cf33b to
759793a
Compare
| @@ -158,6 +158,8 @@ sealed class CellLabel : Serializable { | |||
| val resId: Int, | |||
| val tint: Int? = null, | |||
| ) : CellLabel() | |||
|
|
|||
| data class Loading(val contentDescription: String) : CellLabel() | |||
There was a problem hiding this comment.
We should replace serialisables with Parcelables/custom savers when we can. Not as a part of this PR though
| @@ -102,6 +102,13 @@ enum class BpkSkeletonCornerType { | |||
| Rounded, | |||
| } | |||
|
|
|||
| enum class BpkShimmerSize( | |||
There was a problem hiding this comment.
Should it be really called size? It looks more like timings for me. Is that the naming we use on Figma?
There was a problem hiding this comment.
It's the timings for the size of skeleton
| shimmerSize: BpkShimmerSize = BpkShimmerSize.Large, | ||
| content: @Composable BoxScope.() -> Unit, | ||
| ) { | ||
| BoxWithConstraints(modifier = modifier) { |
There was a problem hiding this comment.
BoxWithConstraints will have performance implications, especially when used in lists (which we do in many places). How about this: we'll animate the float "fraction/percent" value, then simply multiply it to the width that's available in graphicsLayer {} modifier?
There was a problem hiding this comment.
Ah yes, I think I had something similar previously but got confused with the typeConverter when making the animation but then today I realised it's just Float.VectorConverter so now it goes from
-1f * GraphicsLayerScope.size.width to 1f * GraphicsLayerScope.size.width
🚀
This adds a new form of Label in the BpkCalendar, Loading.
As this is the smallest BpkSkeleton in use the BpkShimmerOverlay looked odd so the designers cooked up something new for small shimmers.
Therefore I added an enum to allow the consumer to set the size of shimmering animation.
I have also wrapped the Calendar label with
AnimatedContentallowing for a smooth transition between the loading and the text label/icon.The transition is delayed by 2x the length of the shimmer animation (design requirement).
Further documentation around our decision making for this can be found here:
Design:
Screen.Recording.2025-04-03.at.15.31.49.mov
Built:
BpkCalendarLoading.mp4
Remember to include the following changes:
README.mdIf you are curious about how we review, please read through the code review guidelines