From a19a39862c633884bdbe836549267407042930b9 Mon Sep 17 00:00:00 2001
From: sahar-fehri <sahar.fehri@consensys.net>
Date: Wed, 19 Feb 2025 17:10:00 +0100
Subject: [PATCH] fix: fix spinner display in NFT tab (#30427)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## **Description**

Fix spinner display in NFt tab.

No functional changes

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/30427?quickstart=1)

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to nft tab
2. Spinner should be centered

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
---
 .../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"