Merge pull request #1324 from push-protocol/skeleton-loading-dark-mode

🐛 [BUG] - <Skeleton loading in dark mode appears like light mode in chat>
push-protocol · May 29, 2024 · 8512e41 · 8512e41
2 parents d8b026f + d8241be
commit 8512e41
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 17 deletions.
diff --git a/packages/uiweb/src/lib/components/chat/ChatPreview/ChatPreview.tsx b/packages/uiweb/src/lib/components/chat/ChatPreview/ChatPreview.tsx
@@ -159,6 +159,7 @@ export const ChatPreview: React.FC<IChatPreviewProps> = (options: IChatPreviewPr
             flex="initial"
             cursor="pointer"
             className={options.readmode ? 'skeleton' : ''}
+            animation={theme.skeletonBG}
           >
             <Message theme={theme}>
               {options?.chatPreviewPayload?.chatMsg?.messageType === 'Image' ||

diff --git a/packages/uiweb/src/lib/components/chat/ChatViewList/MessageEncryption.tsx b/packages/uiweb/src/lib/components/chat/ChatViewList/MessageEncryption.tsx
@@ -68,6 +68,7 @@ export const EncryptionMessage = ({ id, className }: { id: EncryptionKeys; class
           fontWeight="400"
           textAlign="left"
           className={className}
+          animation={theme.skeletonBG}
         >
           {EncryptionMessageContent[id].text}
         </Span>

diff --git a/packages/uiweb/src/lib/components/chat/reusables/ProfileContainer.tsx b/packages/uiweb/src/lib/components/chat/reusables/ProfileContainer.tsx
@@ -73,6 +73,7 @@ export const ProfileContainer = ({ theme, member, copy, customStyle, loading }:
         borderRadius="100%"
         overflow="hidden"
         className={loading ? 'skeleton' : ''}
+        animation={theme.skeletonBG}
       >
         {member?.icon && (
           <Image
@@ -131,6 +132,7 @@ export const ProfileContainer = ({ theme, member, copy, customStyle, loading }:
                 setCopyText('Copied');
               }}
               className={loading ? 'skeleton' : ''}
+              animation={theme.skeletonBG}
             >
               <RecipientSpan
                 fontSize={member?.name || member?.web3Name ? '14px' : customStyle?.fontSize ?? '18px'}

diff --git a/packages/uiweb/src/lib/components/chat/theme/index.ts b/packages/uiweb/src/lib/components/chat/theme/index.ts
@@ -2,6 +2,7 @@
  * @file theme file: all the predefined themes are defined here
  */
 import { CHAT_THEME_OPTIONS } from '../exportedTypes';
+import styled, { keyframes, css } from 'styled-components';
 // bgColorPrimary: "#fff",
 //   bgColorSecondary: "#D53A94",
 //   textColorPrimary: "#1e1e1e",
@@ -191,10 +192,38 @@ export interface IChatTheme {
   textColor?: ITextColor;
   backdropFilter?: string;
   scrollbarColor?: string;
-
+  skeletonBG?: any;
   spinnerColor?: string;
 }
 
+const lightSkeletonLoading = keyframes`
+  0% {
+    background-color: hsl(200, 20%, 80%);
+  }
+  100% {
+    background-color: hsl(200, 20%, 95%);
+  }
+`;
+
+const darkSkeletonLoading = keyframes`
+  0% {
+    background-color: #575D73;
+  }
+  100% {
+    background-color: #6E748B;
+  }
+`;
+
+const animation = () =>
+  css`
+    ${lightSkeletonLoading} 1s linear infinite alternate;
+`;
+
+const darkAnimation = () =>
+  css`
+    ${darkSkeletonLoading} 1s linear infinite alternate;
+`;
+
 //dark theme object
 export const lightChatTheme: IChatTheme = {
   borderRadius: {
@@ -368,6 +397,7 @@ export const lightChatTheme: IChatTheme = {
   backdropFilter: 'none',
   spinnerColor: 'rgb(202, 89, 155)',
   scrollbarColor: 'rgb(202, 89, 155)',
+  skeletonBG: animation
 };
 
 export const darkChatTheme: IChatTheme = {
@@ -541,4 +571,5 @@ export const darkChatTheme: IChatTheme = {
   backdropFilter: 'none',
   spinnerColor: 'rgb(202, 89, 155)',
   scrollbarColor: 'rgb(202, 89, 155)',
+  skeletonBG: darkAnimation
 };
diff --git a/packages/uiweb/src/lib/components/reusables/sharedStyling.tsx b/packages/uiweb/src/lib/components/reusables/sharedStyling.tsx
@@ -1,14 +1,5 @@
-import styled, { keyframes } from 'styled-components';
+import styled from 'styled-components';
 
-// Define keyframes
-const skeletonLoading = keyframes`
-  0% {
-    background-color: hsl(200, 20%, 80%);
-  }
-  100% {
-    background-color: hsl(200, 20%, 95%);
-  }
-`;
 
 // Define types and export components
 type SectionStyleProps = {
@@ -45,6 +36,7 @@ type SectionStyleProps = {
   visibility?: string;
   zIndex?: string;
   fontSize?: string;
+  animation?: string;
 };
 
 export const Section = styled.div<SectionStyleProps>`
@@ -84,7 +76,7 @@ export const Section = styled.div<SectionStyleProps>`
 
   &.skeleton {
     > * {
-      visibility: ${(props) => (props.visibility || skeletonLoading ? 'hidden' : 'visible')};
+      visibility: ${(props) => (props.visibility || props.animation ? 'hidden' : 'visible')};
     }
 
     &:after {
@@ -95,7 +87,7 @@ export const Section = styled.div<SectionStyleProps>`
       left: 0;
       right: 0;
       z-index: 1;
-      animation: ${skeletonLoading} 1s linear infinite alternate;
+      animation: ${(props) => props.animation};
       border-radius: 8px;
     }
   }
@@ -112,6 +104,7 @@ type DivStyleProps = {
   borderRadius?: string;
   textAlign?: string;
   visibility?: string;
+  animation?: string;
 };
 export const Div = styled.div<DivStyleProps>`
   height: ${(props) => props.height || 'auto'};
@@ -126,7 +119,7 @@ export const Div = styled.div<DivStyleProps>`
 
   &.skeleton {
     > * {
-      visibility: ${(props) => (props.visibility || skeletonLoading ? 'hidden' : 'visible')};
+      visibility: ${(props) => (props.visibility || props.animation ? 'hidden' : 'visible')};
     }
 
     &:after {
@@ -138,7 +131,7 @@ export const Div = styled.div<DivStyleProps>`
       right: 0;
       opacity: 1;
       z-index: 1;
-      animation: ${skeletonLoading} 1s linear infinite alternate;
+      animation: ${(props) => props.animation};
       border-radius: 8px;
     }
   }
@@ -170,6 +163,7 @@ type SpanStyleProps = {
   whiteSpace?: string;
   visibility?: string;
   textWrap?: string;
+  animation?: string;
 };
 
 export const Span = styled.span<SpanStyleProps>`
@@ -201,7 +195,7 @@ export const Span = styled.span<SpanStyleProps>`
 
   &.skeleton {
     > * {
-      visibility: ${(props) => (props.visibility || skeletonLoading ? 'hidden' : 'visible')};
+      visibility: ${(props) => (props.visibility || props.animation ? 'hidden' : 'visible')};
     }
 
     &:after {
@@ -213,7 +207,7 @@ export const Span = styled.span<SpanStyleProps>`
       right: 0;
       opacity: 1;
       z-index: 1;
-      animation: ${skeletonLoading} 1s linear infinite alternate;
+      animation: ${(props) => props.animation};
       border-radius: 8px;
     }
   }