From 9575075dc1b13deb3b14eab346047a9a4ebceb50 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Mon, 24 Jul 2023 10:35:37 -0500
Subject: [PATCH] UX: Remove height from loading block, use modern components
 (#20134)

* UX: Remove height from loading block, use modern components

* Fix lint
---
 ui/components/app/token-list/token-list.js | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/ui/components/app/token-list/token-list.js b/ui/components/app/token-list/token-list.js
index 5ff3eb382..2ed841033 100644
--- a/ui/components/app/token-list/token-list.js
+++ b/ui/components/app/token-list/token-list.js
@@ -8,6 +8,12 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
 import { useTokenTracker } from '../../../hooks/useTokenTracker';
 import { getShouldHideZeroBalanceTokens } from '../../../selectors';
 import { getTokens } from '../../../ducks/metamask/metamask';
+import { Box } from '../../component-library';
+import {
+  AlignItems,
+  Display,
+  JustifyContent,
+} from '../../../helpers/constants/design-system';
 
 export default function TokenList({ onTokenClick }) {
   const t = useI18nContext();
@@ -25,17 +31,14 @@ export default function TokenList({ onTokenClick }) {
   );
   if (loading) {
     return (
-      <div
-        style={{
-          display: 'flex',
-          height: '250px',
-          alignItems: 'center',
-          justifyContent: 'center',
-          padding: '30px',
-        }}
+      <Box
+        display={Display.Flex}
+        alignItems={AlignItems.center}
+        justifyContent={JustifyContent.center}
+        padding={7}
       >
         {t('loadingTokens')}
-      </div>
+      </Box>
     );
   }