chore: add suspense + fullscreen loaders

axelarnetwork · Jan 18, 2024 · a330297 · a330297
1 parent 072ce67
commit a330297
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 43 deletions.
diff --git a/apps/maestro/src/features/RecentTransactions/RecentTransactionsTable.tsx b/apps/maestro/src/features/RecentTransactions/RecentTransactionsTable.tsx
@@ -30,19 +30,29 @@ export const RecentTransactionsTable: FC<Props> = ({
     setPage(0);
   }, [contractMethod]);
 
-  const { data: txns, isLoading } = trpc.gmp.getRecentTransactions.useQuery({
-    contractMethod,
-    senderAddress,
-    pageSize: maxTransactions,
-    page,
-  });
+  const { data: txns, isLoading } = trpc.gmp.getRecentTransactions.useQuery(
+    {
+      contractMethod,
+      senderAddress,
+      pageSize: maxTransactions,
+      page,
+    },
+    {
+      suspense: true,
+    }
+  );
 
-  const { data: prevPageTxns } = trpc.gmp.getRecentTransactions.useQuery({
-    contractMethod,
-    senderAddress,
-    pageSize: maxTransactions,
-    page: page > 0 ? page - 1 : 0,
-  });
+  const { data: prevPageTxns } = trpc.gmp.getRecentTransactions.useQuery(
+    {
+      contractMethod,
+      senderAddress,
+      pageSize: maxTransactions,
+      page: page > 0 ? page - 1 : 0,
+    },
+    {
+      suspense: true,
+    }
+  );
 
   const { data: nextPageTxns } = trpc.gmp.getRecentTransactions.useQuery({
     contractMethod,

diff --git a/apps/maestro/src/pages/recent-transactions/index.tsx b/apps/maestro/src/pages/recent-transactions/index.tsx
@@ -1,5 +1,6 @@
 import { Tabs } from "@axelarjs/ui";
 import { invert } from "@axelarjs/utils";
+import { Suspense } from "react";
 
 import { useAccount } from "wagmi";
 
@@ -36,25 +37,31 @@ const RecentTransactionsPage = () => {
     >
       <Page.Title>My Recent Transactions</Page.Title>
       <div className="flex-1 space-y-4">
-        <Tabs boxed>
-          {CONTRACT_METHODS.map((method) => (
-            <Tabs.Tab
-              key={method}
-              onClick={(e) => {
-                e.preventDefault();
-                setTab(REVERSE_TAB_MAP[method]);
-              }}
-              active={contractMethod === method}
-            >
-              {CONTRACT_METHODS_LABELS[method]}
-            </Tabs.Tab>
-          ))}
-        </Tabs>
-        <RecentTransactionsTable
-          contractMethod={contractMethod}
-          senderAddress={address}
-          maxTransactions={20}
-        />
+        <Suspense
+          fallback={
+            <Page.FullScreenLoading loadingMessage="loading recent transactions..." />
+          }
+        >
+          <Tabs boxed>
+            {CONTRACT_METHODS.map((method) => (
+              <Tabs.Tab
+                key={method}
+                onClick={(e) => {
+                  e.preventDefault();
+                  setTab(REVERSE_TAB_MAP[method]);
+                }}
+                active={contractMethod === method}
+              >
+                {CONTRACT_METHODS_LABELS[method]}
+              </Tabs.Tab>
+            ))}
+          </Tabs>
+          <RecentTransactionsTable
+            contractMethod={contractMethod}
+            senderAddress={address}
+            maxTransactions={20}
+          />
+        </Suspense>
       </div>
     </Page>
   );

diff --git a/apps/maestro/src/services/db/kv/MaestroKVClient.ts b/apps/maestro/src/services/db/kv/MaestroKVClient.ts
@@ -65,11 +65,28 @@ export default class MaestroKVClient extends BaseMaestroKVClient {
     return await this.kv.get<AccountStatus>(key);
   }
 
+  async getAccounStatuses() {
+    const match = COLLECTION_KEYS.accountStatus("*" as `0x${string}`);
+    const [, keys] = await this.kv.scan(0, { match });
+    const values = await this.kv.mget<AccountStatus[]>(keys);
+
+    return keys.map((key, i) => ({
+      // extract account address from key (e.g. "accounts:0x1234:status" -> "0x1234")
+      accountAddress: key.split(":")[1] as `0x${string}`,
+      status: values[i],
+    }));
+  }
+
   async getGlobalMessage() {
     const key = COLLECTION_KEYS.globalMessage;
     return await this.kv.hgetall<Message>(key);
   }
 
+  async setGlobalMessage(message: Message) {
+    const key = COLLECTION_KEYS.globalMessage;
+    return await this.kv.hset(key, message);
+  }
+
   async getAccountMessage(accountAddresss: `0x${string}`) {
     const key = COLLECTION_KEYS.accountMessage(accountAddresss);
     return await this.kv.hgetall<Message>(key);

diff --git a/apps/maestro/src/ui/layouts/Page.tsx b/apps/maestro/src/ui/layouts/Page.tsx
@@ -218,21 +218,25 @@ const Page = ({
       >
         {pageContent}
       </Clamp>
-      {isLoading && (
-        <div className="absolute inset-0 grid place-items-center bg-black/20 backdrop-blur-sm">
-          <div className="grid place-items-center gap-12 text-center">
-            <GridLoader
-              color="var(--primary)"
-              className="animate-pulse [animation-duration:3s]"
-            />
-            <span>{loadingMessage || "loading page data..."}</span>
-          </div>
-        </div>
-      )}
+      {isLoading && <FullScreenLoading loadingMessage={loadingMessage} />}
     </>
   );
 };
 
+export const FullScreenLoading = ({ loadingMessage = "" }) => (
+  <div className="absolute inset-0 grid place-items-center bg-black/20 backdrop-blur-sm">
+    <div className="grid place-items-center gap-12 text-center">
+      <GridLoader
+        color="var(--primary)"
+        className="animate-pulse [animation-duration:3s]"
+      />
+      <span>{loadingMessage || "loading page data..."}</span>
+    </div>
+  </div>
+);
+
 export default Object.assign(Page, {
   Title: tw.h1`text-2xl font-bold`,
+  Content: tw.div`flex-1 grid`,
+  FullScreenLoading,
 });
diff --git a/apps/maestro/src/ui/pages/InterchainTokensPage/index.tsx b/apps/maestro/src/ui/pages/InterchainTokensPage/index.tsx
@@ -10,7 +10,11 @@ const InterchainTokensPage = () => {
   return (
     <Page pageTitle="My Interchain Tokens">
       <div className="flex flex-col gap-4">
-        <Suspense fallback={<div>Loading...</div>}>
+        <Suspense
+          fallback={
+            <Page.FullScreenLoading loadingMessage="loading interchain tokens..." />
+          }
+        >
           <TokenList sessionAddress={session?.address} />
         </Suspense>
       </div>