From 1850ac135f6b4bdd7d70e5598aa7fa539e391bfa Mon Sep 17 00:00:00 2001
From: NotAShelf <raf@notashelf.dev>
Date: Fri, 23 Jan 2026 00:50:23 +0300
Subject: [PATCH] index: add loading spinner

Signed-off-by: NotAShelf <raf@notashelf.dev>
Change-Id: I383f790b11f2b350ebe4b51a81af1d286a6a6964
---
 src/index.tsx  | 10 ++++++++--
 src/styles.css | 17 +++++++++++++++++
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index a863ef1..17a4ca9 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -192,7 +192,13 @@ function App() {
       </header>
 
       <main class="main">
-        <Suspense fallback={<div class="loading">Loading analysis...</div>}>
+        <Show when={isLoading()}>
+          <div class="loading">
+            <div class="spinner"></div>
+            <span>Loading saved data...</span>
+          </div>
+        </Show>
+        <Show when={!isLoading()}>
           <Show when={view() === 'analysis'}>
             <Show when={!currentStats()}>
               <FileUpload
@@ -238,7 +244,7 @@ function App() {
               onDelete={deleteSnapshot}
             />
           </Show>
-        </Suspense>
+        </Show>
       </main>
 
       <footer class="footer">
diff --git a/src/styles.css b/src/styles.css
index 5f6483b..55f9cef 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -63,13 +63,30 @@ body {
 
 .loading {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   min-height: 200px;
+  gap: 1rem;
   color: var(--text-secondary);
   font-size: 1rem;
 }
 
+.spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid var(--border-color);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .header-left {
   display: flex;
   align-items: baseline;