add loading state

MetaMask · Nov 8, 2022 · 36fcf0c · 36fcf0c
1 parent 854b61f
commit 36fcf0c
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 18 deletions.
diff --git a/ui/components/app/confirm-page-container/flask/snap-insight.js b/ui/components/app/confirm-page-container/flask/snap-insight.js
@@ -19,16 +19,20 @@ import ActionableMessage from '../../../ui/actionable-message/actionable-message
 
 export const SnapInsight = ({ transaction, chainId, selectedSnap }) => {
   const t = useI18nContext();
-  const { data: response, error } = useTransactionInsightSnap({
+  const {
+    data: response,
+    error,
+    loading,
+  } = useTransactionInsightSnap({
     transaction,
     chainId,
     snapId: selectedSnap.id,
   });
 
   const data = response?.insights;
 
-  const hasNoData = (!data || (data && !Object.keys(data).length)) && !error;
-
+  const hasNoData =
+    !error && (loading || !data || (data && !Object.keys(data).length));
   return (
     <Box
       flexDirection={FLEX_DIRECTION.COLUMN}
@@ -40,7 +44,7 @@ export const SnapInsight = ({ transaction, chainId, selectedSnap }) => {
       textAlign={hasNoData && TEXT_ALIGN.CENTER}
       className="snap-insight"
     >
-      {response && !error && (
+      {!loading && !error && (
         <Box
           height="full"
           flexDirection={FLEX_DIRECTION.COLUMN}
@@ -96,19 +100,8 @@ export const SnapInsight = ({ transaction, chainId, selectedSnap }) => {
           )}
         </Box>
       )}
-      {!response && !error && (
-        <>
-          <Preloader size={40} />
-          <Typography
-            marginTop={3}
-            color={COLORS.TEXT_ALTERNATIVE}
-            variant={TYPOGRAPHY.H6}
-          >
-            {t('snapsInsightLoading')}
-          </Typography>
-        </>
-      )}
-      {!response && error && (
+
+      {!loading && error && (
         <Box
           paddingTop={0}
           paddingRight={6}
@@ -127,6 +120,19 @@ export const SnapInsight = ({ transaction, chainId, selectedSnap }) => {
           />
         </Box>
       )}
+
+      {loading && (
+        <>
+          <Preloader size={40} />
+          <Typography
+            marginTop={3}
+            color={COLORS.TEXT_ALTERNATIVE}
+            variant={TYPOGRAPHY.H6}
+          >
+            {t('snapsInsightLoading')}
+          </Typography>
+        </>
+      )}
     </Box>
   );
 };

diff --git a/ui/hooks/flask/useTransactionInsightSnap.js b/ui/hooks/flask/useTransactionInsightSnap.js
@@ -12,6 +12,8 @@ export function useTransactionInsightSnap({ transaction, chainId, snapId }) {
       'This snap does not have the transaction insight endowment.',
     );
   }
+
+  const [loading, setLoading] = useState(true);
   const [data, setData] = useState(undefined);
   const [error, setError] = useState(undefined);
 
@@ -31,12 +33,14 @@ export function useTransactionInsightSnap({ transaction, chainId, snapId }) {
         setData(d);
       } catch (err) {
         setError(err);
+      } finally {
+        setLoading(false);
       }
     }
     if (transaction) {
       fetchInsight();
     }
   }, [snapId, transaction, chainId]);
 
-  return { data, error };
+  return { data, error, loading };
 }