From b7edd5a5a7f2142f63c668783015539847733ce3 Mon Sep 17 00:00:00 2001
From: Jennifer Echenim <echenimjennifer@gmail.com>
Date: Mon, 15 Jul 2024 19:04:12 +0400
Subject: [PATCH] Refactor dashboard component to handle loading states

---
 .../modules/dashboard/analytics-card.tsx        |  6 +++---
 .../src/components/modules/dashboard/index.tsx  | 17 ++++++++++++++---
 .../frontend/src/types/interfaces/index.ts      |  1 +
 3 files changed, 18 insertions(+), 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
index 2caec11f59..41c6b6448e 100644
--- 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
index f2ec71e079..18124148f6 100644
--- 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,6 +95,7 @@ export default function Dashboard() {
       // TODO: add change
       // change: "+20.1%",
       icon: ReaderIcon,
+      loading: isTransactionCountLoading,
     },
     {
       title: "Contracts",
@@ -93,6 +103,7 @@ export default function Dashboard() {
       // 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
index 9ab1d962e6..48b87edb9e 100644
--- 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 {