fix: internal image loader not with full width

FuelLabs · Feb 12, 2025 · 4156b55 · 4156b55
1 parent 5087a46
commit 4156b55
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 10 deletions.
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,19 @@
 import { cssObj } from '@fuel-ui/css';
-import { ContentLoader } from '@fuel-ui/react';
+import { Box, 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}`}
-      style={cssObj({
-        borderRadius: '12px',
+    <Box
+      css={cssObj({
+        overflow: 'hidden',
+        borderRadius: '10px',
+        width: `${size}px`,
+        height: `${size}px`,
       })}
     >
-      <rect x="0" y="0" rx="0" ry="0" width="22" height="89" />
-    </ContentLoader>
+      <ContentLoader width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+        <rect x="0" y="0" rx="0" ry="0" width={size} height={size} />
+      </ContentLoader>
+    </Box>
   );
 }
diff --git a/packages/app/src/systems/Account/components/BalanceNFTs/NFTListItemLoading.tsx b/packages/app/src/systems/Account/components/BalanceNFTs/NFTListItemLoading.tsx
@@ -0,0 +1,19 @@
+import { cssObj } from '@fuel-ui/css';
+import { Box } from '@fuel-ui/react';
+import { NFTImageLoading } from './NFTImageLoading';
+import { NFTTitleLoading } from './NFTTitleLoading';
+
+export function NFTListItemLoading() {
+  return (
+    <Box
+      css={cssObj({
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '8px',
+      })}
+    >
+      <NFTImageLoading />
+      <NFTTitleLoading />
+    </Box>
+  );
+}
diff --git a/packages/app/src/systems/Account/components/BalanceNFTs/NFTTitleLoading.tsx b/packages/app/src/systems/Account/components/BalanceNFTs/NFTTitleLoading.tsx
@@ -0,0 +1,23 @@
+import { cssObj } from '@fuel-ui/css';
+import { Box, ContentLoader } from '@fuel-ui/react';
+
+export function NFTTitleLoading({ height = 18 }: { height?: number }) {
+  return (
+    <Box
+      css={cssObj({
+        overflow: 'hidden',
+        borderRadius: '6px',
+        width: '89px',
+        height: `${height}px`,
+      })}
+    >
+      <ContentLoader
+        width="89px"
+        height={height ?? '100%'}
+        viewBox={`0 0 89 ${height}`}
+      >
+        <rect x="0" y="0" rx="0" ry="0" width="89" height="18" />
+      </ContentLoader>
+    </Box>
+  );
+}