fix: fix spinner display in NFT tab

MetaMask · Feb 19, 2025 · 01ea1e1 · 01ea1e1
1 parent 599a4b5
commit 01ea1e1
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 10 deletions.
diff --git a/ui/components/app/assets/nfts/nft-grid/nft-grid.tsx b/ui/components/app/assets/nfts/nft-grid/nft-grid.tsx
@@ -1,7 +1,11 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { Hex } from '@metamask/utils';
-import { Display } from '../../../../../helpers/constants/design-system';
+import {
+  AlignItems,
+  Display,
+  JustifyContent,
+} from '../../../../../helpers/constants/design-system';
 import { Box } from '../../../../component-library';
 import Spinner from '../../../../ui/spinner';
 import { getNftImageAlt } from '../../../../../helpers/utils/nfts';
@@ -99,15 +103,21 @@ export default function NftGrid({
             </Box>
           );
         })}
-        {nftsStillFetchingIndication ? (
-          <Box className="nfts-tab__fetching">
-            <Spinner
-              color="var(--color-warning-default)"
-              className="loading-overlay__spinner"
-            />
-          </Box>
-        ) : null}
       </Box>
+      {nftsStillFetchingIndication ? (
+        <Box
+          className="nfts-tab__fetching"
+          justifyContent={JustifyContent.center}
+          alignItems={AlignItems.center}
+          display={Display.Flex}
+          marginTop={4}
+        >
+          <Spinner
+            color="var(--color-warning-default)"
+            className="loading-overlay__spinner"
+          />
+        </Box>
+      ) : null}
     </Box>
   );
 }
diff --git a/ui/components/app/assets/nfts/nfts-tab/nfts-tab.tsx b/ui/components/app/assets/nfts/nfts-tab/nfts-tab.tsx
@@ -134,7 +134,13 @@ export default function NftsTab() {
 
   if (!hasAnyNfts && nftsStillFetchingIndication) {
     return (
-      <Box className="nfts-tab__loading">
+      <Box
+        className="nfts-tab__loading"
+        justifyContent={JustifyContent.center}
+        alignItems={AlignItems.center}
+        display={Display.Flex}
+        marginTop={4}
+      >
         <Spinner
           color="var(--color-warning-default)"
           className="loading-overlay__spinner"