Improved initial load time

src/App.tsx

@@ -1,17 +1,19 @@
-import { type Component, createSignal, Show, onMount, onCleanup } from 'solid-js';
+import { type Component, createSignal, Show, onMount, onCleanup, lazy, Suspense } from 'solid-js';
 import { Layout } from './components/Layout';
 import { CriticalView } from './views/CriticalView';
-import { UrgencyView } from './views/UrgencyView';
-import { PriorityView } from './views/PriorityView';
-import { MatrixView } from './views/MatrixView';
-import { SettingsView } from './views/SettingsView';
 import { AuthCallback } from './components/Auth';
 import { pb } from './lib/pocketbase';
 import { initStore } from './store';
 
+// const CriticalView = lazy(() => import('./views/CriticalView').then(m => ({ default: m.CriticalView })));
+const UrgencyView = lazy(() => import('./views/UrgencyView').then(m => ({ default: m.UrgencyView })));
+const PriorityView = lazy(() => import('./views/PriorityView').then(m => ({ default: m.PriorityView })));
+const MatrixView = lazy(() => import('./views/MatrixView').then(m => ({ default: m.MatrixView })));
+const SettingsView = lazy(() => import('./views/SettingsView').then(m => ({ default: m.SettingsView })));
+
 const App: Component = () => {
   // Basic routing state
-  const [currentView, setCurrentView] = createSignal("matrix");
+  const [currentView, setCurrentView] = createSignal("critical");
   const [isAuthenticated, setIsAuthenticated] = createSignal(pb.authStore.isValid);
 
   onMount(() => {
@@ -23,16 +25,27 @@ const App: Component = () => {
     }, true);
 
     onCleanup(() => removeListener());
+
+    // Background preload of other views
+    setTimeout(() => {
+      // CriticalView is now static
+      import('./views/UrgencyView');
+      import('./views/PriorityView');
+      import('./views/MatrixView');
+      import('./views/SettingsView');
+    }, 100);
   });
 
   return (
     <Show when={isAuthenticated()} fallback={<AuthCallback onSuccess={() => { }} />}>
       <Layout currentView={currentView()} setView={setCurrentView}>
-        <Show when={currentView() === "critical"}><CriticalView /></Show>
-        <Show when={currentView() === "urgency"}><UrgencyView /></Show>
-        <Show when={currentView() === "priority"}><PriorityView /></Show>
-        <Show when={currentView() === "matrix"}><MatrixView /></Show>
-        <Show when={currentView() === "settings"}><SettingsView /></Show>
+        <Suspense fallback={<div class="flex items-center justify-center h-full"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div></div>}>
+          <Show when={currentView() === "critical"}><CriticalView /></Show>
+          <Show when={currentView() === "urgency"}><UrgencyView /></Show>
+          <Show when={currentView() === "priority"}><PriorityView /></Show>
+          <Show when={currentView() === "matrix"}><MatrixView /></Show>
+          <Show when={currentView() === "settings"}><SettingsView /></Show>
+        </Suspense>
       </Layout>
     </Show>
   );