fix(ts): refactor codebase for capacitor setup

app/(tabs)/leaderboard/page.tsx

@@ -2,6 +2,7 @@
 
 import BackgroundWrapper from "@/components/BackgroundWrapper";
 import Header from "@/components/Header";
+import DestructibleAlert from "@/components/DestructibleAlert";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { API_URL, getToken } from "@/lib/auth";
 import { BoardData, getLeaderboard } from "@/lib/leaderboard";
@@ -40,7 +41,14 @@ const LeaderboardPage = () => {
         setUserData(fetchedUserData);
       } catch (error) {
         console.error(error);
-        setUserData(undefined);
+        setUserData({
+          name: "",
+          institution: "",
+          sscRoll: "",
+          hscRoll: "",
+          email: "",
+          phone: "",
+        });
       }
     }
 
@@ -97,6 +105,33 @@ const LeaderboardPage = () => {
     return result ? [{ ...result, rank: sortedData.indexOf(result) + 1 }] : [];
   };
 
+  if (loading) {
+    return (
+      <BackgroundWrapper>
+        <section>
+          <Header displayTabTitle="Leaderboard" />
+          <section className="flex flex-col mx-10 pt-10 space-y-4">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-900 mb-4"></div>
+            <p className="text-lg font-medium text-gray-900">Loading...</p>
+          </section>
+        </section>
+      </BackgroundWrapper>
+    );
+  }
+
+  if (boardError) {
+    return (
+      <BackgroundWrapper>
+        <section>
+          <Header displayTabTitle="Leaderboard" />
+          <section className="flex flex-col mx-10 pt-10 space-y-4">
+            <DestructibleAlert text={boardError} />
+          </section>
+        </section>
+      </BackgroundWrapper>
+    );
+  }
+
   return (
     <BackgroundWrapper>
       <section>