From d4b038f24a3bd56593e319e39250296c8d4368e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20M?= <jeremy.magrin@gmail.com>
Date: Tue, 21 Jan 2025 09:19:06 +0100
Subject: [PATCH] fix: skeleton not using theme variables (#9712)

Fix linked to this discord issue:
https://discord.com/channels/1130383047699738754/1329509340494692444

---------

Co-authored-by: Weiko <corentin@twenty.com>
---
 .../components/LeftPanelSkeletonLoader.tsx    |  8 +++---
 ...ainNavigationDrawerItemsSkeletonLoader.tsx |  8 +++---
 .../components/RightDrawerSkeletonLoader.tsx  | 10 ++++---
 .../components/RightPanelSkeletonLoader.tsx   | 27 +++++++++----------
 .../components/UserOrMetadataLoader.tsx       |  4 +--
 .../activities/components/SkeletonLoader.tsx  |  1 +
 6 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx b/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx
index fa446c7d5..bd529524c 100644
--- a/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx
+++ b/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx
@@ -1,11 +1,12 @@
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
-import { ANIMATION, BACKGROUND_LIGHT, GRAY_SCALE } from 'twenty-ui';
+import { ANIMATION } from 'twenty-ui';
 
 import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
 import { NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/NavDrawerWidths';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+import { useTheme } from '@emotion/react';
 import { MainNavigationDrawerItemsSkeletonLoader } from '~/loading/components/MainNavigationDrawerItemsSkeletonLoader';
 
 const StyledAnimatedContainer = styled(motion.div)`
@@ -47,6 +48,7 @@ const StyledSkeletonTitleContainer = styled.div`
 
 export const LeftPanelSkeletonLoader = () => {
   const isMobile = useIsMobile();
+  const theme = useTheme();
 
   return (
     <StyledAnimatedContainer
@@ -62,8 +64,8 @@ export const LeftPanelSkeletonLoader = () => {
       <StyledItemsContainer>
         <StyledSkeletonTitleContainer>
           <SkeletonTheme
-            baseColor={GRAY_SCALE.gray15}
-            highlightColor={BACKGROUND_LIGHT.transparent.lighter}
+            baseColor={theme.background.tertiary}
+            highlightColor={theme.background.transparent.lighter}
             borderRadius={4}
           >
             <Skeleton
diff --git a/packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx b/packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx
index bfa360a98..c14db0c9a 100644
--- a/packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx
+++ b/packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx
@@ -1,7 +1,7 @@
 import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
-import { BACKGROUND_LIGHT, GRAY_SCALE } from 'twenty-ui';
 
 const StyledSkeletonContainer = styled.div`
   align-items: flex-start;
@@ -20,11 +20,13 @@ export const MainNavigationDrawerItemsSkeletonLoader = ({
   title?: boolean;
   length: number;
 }) => {
+  const theme = useTheme();
+
   return (
     <StyledSkeletonContainer>
       <SkeletonTheme
-        baseColor={GRAY_SCALE.gray15}
-        highlightColor={BACKGROUND_LIGHT.transparent.lighter}
+        baseColor={theme.background.tertiary}
+        highlightColor={theme.background.transparent.lighter}
         borderRadius={4}
       >
         {title && (
diff --git a/packages/twenty-front/src/loading/components/RightDrawerSkeletonLoader.tsx b/packages/twenty-front/src/loading/components/RightDrawerSkeletonLoader.tsx
index e1e755d09..7e592415b 100644
--- a/packages/twenty-front/src/loading/components/RightDrawerSkeletonLoader.tsx
+++ b/packages/twenty-front/src/loading/components/RightDrawerSkeletonLoader.tsx
@@ -1,6 +1,6 @@
-import styled from '@emotion/styled';
-import { BACKGROUND_LIGHT, GRAY_SCALE } from 'twenty-ui';
 import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 
 const StyledRightDrawerContainer = styled.div`
@@ -11,10 +11,12 @@ const StyledRightDrawerContainer = styled.div`
 `;
 
 const StyledSkeletonLoader = () => {
+  const theme = useTheme();
+
   return (
     <SkeletonTheme
-      baseColor={GRAY_SCALE.gray15}
-      highlightColor={BACKGROUND_LIGHT.transparent.lighter}
+      baseColor={theme.background.tertiary}
+      highlightColor={theme.background.transparent.lighter}
       borderRadius={4}
     >
       <Skeleton height={SKELETON_LOADER_HEIGHT_SIZES.standard.m} width={140} />
diff --git a/packages/twenty-front/src/loading/components/RightPanelSkeletonLoader.tsx b/packages/twenty-front/src/loading/components/RightPanelSkeletonLoader.tsx
index 9e9859436..013b6aa08 100644
--- a/packages/twenty-front/src/loading/components/RightPanelSkeletonLoader.tsx
+++ b/packages/twenty-front/src/loading/components/RightPanelSkeletonLoader.tsx
@@ -1,16 +1,11 @@
 import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
-import {
-  BACKGROUND_LIGHT,
-  BORDER_COMMON,
-  BORDER_LIGHT,
-  GRAY_SCALE,
-  MOBILE_VIEWPORT,
-} from 'twenty-ui';
+import { BORDER_COMMON, MOBILE_VIEWPORT } from 'twenty-ui';
 
 const StyledMainContainer = styled.div`
-  background: ${BACKGROUND_LIGHT.noisy};
+  background: ${({ theme }) => theme.background.noisy};
   box-sizing: border-box;
   display: flex;
   flex: 1 1 auto;
@@ -27,8 +22,8 @@ const StyledMainContainer = styled.div`
 `;
 
 const StyledPanel = styled.div`
-  background: ${BACKGROUND_LIGHT.primary};
-  border: 1px solid ${BORDER_LIGHT.color.medium};
+  background: ${({ theme }) => theme.background.primary};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
   border-radius: ${BORDER_COMMON.radius.md};
   height: 100%;
   overflow: auto;
@@ -54,11 +49,13 @@ const StyledRightPanelFlexContainer = styled.div`
 `;
 
 const StyledSkeletonHeaderLoader = () => {
+  const theme = useTheme();
+
   return (
     <StyledHeaderContainer>
       <SkeletonTheme
-        baseColor={GRAY_SCALE.gray15}
-        highlightColor={BACKGROUND_LIGHT.transparent.lighter}
+        baseColor={theme.background.tertiary}
+        highlightColor={theme.background.transparent.lighter}
         borderRadius={4}
       >
         <Skeleton
@@ -71,10 +68,12 @@ const StyledSkeletonHeaderLoader = () => {
 };
 
 const StyledSkeletonAddLoader = () => {
+  const theme = useTheme();
+
   return (
     <SkeletonTheme
-      baseColor={GRAY_SCALE.gray15}
-      highlightColor={BACKGROUND_LIGHT.transparent.lighter}
+      baseColor={theme.background.tertiary}
+      highlightColor={theme.background.transparent.lighter}
       borderRadius={4}
     >
       <Skeleton width={132} height={SKELETON_LOADER_HEIGHT_SIZES.standard.s} />
diff --git a/packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx b/packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx
index e241a6aa0..8f33bb800 100644
--- a/packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx
+++ b/packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx
@@ -1,12 +1,12 @@
 import styled from '@emotion/styled';
-import { BACKGROUND_LIGHT, MOBILE_VIEWPORT } from 'twenty-ui';
+import { MOBILE_VIEWPORT } from 'twenty-ui';
 
 import { NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/NavDrawerWidths';
 import { LeftPanelSkeletonLoader } from '~/loading/components/LeftPanelSkeletonLoader';
 import { RightPanelSkeletonLoader } from '~/loading/components/RightPanelSkeletonLoader';
 
 const StyledContainer = styled.div`
-  background: ${BACKGROUND_LIGHT.noisy};
+  background: ${({ theme }) => theme.background.noisy};
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
diff --git a/packages/twenty-front/src/modules/activities/components/SkeletonLoader.tsx b/packages/twenty-front/src/modules/activities/components/SkeletonLoader.tsx
index 0b65ab114..eee56973d 100644
--- a/packages/twenty-front/src/modules/activities/components/SkeletonLoader.tsx
+++ b/packages/twenty-front/src/modules/activities/components/SkeletonLoader.tsx
@@ -42,6 +42,7 @@ export const SKELETON_LOADER_HEIGHT_SIZES = {
 
 const SkeletonColumnLoader = ({ height }: { height: number }) => {
   const theme = useTheme();
+
   return (
     <SkeletonTheme
       baseColor={theme.background.tertiary}