From f299c2b6521f69da3127deed42e9fb37d3d89bd9 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Wed, 11 Jun 2025 10:15:59 +0200 Subject: [PATCH] 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) --- .../component/insights/sections/LifecycleInsights.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/frontend/src/component/insights/sections/LifecycleInsights.tsx b/frontend/src/component/insights/sections/LifecycleInsights.tsx index ee9b5f1c33..b5fe71a773 100644 --- a/frontend/src/component/insights/sections/LifecycleInsights.tsx +++ b/frontend/src/component/insights/sections/LifecycleInsights.tsx @@ -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 = {