index: add loading spinner

Signed-off-by: NotAShelf <raf@notashelf.dev>
Change-Id: I383f790b11f2b350ebe4b51a81af1d286a6a6964

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">

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;