Add loading indicator

This commit is contained in:
Willian Mitsuda 2021-11-08 09:07:52 -03:00
parent d9155bff11
commit b9a9495c61
1 changed files with 25 additions and 17 deletions

View File

@ -36,23 +36,31 @@ const Trace: React.FC<TraceProps> = ({ txData, resolvedAddresses }) => {
return ( return (
<ContentFrame tabs> <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="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"> {traces ? (
<TransactionAddress <>
address={txData.from} <div className="border hover:border-gray-500 rounded px-1 py-0.5">
resolvedAddresses={resolvedAddresses} <TransactionAddress
/> address={txData.from}
</div> resolvedAddresses={resolvedAddresses}
<div className="ml-5 space-y-3"> />
{traces?.map((t, i, a) => ( </div>
<TraceItem <div className="ml-5 space-y-3">
key={i} {traces.map((t, i, a) => (
t={t} <TraceItem
last={i === a.length - 1} key={i}
fourBytesMap={sigMap} t={t}
resolvedAddresses={mergedResolvedAddresses} last={i === a.length - 1}
/> fourBytesMap={sigMap}
))} resolvedAddresses={mergedResolvedAddresses}
</div> />
))}
</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> </div>
</ContentFrame> </ContentFrame>
); );