Refactor dashboard component to handle loading

states
ten-protocol · Jul 15, 2024 · b7edd5a · b7edd5a
1 parent bdc40a4
commit b7edd5a
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/tools/tenscan/frontend/src/components/modules/dashboard/analytics-card.tsx b/tools/tenscan/frontend/src/components/modules/dashboard/analytics-card.tsx
@@ -21,10 +21,10 @@ export default function AnalyticsCard({
       </CardHeader>
       <CardContent>
         <div className="text-2xl font-bold truncate mb-1">
-          {item.value ? (
-            item.value
-          ) : (
+          {item.loading ? (
             <Skeleton className="w-[100px] h-[20px] rounded-full" />
+          ) : (
+            item.value
           )}
         </div>
         {item?.change && (

diff --git a/tools/tenscan/frontend/src/components/modules/dashboard/index.tsx b/tools/tenscan/frontend/src/components/modules/dashboard/index.tsx
@@ -39,9 +39,15 @@ interface RecentData {
 }
 
 export default function Dashboard() {
-  const { price, transactions, transactionCount } = useTransactionsService();
-  const { contractCount } = useContractsService();
-  const { batches, latestBatch } = useBatchesService();
+  const {
+    price,
+    isPriceLoading,
+    transactions,
+    transactionCount,
+    isTransactionCountLoading,
+  } = useTransactionsService();
+  const { contractCount, isContractCountLoading } = useContractsService();
+  const { batches, latestBatch, isLatestBatchLoading } = useBatchesService();
   const { rollups } = useRollupsService();
 
   const DASHBOARD_DATA = [
@@ -53,6 +59,7 @@ export default function Dashboard() {
       // TODO: add change
       // change: "+20.1%",
       icon: RocketIcon,
+      loading: isPriceLoading,
     },
     {
       title: "Latest L2 Batch",
@@ -62,6 +69,7 @@ export default function Dashboard() {
       // TODO: add change
       // change: "+20.1%",
       icon: LayersIcon,
+      loading: isLatestBatchLoading,
     },
     {
       title: "Latest L1 Rollup",
@@ -77,6 +85,7 @@ export default function Dashboard() {
       // TODO: add change
       // change: "+20.1%",
       icon: CubeIcon,
+      loading: isLatestBatchLoading,
     },
     {
       title: "Transactions",
@@ -86,13 +95,15 @@ export default function Dashboard() {
       // TODO: add change
       // change: "+20.1%",
       icon: ReaderIcon,
+      loading: isTransactionCountLoading,
     },
     {
       title: "Contracts",
       value: contractCount?.count ? formatNumber(contractCount.count) : "N/A",
       // TODO: add change
       // change: "+20.1%",
       icon: FileTextIcon,
+      loading: isContractCountLoading,
     },
     {
       title: "Nodes",

diff --git a/tools/tenscan/frontend/src/types/interfaces/index.ts b/tools/tenscan/frontend/src/types/interfaces/index.ts
@@ -93,6 +93,7 @@ export interface DashboardAnalyticsData {
   value: string | number | JSX.Element;
   change?: string;
   icon: any;
+  loading?: boolean;
 }
 
 export enum ItemPosition {