continue loading improve

src/App.tsx

@@ -26,14 +26,15 @@ const App: Component = () => {
 
     onCleanup(() => removeListener());
 
-    // Background preload of other views
-    setTimeout(() => {
+    // Background preload of other views when idle
+    const idleCallback = (window as any).requestIdleCallback || ((cb: any) => setTimeout(cb, 1000));
+    idleCallback(() => {
       // CriticalView is now static
       import('./views/UrgencyView');
       import('./views/PriorityView');
       import('./views/MatrixView');
       import('./views/SettingsView');
-    }, 100);
+    });
   });
 
   return (

src/components/Layout.tsx

@@ -19,11 +19,13 @@ export const Layout: Component<LayoutProps> = (props) => {
     const [isSidebarPeeking, setIsSidebarPeeking] = createSignal(false);
 
     onMount(() => {
-        // Preload TaskDetail and QuickEntry in background
-        setTimeout(() => {
+        // Preload heavy components in background when idle
+        const idleCallback = (window as any).requestIdleCallback || ((cb: any) => setTimeout(cb, 2000));
+        idleCallback(() => {
             import("./TaskDetail");
             import("./QuickEntry");
-        }, 500);
+            import("./TaskEditor");
+        });
     });
 
     // Derived active task for the detail view

src/components/TaskDetail.tsx

@@ -1,12 +1,14 @@
 import { type Component, createEffect, createSignal } from "solid-js";
 import { Sheet, SheetContent } from "@/components/ui/sheet";
 import { type Task, removeTask, restoreTask, updateTask } from "@/store";
-import { TaskEditor } from "@/components/TaskEditor";
 import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";
 import { ArrowUpCircle, Clock, Calendar, Type, Trash2 } from "lucide-solid";
 import { calculateDateFromUrgency, calculateUrgencyFromDate } from "@/store";
 import { Button } from "./ui/button";
 import { toast } from "solid-sonner";
+import { lazy, Suspense } from "solid-js";
+
+const TaskEditor = lazy(() => import("./TaskEditor").then(m => ({ default: m.TaskEditor })));
 
 interface TaskDetailProps {
     task: Task;
@@ -101,10 +103,10 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
                             <span class="text-[10px] uppercase font-bold tracking-wider text-muted-foreground/70 hidden sm:inline">Priority</span>
                             <Select
                                 value={props.task.priority.toString()}
-                                onChange={(val) => val && updatePriority(val)}
+                                onChange={(val: string | null) => val && updatePriority(val)}
                                 options={["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]}
                                 placeholder="Priority"
-                                itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
+                                itemComponent={(props: any) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
                             >
                                 <SelectTrigger class="h-8 min-w-[40px] bg-transparent border-transparent hover:bg-muted/50 px-1 sm:px-2 shadow-none focus:ring-0 shrink-0">
                                     <div class="flex items-center gap-1 sm:gap-1.5 text-foreground font-medium">
@@ -121,10 +123,10 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
                             <span class="text-[10px] uppercase font-bold tracking-wider text-muted-foreground/70 hidden sm:inline">Time</span>
                             <Select
                                 value={currentUrgency()}
-                                onChange={(val) => val && updateUrgency(val)}
+                                onChange={(val: string | null) => val && updateUrgency(val)}
                                 options={["10", "9", "8", "7", "6", "5", "4", "3", "2", "1"]}
                                 placeholder="Urgency"
-                                itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
+                                itemComponent={(props: any) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
                             >
                                 <SelectTrigger class="h-8 min-w-[40px] bg-transparent border-transparent hover:bg-muted/50 px-1 sm:px-2 shadow-none focus:ring-0 shrink-0">
                                     <div class="flex items-center gap-1 sm:gap-1.5 text-foreground font-medium">
@@ -201,11 +203,13 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
 
                 {/* Editor Content */}
                 <div class="flex-1 overflow-y-auto px-6 py-4 pb-20">
-                    <TaskEditor
-                        content={props.task.content}
-                        onUpdate={updateTaskContent}
-                        onEditorReady={setEditorInstance}
-                    />
+                    <Suspense fallback={<div class="h-32 animate-pulse bg-muted/20 rounded-lg" />}>
+                        <TaskEditor
+                            content={props.task.content}
+                            onUpdate={updateTaskContent}
+                            onEditorReady={setEditorInstance}
+                        />
+                    </Suspense>
                 </div>
             </SheetContent>
         </Sheet>