From 4be546db179b5abe9758836187c976d3f85382bc Mon Sep 17 00:00:00 2001
From: Danish Arora <danisharora099@gmail.com>
Date: Tue, 29 Oct 2024 15:25:15 +0530
Subject: [PATCH] chore: improve loading screens

---
 .../src/components/Chain/View/ChainList.tsx    | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/examples/buddybook/src/components/Chain/View/ChainList.tsx b/examples/buddybook/src/components/Chain/View/ChainList.tsx
index da40388..cfc4263 100644
--- a/examples/buddybook/src/components/Chain/View/ChainList.tsx
+++ b/examples/buddybook/src/components/Chain/View/ChainList.tsx
@@ -98,6 +98,22 @@ const ChainList: React.FC<ChainListProps> = ({ chainsData, onChainUpdate, isLoad
 
   const rootBlocks = chainsData.filter(block => !block.parentBlockUUID);
 
+  if (isLoading) {
+    return (
+      <Card className="w-full max-w-4xl mx-auto">
+        <CardHeader>
+          <CardTitle>Loading Chains</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col items-center justify-center space-y-4 py-8">
+            <Loader2 className="h-8 w-8 animate-spin" />
+            <p className="text-muted-foreground">Fetching chains from the network...</p>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
   return (
     <Card className="w-full max-w-4xl mx-auto">
       <CardHeader>
@@ -112,7 +128,7 @@ const ChainList: React.FC<ChainListProps> = ({ chainsData, onChainUpdate, isLoad
         </CardTitle>
       </CardHeader>
       <CardContent>
-        {rootBlocks.length === 0 && !isLoading ? (
+        {rootBlocks.length === 0 ? (
           <p>No chains found.</p>
         ) : (
           <ul className="space-y-4">