Fix skeleton behavior (#2664)

* fix skeleton behavior

* fixes

* increase timeout for test

toolkit/chakra/skeleton.tsx

@@ -53,11 +53,9 @@ export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
     const { loading = false, ...rest } = props;
     return (
       <ChakraSkeleton
-        loading={ loading }
-        css={ !loading ? { animation: 'none' } : {} }
-        { ...(loading ? { 'data-loading': true } : {}) }
-        { ...rest }
         ref={ ref }
+        { ...(loading ? { 'data-loading': true, state: 'loading' } : { variant: 'none' }) }
+        { ...rest }
       />
     );
   },

toolkit/theme/foundations/semanticTokens.ts

@@ -135,12 +135,8 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
           active: { value: { _light: '{colors.link.primary.hover}' } },
         },
         bg: {
-          DEFAULT: { value: { _light: '{colors.white}', _dark: '{colors.black}' } },
-          selected: { value: { _light: '{colors.blue.50}', _dark: '{colors.gray.800}' } },
-        },
-        border: {
-          DEFAULT: { value: '{colors.border.divider}' },
           selected: { value: { _light: '{colors.blue.50}', _dark: '{colors.gray.800}' } },
+          group: { value: { _light: '{colors.white}', _dark: '{colors.black}' } },
         },
       },
       menu: {

toolkit/theme/recipes/alert.recipe.ts

@@ -11,9 +11,6 @@ export const recipe = defineSlotRecipe({
       position: 'relative',
       borderRadius: 'base',
       color: 'alert.fg',
-      _loading: {
-        bgColor: 'unset',
-      },
     },
     title: {
       fontWeight: '600',
@@ -39,51 +36,11 @@ export const recipe = defineSlotRecipe({
 
   variants: {
     status: {
-      info: {
-        root: {
-          bgColor: 'alert.bg.info',
-          '&:not([data-loading], [aria-busy=true])': {
-            bgColor: 'alert.bg.info',
-          },
-          color: 'alert.fg',
-        },
-      },
-      warning: {
-        root: {
-          bgColor: 'alert.bg.warning',
-          '&:not([data-loading], [aria-busy=true])': {
-            bgColor: 'alert.bg.warning',
-          },
-          color: 'alert.fg',
-        },
-      },
-      warning_table: {
-        root: {
-          bgColor: 'alert.bg.warning_table',
-          '&:not([data-loading], [aria-busy=true])': {
-            bgColor: 'alert.bg.warning_table',
-          },
-          color: 'alert.fg',
-        },
-      },
-      success: {
-        root: {
-          bgColor: 'alert.bg.success',
-          '&:not([data-loading], [aria-busy=true])': {
-            bgColor: 'alert.bg.success',
-          },
-          color: 'alert.fg',
-        },
-      },
-      error: {
-        root: {
-          bgColor: 'alert.bg.error',
-          '&:not([data-loading], [aria-busy=true])': {
-            bgColor: 'alert.bg.error',
-          },
-          color: 'alert.fg',
-        },
-      },
+      info: {},
+      warning: {},
+      warning_table: {},
+      success: {},
+      error: {},
     },
 
     variant: {
@@ -129,6 +86,46 @@ export const recipe = defineSlotRecipe({
     },
   },
 
+  compoundVariants: [
+    {
+      status: 'info',
+      variant: 'subtle',
+      css: {
+        root: {
+          bg: 'alert.bg.info',
+        },
+      },
+    },
+    {
+      status: 'warning',
+      variant: 'subtle',
+      css: {
+        root: { bg: 'alert.bg.warning' },
+      },
+    },
+    {
+      status: 'warning_table',
+      variant: 'subtle',
+      css: {
+        root: { bg: 'alert.bg.warning_table' },
+      },
+    },
+    {
+      status: 'success',
+      variant: 'subtle',
+      css: {
+        root: { bg: 'alert.bg.success' },
+      },
+    },
+    {
+      status: 'error',
+      variant: 'subtle',
+      css: {
+        root: { bg: 'alert.bg.error' },
+      },
+    },
+  ],
+
   defaultVariants: {
     status: 'info',
     size: 'md',

toolkit/theme/recipes/badge.recipe.ts

@@ -14,7 +14,6 @@ export const recipe = defineRecipe({
     userSelect: 'none',
     _loading: {
       borderRadius: 'sm',
-      bgColor: 'unset',
     },
   },
   variants: {
@@ -23,80 +22,47 @@ export const recipe = defineRecipe({
     },
     colorPalette: {
       gray: {
-        bgColor: 'badge.gray.bg',
-        '&:not([data-loading], [aria-busy=true])': {
-          bgColor: 'badge.gray.bg',
-        },
+        bg: 'badge.gray.bg',
         color: 'badge.gray.fg',
       },
       green: {
-        bgColor: 'badge.green.bg',
-        '&:not([data-loading], [aria-busy=true])': {
-          bgColor: 'badge.green.bg',
-        },
+        bg: 'badge.green.bg',
         color: 'badge.green.fg',
       },
       red: {
-        bgColor: 'badge.red.bg',
-        '&:not([data-loading], [aria-busy=true])': {
-          bgColor: 'badge.red.bg',
-        },
+        bg: 'badge.red.bg',
         color: 'badge.red.fg',
       },
       purple: {
-        bgColor: 'badge.purple.bg',
-        '&:not([data-loading], [aria-busy=true])': {
-          bgColor: 'badge.purple.bg',
-        },
+        bg: 'badge.purple.bg',
         color: 'badge.purple.fg',
       },
       orange: {
-        bgColor: 'badge.orange.bg',
-        '&:not([data-loading], [aria-busy=true])': {
-          bgColor: 'badge.orange.bg',
-        },
+        bg: 'badge.orange.bg',
         color: 'badge.orange.fg',
       },
       blue: {
-        bgColor: 'badge.blue.bg',
-        '&:not([data-loading], [aria-busy=true])': {
-          bgColor: 'badge.blue.bg',
-        },
+        bg: 'badge.blue.bg',
         color: 'badge.blue.fg',
       },
       yellow: {
-        bgColor: 'badge.yellow.bg',
-        '&:not([data-loading], [aria-busy=true])': {
-          bgColor: 'badge.yellow.bg',
-        },
+        bg: 'badge.yellow.bg',
         color: 'badge.yellow.fg',
       },
       teal: {
-        bgColor: 'badge.teal.bg',
-        '&:not([data-loading], [aria-busy=true])': {
-          bgColor: 'badge.teal.bg',
-        },
+        bg: 'badge.teal.bg',
         color: 'badge.teal.fg',
       },
       cyan: {
-        bgColor: 'badge.cyan.bg',
-        '&:not([data-loading], [aria-busy=true])': {
-          bgColor: 'badge.cyan.bg',
-        },
+        bg: 'badge.cyan.bg',
         color: 'badge.cyan.fg',
       },
       purple_alt: {
-        bgColor: 'badge.purple_alt.bg',
-        '&:not([data-loading], [aria-busy=true])': {
-          bgColor: 'badge.purple_alt.bg',
-        },
+        bg: 'badge.purple_alt.bg',
         color: 'badge.purple_alt.fg',
       },
       blue_alt: {
-        bgColor: 'badge.blue_alt.bg',
-        '&:not([data-loading], [aria-busy=true])': {
-          bgColor: 'badge.blue_alt.bg',
-        },
+        bg: 'badge.blue_alt.bg',
         color: 'badge.blue_alt.fg',
       },
     },

toolkit/theme/recipes/button.recipe.ts

@@ -9,21 +9,12 @@ export const recipe = defineRecipe({
     _disabled: {
       opacity: 'control.disabled',
     },
-    _loading: {
-      bgColor: 'unset',
-    },
   },
   variants: {
     variant: {
       solid: {
         bg: 'blue.600',
         color: 'white',
-        '&:not([data-loading-skeleton])': {
-          bgColor: 'blue.600',
-          _expanded: {
-            bg: 'blue.400',
-          },
-        },
         _hover: {
           bg: 'blue.400',
         },
@@ -35,16 +26,16 @@ export const recipe = defineRecipe({
             borderInlineStartColor: 'spinner.track',
           },
         },
+        _expanded: {
+          bg: 'blue.400',
+        },
       },
       outline: {
-        borderWidth: '0px',
+        borderWidth: '2px',
         borderStyle: 'solid',
         bg: 'transparent',
         color: 'button.outline.fg',
         borderColor: 'button.outline.fg',
-        '&:not([data-loading-skeleton])': {
-          borderWidth: '2px',
-        },
         _hover: {
           bg: 'transparent',
           color: 'blue.400',
@@ -60,14 +51,11 @@ export const recipe = defineRecipe({
         },
       },
       dropdown: {
-        borderWidth: '0px',
+        borderWidth: '2px',
         borderStyle: 'solid',
         bg: 'transparent',
         color: 'button.dropdown.fg',
         borderColor: 'button.dropdown.border',
-        '&:not([data-loading-skeleton])': {
-          borderWidth: '2px',
-        },
         _hover: {
           bg: 'transparent',
           color: 'blue.400',
@@ -144,9 +132,6 @@ export const recipe = defineRecipe({
       hero: {
         bg: 'button.hero.bg',
         color: 'button.hero.fg',
-        '&:not([data-loading-skeleton])': {
-          bg: 'button.hero.bg',
-        },
         _loading: {
           opacity: 1,
           '& .chakra-spinner': {
@@ -209,9 +194,6 @@ export const recipe = defineRecipe({
       subtle: {
         bg: 'button.subtle.bg',
         color: 'button.subtle.fg',
-        '&:not([data-loading-skeleton])': {
-          bg: 'button.subtle.bg',
-        },
         _hover: {
           bg: 'button.subtle.bg',
           color: 'link.primary.hover',

toolkit/theme/recipes/close-button.recipe.ts

@@ -17,9 +17,6 @@ export const recipe = defineRecipe({
         bg: 'transparent',
         color: 'closeButton.fg',
         border: 'none',
-        '&:not([data-loading-skeleton])': {
-          bg: 'transparent',
-        },
         _hover: {
           bg: 'transparent',
           color: 'link.primary.hover',

toolkit/theme/recipes/link.recipe.ts

@@ -42,12 +42,6 @@ export const recipe = defineRecipe({
           color: 'link.primary.hover',
           textDecoration: 'none',
         },
-        _loading: {
-          bgColor: 'unset',
-        },
-        '&:not([data-loading], [aria-busy=true])': {
-          bgColor: 'link.underlaid.bg',
-        },
       },
       menu: {
         color: 'link.menu',
@@ -58,8 +52,7 @@ export const recipe = defineRecipe({
       },
       navigation: {
         color: 'link.navigation.fg',
-        bg: 'link.navigation.bg',
-        border: 'link.navigation.border',
+        bg: 'transparent',
         _hover: {
           color: 'link.navigation.fg.hover',
           textDecoration: 'none',
@@ -67,7 +60,6 @@ export const recipe = defineRecipe({
         _selected: {
           color: 'link.navigation.fg.selected',
           bg: 'link.navigation.bg.selected',
-          border: 'link.navigation.border.selected',
         },
         _active: {
           color: 'link.navigation.fg.active',

toolkit/theme/recipes/skeleton.recipe.ts

@@ -5,25 +5,26 @@ export const recipe = defineRecipe({
 
   variants: {
     loading: {
-      'true': {
+      // special value to override the default behavior of the skeleton in Chakra
+      // it uses "background: unset" when the loading prop is set to false
+      // but it causes issues with background color of child element (e.g. button, badge, etc.)
+      // so, instead of the "loading" prop, we use the "state" prop to control the skeleton (see below)
+      reset: {},
+    },
+    state: {
+      loading: {
         borderRadius: 'base',
         boxShadow: 'none',
         backgroundClip: 'padding-box',
         cursor: 'default',
         color: 'transparent',
+        borderWidth: '0px',
         pointerEvents: 'none',
         userSelect: 'none',
-        // we have to override the property set by chakra in order to make the skeleton shrink
-        // when the text is too long
-        flexShrink: 'initial',
         '&::before, &::after, *': {
           visibility: 'hidden',
         },
       },
-      'false': {
-        background: 'var(--layer-bg)',
-        animation: 'fade-in var(--fade-duration, 0.1s) ease-out !important',
-      },
     },
     variant: {
       pulse: {
@@ -50,6 +51,6 @@ export const recipe = defineRecipe({
 
   defaultVariants: {
     variant: 'shine',
-    loading: true,
+    loading: 'reset',
   },
 });

toolkit/theme/recipes/tag.recipe.ts

@@ -13,7 +13,6 @@ export const recipe = defineSlotRecipe({
       focusVisibleRing: 'outside',
       _loading: {
         borderRadius: 'sm',
-        bgColor: 'unset',
       },
     },
     label: {
@@ -100,9 +99,6 @@ export const recipe = defineSlotRecipe({
         root: {
           bgColor: 'tag.root.subtle.bg',
           color: 'tag.root.subtle.fg',
-          '&:not([data-loading], [aria-busy=true])': {
-            bgColor: 'tag.root.subtle.bg',
-          },
         },
       },
       clickable: {
@@ -110,9 +106,6 @@ export const recipe = defineSlotRecipe({
           cursor: 'pointer',
           bgColor: 'tag.root.clickable.bg',
           color: 'tag.root.clickable.fg',
-          '&:not([data-loading], [aria-busy=true])': {
-            bgColor: 'tag.root.clickable.bg',
-          },
           _hover: {
             opacity: 0.76,
           },
@@ -121,9 +114,6 @@ export const recipe = defineSlotRecipe({
       filter: {
         root: {
           bgColor: 'tag.root.filter.bg',
-          '&:not([data-loading], [aria-busy=true])': {
-            bgColor: 'tag.root.filter.bg',
-          },
         },
       },
       select: {
@@ -131,9 +121,6 @@ export const recipe = defineSlotRecipe({
           cursor: 'pointer',
           bgColor: 'tag.root.select.bg',
           color: 'tag.root.select.fg',
-          '&:not([data-loading], [aria-busy=true])': {
-            bgColor: 'tag.root.select.bg',
-          },
           _hover: {
             color: 'blue.400',
             opacity: 0.76,

ui/pages/Token.pw.tsx

@@ -48,6 +48,7 @@ test('base view', async({ render, page, createSocket }) => {
 });
 
 test('with verified info', async({ render, page, createSocket, mockApiResponse, mockAssetResponse }) => {
+  test.slow();
   await mockApiResponse('token_verified_info', verifiedAddressesMocks.TOKEN_INFO_APPLICATION.APPROVED, { pathParams: { chainId, hash } });
   await mockAssetResponse(tokenInfo.icon_url as string, './playwright/mocks/image_s.jpg');
 
@@ -56,7 +57,7 @@ test('with verified info', async({ render, page, createSocket, mockApiResponse,
   const socket = await createSocket();
   const channel = await socketServer.joinChannel(socket, `tokens:${ hash }`);
   socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
-  await component.getByText('100 ARIA').waitFor({ state: 'visible' });
+  await component.getByText('100 ARIA').waitFor({ state: 'visible', timeout: 10_000 });
 
   await page.getByLabel('Show info').click();
 

ui/shared/entities/address/AddressIdenticon.tsx

@@ -53,7 +53,7 @@ const Icon = dynamic(
 
         return (props: IconProps) => {
           const svg = GradientAvatar(props.hash, props.size, 'circle');
-          return <Box dangerouslySetInnerHTML={{ __html: svg }}/>;
+          return <Box display="flex" dangerouslySetInnerHTML={{ __html: svg }}/>;
         };
       }
 

ui/showcases/Button.tsx

@@ -40,6 +40,7 @@ const ButtonShowcase = () => {
             <Button variant="solid" data-hover>Hovered</Button>
             <Button variant="solid" disabled>Disabled</Button>
             <Button variant="solid" loading>Loading</Button>
+            <Button variant="solid" loadingSkeleton>Loading Skeleton</Button>
           </Sample>
 
           <Sample label="variant: outline">
@@ -47,12 +48,14 @@ const ButtonShowcase = () => {
             <Button variant="outline" data-hover>Hovered</Button>
             <Button variant="outline" disabled>Disabled</Button>
             <Button variant="outline" loading>Loading</Button>
+            <Button variant="outline" loadingSkeleton>Loading Skeleton</Button>
           </Sample>
 
           <Sample label="variant: link">
             <Button variant="link">Default</Button>
             <Button variant="link" data-hover>Hovered</Button>
             <Button variant="link" disabled>Disabled</Button>
+            <Button variant="link" loadingSkeleton>Disabled</Button>
           </Sample>
 
           <Sample label="variant: dropdown">
@@ -99,6 +102,7 @@ const ButtonShowcase = () => {
             </PopoverRoot>
             <Button variant="dropdown" disabled>Disabled</Button>
             <Button variant="dropdown" loading>Loading</Button>
+            <Button variant="dropdown" loadingSkeleton>Loading Skeleton</Button>
 
             <PopoverRoot>
               <Tooltip content="Tooltip content">
@@ -185,12 +189,14 @@ const ButtonShowcase = () => {
             <Button variant="subtle" size="xs">Default: Now+1h</Button>
             <Button variant="subtle" size="xs" data-hover>Hovered: Now+1h</Button>
             <Button variant="subtle" size="xs" disabled>Disabled: Now+1h</Button>
+            <Button variant="subtle" size="xs" loadingSkeleton>Loading Skeleton</Button>
           </Sample>
 
           <Sample label="variant: plain">
             <Button variant="plain">Default</Button>
             <Button variant="plain" data-hover>Hovered</Button>
             <Button variant="plain" disabled>Disabled</Button>
+            <Button variant="plain" loadingSkeleton>Loading Skeleton</Button>
           </Sample>
         </SamplesStack>
       </Section>

ui/snippets/navigation/horizontal/NavLink.tsx

@@ -48,7 +48,7 @@ const NavLink = ({ className, item, noIcon }: Props) => {
         <chakra.span>{ item.text }</chakra.span>
         { isHighlighted && (
           <LightningLabel
-            iconColor={ isActive ? 'link.navigation.bg.selected' : 'link.navigation.bg' }
+            iconColor={ isActive ? 'link.navigation.bg.selected' : 'link.navigation.bg.group' }
             position={{ lg: 'static' }}
             ml={{ lg: '2px' }}
             isCollapsed={ false }

ui/snippets/navigation/horizontal/NavLinkGroup.tsx

@@ -75,7 +75,7 @@ const NavLinkGroup = ({ item }: Props) => {
         { item.text }
         { isHighlighted && (
           <LightningLabel
-            iconColor={ item.isActive ? 'link.navigation.bg.selected' : 'link.navigation.bg' }
+            iconColor={ item.isActive ? 'link.navigation.bg.selected' : 'link.navigation.bg.group' }
             position={{ lg: 'static' }}
             ml={{ lg: '2px' }}
           />

ui/snippets/navigation/vertical/NavLink.tsx

@@ -75,7 +75,7 @@ const NavLink = ({ item, onClick, isCollapsed, isDisabled }: Props) => {
             </chakra.span>
             { isHighlighted && (
               <LightningLabel
-                iconColor={ isInternalLink && item.isActive ? 'link.navigation.bg.selected' : 'link.navigation.bg' }
+                iconColor={ isInternalLink && item.isActive ? 'link.navigation.bg.selected' : 'link.navigation.bg.group' }
                 isCollapsed={ isCollapsed }
               />
             ) }

ui/snippets/navigation/vertical/NavLinkGroup.tsx

@@ -81,7 +81,7 @@ const NavLinkGroup = ({ item, isCollapsed }: Props) => {
             </Text>
             { isHighlighted && (
               <LightningLabel
-                iconColor={ item.isActive ? 'link.navigation.bg.selected' : 'link.navigation.bg' }
+                iconColor={ item.isActive ? 'link.navigation.bg.selected' : 'link.navigation.bg.group' }
                 isCollapsed={ isCollapsed }
               />
             ) }