From 01ea1e1f38d111a6f84bed44a6440820913ed86c Mon Sep 17 00:00:00 2001
From: sahar-fehri <sahar.fehri@consensys.net>
Date: Wed, 19 Feb 2025 12:50:20 +0100
Subject: [PATCH] fix: fix spinner display in NFT tab

---
 .../app/assets/nfts/nft-grid/nft-grid.tsx     | 28 +++++++++++++------
 .../app/assets/nfts/nfts-tab/nfts-tab.tsx     |  8 +++++-
 2 files changed, 26 insertions(+), 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
index 626010dbea18..c07f7fb66a45 100644
--- 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
index 3faae7c68e16..5acda9db178d 100644
--- 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"