From b9a9495c61bde6dbcf1a01ab4ce9bfc735694d44 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Mon, 8 Nov 2021 09:07:52 -0300
Subject: [PATCH] Add loading indicator

---
 src/transaction/Trace.tsx | 42 +++++++++++++++++++++++----------------
 1 file changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/transaction/Trace.tsx b/src/transaction/Trace.tsx
index 86425d6..7e9053c 100644
--- a/src/transaction/Trace.tsx
+++ b/src/transaction/Trace.tsx
@@ -36,23 +36,31 @@ const Trace: React.FC<TraceProps> = ({ txData, resolvedAddresses }) => {
   return (
     <ContentFrame tabs>
       <div className="mt-4 mb-5 space-y-3 font-code text-sm flex flex-col items-start overflow-x-auto">
-        <div className="border hover:border-gray-500 rounded px-1 py-0.5">
-          <TransactionAddress
-            address={txData.from}
-            resolvedAddresses={resolvedAddresses}
-          />
-        </div>
-        <div className="ml-5 space-y-3">
-          {traces?.map((t, i, a) => (
-            <TraceItem
-              key={i}
-              t={t}
-              last={i === a.length - 1}
-              fourBytesMap={sigMap}
-              resolvedAddresses={mergedResolvedAddresses}
-            />
-          ))}
-        </div>
+        {traces ? (
+          <>
+            <div className="border hover:border-gray-500 rounded px-1 py-0.5">
+              <TransactionAddress
+                address={txData.from}
+                resolvedAddresses={resolvedAddresses}
+              />
+            </div>
+            <div className="ml-5 space-y-3">
+              {traces.map((t, i, a) => (
+                <TraceItem
+                  key={i}
+                  t={t}
+                  last={i === a.length - 1}
+                  fourBytesMap={sigMap}
+                  resolvedAddresses={mergedResolvedAddresses}
+                />
+              ))}
+            </div>
+          </>
+        ) : (
+          <div className="border hover:border-gray-500 rounded px-1 py-1 w-96 h-7">
+            <div className="animate-pulse w-full h-full rounded bg-gray-200"></div>
+          </div>
+        )}
       </div>
     </ContentFrame>
   );