fix: size of nft skeleton

FuelLabs · Feb 12, 2025 · a67facc · a67facc
1 parent bfb6000
commit a67facc
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 10 deletions.
diff --git a/packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx b/packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx
@@ -37,7 +37,7 @@ export const BalanceNFTs = ({
 
   return (
     <Box css={styles.root}>
-      {isLoading && !collections.length && (
+      {isLoading && (
         <Box css={styles.gridLoading}>
           <NFTImageLoading />
           <NFTImageLoading />
@@ -54,7 +54,7 @@ export const BalanceNFTs = ({
           hideFaucet
         />
       )}
-      {!!collections.length && (
+      {!isLoading && !!collections.length && (
         <Accordion type="multiple" defaultValue={defaultValue}>
           {collections.map((collection) => (
             <Accordion.Item key={collection.name} value={collection.name}>
@@ -115,8 +115,10 @@ const styles = {
       borderBottom: '1px solid $border',
       borderRadius: '$none',
 
-      svg: {
-        width: '$3',
+      '.empty': {
+        svg: {
+          width: '$3',
+        },
       },
     },
     '.fuel_Accordion-content': {

diff --git a/packages/app/src/systems/Account/components/BalanceNFTs/NFTImage.tsx b/packages/app/src/systems/Account/components/BalanceNFTs/NFTImage.tsx
@@ -11,7 +11,7 @@ interface NFTImageProps {
 
 function Empty() {
   return (
-    <Box css={styles.noImage}>
+    <Box css={styles.noImage} className="empty">
       <Icon icon={Icon.is('FileOff')} />
     </Box>
   );
@@ -36,6 +36,7 @@ const _NFTImage = ({ assetId, image }: NFTImageProps) => {
 
   if (!image || !!fallback) return <Empty />;
 
+
   return (
     <Box css={styles.item}>
       {isLoading && <NFTImageLoading />}

diff --git a/packages/app/src/systems/Account/components/BalanceNFTs/NFTImageLoading.tsx b/packages/app/src/systems/Account/components/BalanceNFTs/NFTImageLoading.tsx
@@ -1,17 +1,17 @@
 import { cssObj } from '@fuel-ui/css';
 import { ContentLoader } from '@fuel-ui/react';
 
-export function NFTImageLoading({ height = 89 }: { height?: number }) {
+export function NFTImageLoading({ size = 89 }: { size?: number }) {
   return (
     <ContentLoader
-      width="100%"
-      height={height ?? '100%'}
-      viewBox={`0 0 22 ${height}`}
+      width={size}
+      height={size}
+      viewBox={`0 0 ${size} ${size}`}
       style={cssObj({
         borderRadius: '12px',
       })}
     >
-      <rect x="0" y="0" rx="0" ry="0" width="22" height="89" />
+      <rect x="0" y="0" rx="0" ry="0" width={size} height={size} />
     </ContentLoader>
   );
 }