fix skeleton for dynamicaly truncated strings

decs.d.ts

-declare module 'react-identicons'
+declare module 'react-identicons';
+declare module 'use-font-face-observer';

toolkit/theme/recipes/skeleton.recipe.ts

@@ -13,7 +13,9 @@ export const recipe = defineRecipe({
         color: 'transparent',
         pointerEvents: 'none',
         userSelect: 'none',
-        flexShrink: '0',
+        // 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',
         },

ui/shared/HashStringShortenDynamic.tsx

@@ -28,7 +28,6 @@ interface Props {
   as?: React.ElementType;
 }
 
-// TODO @tom2drum fix truncation when loading
 const HashStringShortenDynamic = ({ hash, fontWeight = '400', isTooltipDisabled, tailLength = TAIL_LENGTH, as = 'span' }: Props) => {
   const elementRef = useRef<HTMLSpanElement>(null);
   const [ displayedString, setDisplayedString ] = React.useState(hash);

ui/showcases/Menu.tsx

@@ -30,7 +30,7 @@ const MenuShowcase = () => {
 
             <MenuRoot>
               <MenuTrigger asChild>
-                <IconButton variant="dropdown" size="sm" loading>
+                <IconButton variant="dropdown" size="sm" loadingSkeleton>
                   <IconSvg name="dots" boxSize="18px"/>
                 </IconButton>
               </MenuTrigger>