loading

src/routes/Leaderboard.svelte

@@ -19,26 +19,32 @@
     const baseUrl = "https://huggingface.co/datasets/dylanebert/3d-arena/resolve/main/outputs";
     let leaderboard: Entry[] = [];
     let filteredLeaderboard: Entry[] = [];
+    let isLoading = false;
 
     const fetchLeaderboardData = async () => {
-        const url = `/api/leaderboard?vote_type=${voteType}`;
-        const response = await fetch(url, {
-            method: "GET",
-            headers: {
-                "Cache-Control": "no-cache",
-            },
-        });
-        const data = (await response.json()) as Entry[];
-        const entriesWithDisplayNames = await Promise.all(
-            data.map(async (entry) => {
-                const config = await getConfig(entry.name);
-                return { ...entry, displayName: config.DisplayName || entry.name };
-            }),
-        );
-        entriesWithDisplayNames.sort((a, b) => a.rank - b.rank);
+        isLoading = true;
+        try {
+            const url = `/api/leaderboard?vote_type=${voteType}`;
+            const response = await fetch(url, {
+                method: "GET",
+                headers: {
+                    "Cache-Control": "no-cache",
+                },
+            });
+            const data = (await response.json()) as Entry[];
+            const entriesWithDisplayNames = await Promise.all(
+                data.map(async (entry) => {
+                    const config = await getConfig(entry.name);
+                    return { ...entry, displayName: config.DisplayName || entry.name };
+                }),
+            );
+            entriesWithDisplayNames.sort((a, b) => a.rank - b.rank);
 
-        leaderboard = entriesWithDisplayNames;
-        updateFilteredLeaderboard();
+            leaderboard = entriesWithDisplayNames;
+            updateFilteredLeaderboard();
+        } finally {
+            isLoading = false;
+        }
     };
 
     const updateFilteredLeaderboard = () => {
@@ -62,7 +68,12 @@
     });
 </script>
 
-{#if filteredLeaderboard.length > 0}
+{#if isLoading}
+    <div class="loading-container">
+        <ProgressBarRound class="loading-icon" />
+        <div class="loading-text">Loading...</div>
+    </div>
+{:else if filteredLeaderboard.length > 0}
     <div class="grid">
         {#each filteredLeaderboard as entry, index}
             <button class="grid-item" on:click={() => onEntryClick(entry)}>