Loading Indicator

src/components/Layout.tsx

@@ -188,6 +188,13 @@ export const Layout: Component<LayoutProps> = (props) => {
                     </div>
                 </div>
 
+                {/* Sync Progress Bar Overlay */}
+                <Show when={store.isInitializing}>
+                    <div class="fixed top-0 left-0 w-full h-0.5 z-[100] overflow-hidden bg-primary/10">
+                        <div class="h-full bg-primary animate-progress-fast w-1/3" />
+                    </div>
+                </Show>
+
                 {/* Main Content Area */}
                 <main class={cn(
                     "flex-1 min-w-0 overflow-y-auto overflow-x-hidden relative scroll-smooth",

src/index.css

@@ -77,6 +77,18 @@
       transform: translateX(3px);
     }
   }
+
+  --animate-progress-fast: loading-progress 2s infinite linear;
+
+  @keyframes loading-progress {
+    0% {
+      transform: translateX(-100%);
+    }
+
+    100% {
+      transform: translateX(300%);
+    }
+  }
 }
 
 :root {