1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-21 13:47:39 +02:00

chore: fix skeleton loading indicator colors for lifecycle trend tiles (#10109)

Updates the skeleton loading colors for the lifecycle trend tiles
because the previous color was invisible on the median stats section in
light mode. You also wouldn't see any movement in the total number of
flags.

I have not touched the original skeleton color assignment because that
might have unintended consequences throughout the app. Also, I'm not
aware of a way (at the moment) that would do this automatically when
necessary. As such, I have only touched the loading indicators in the
lifecycle tile.

## Before:

Light mode:

![image](https://github.com/user-attachments/assets/3731eb0b-4d63-4622-8b20-0518e6266611)

Dark mode:

![image](https://github.com/user-attachments/assets/6df0197f-7283-4709-b369-38025011c879)


## After:

Light mode:

![image](https://github.com/user-attachments/assets/09f33fa8-322c-4a55-a6e8-4ef384104d74)

Dark mode:

![image](https://github.com/user-attachments/assets/60499b46-c9c7-49cc-a210-50d330682075)
This commit is contained in:
Thomas Heartman 2025-06-11 10:15:59 +02:00 committed by GitHub
parent 7e61e0dd09
commit f299c2b652
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -65,6 +65,17 @@ const LifecycleTile = styled('article')(({ theme }) => ({
borderRadius: theme.shape.borderRadiusLarge,
padding: theme.spacing(3),
minWidth: 0,
'.skeleton': {
'&::after': {
'--base-color': theme.palette.neutral.border,
'--initial': 'rgb(from var(--base-color) r g b / 0)',
'--middle': 'rgb(from var(--base-color) r g b / 0.2)',
'--peak': 'rgb(from var(--base-color) r g b / 0.5)',
background:
'linear-gradient(90deg, var(--initial) 0, var(--middle) 50%, var(--peak) 100%, var(--initial))',
},
},
}));
const lifecycleStageMap = {