Improved initial load time

This commit is contained in:
2026-01-30 16:52:44 -06:00
parent f2a75c954f
commit b075f4b4f7
6 changed files with 70 additions and 34 deletions
+5
View File
@@ -30,6 +30,7 @@
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.19",
"@types/bun": "latest",
"@types/node": "^24.10.1",
"typescript": "~5.9.3",
"vite": "^7.2.4",
@@ -498,6 +499,8 @@
"@types/babel__traverse": ["@types/babel__traverse@7.28.0", "", { "dependencies": { "@babel/types": "^7.28.2" } }, "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q=="],
"@types/bun": ["@types/bun@1.3.8", "", { "dependencies": { "bun-types": "1.3.8" } }, "sha512-3LvWJ2q5GerAXYxO2mffLTqOzEu5qnhEAlh48Vnu8WQfnmSwbgagjGZV6BoHKJztENYEDn6QmVd949W4uESRJA=="],
"@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],
"@types/linkify-it": ["@types/linkify-it@5.0.0", "", {}, "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q=="],
@@ -556,6 +559,8 @@
"buffer-from": ["buffer-from@1.1.2", "", {}, "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="],
"bun-types": ["bun-types@1.3.8", "", { "dependencies": { "@types/node": "*" } }, "sha512-fL99nxdOWvV4LqjmC+8Q9kW3M4QTtTR1eePs94v5ctGqU8OeceWrSUaRw3JYb7tU3FkMIAjkueehrHPPPGKi5Q=="],
"call-bind": ["call-bind@1.0.8", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.0", "es-define-property": "^1.0.0", "get-intrinsic": "^1.2.4", "set-function-length": "^1.2.2" } }, "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww=="],
"call-bind-apply-helpers": ["call-bind-apply-helpers@1.0.2", "", { "dependencies": { "es-errors": "^1.3.0", "function-bind": "^1.1.2" } }, "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ=="],
+13 -10
View File
@@ -1,13 +1,16 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>tasgrid</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/index.tsx"></script>
</body>
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>tasgrid</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/index.tsx"></script>
</body>
</html>
+4 -2
View File
@@ -37,6 +37,8 @@
"@types/node": "^24.10.1",
"typescript": "~5.9.3",
"vite": "^7.2.4",
"vite-plugin-solid": "^2.11.10"
}
"vite-plugin-solid": "^2.11.10",
"@types/bun": "latest"
},
"module": "src/index.tsx"
}
+24 -11
View File
@@ -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>
);
+22 -9
View File
@@ -1,9 +1,10 @@
import { type Component, type JSX, createSignal, Show } from "solid-js";
import { type Component, type JSX, createSignal, Show, lazy, Suspense, onMount } from "solid-js";
import { Sidebar, BottomNav } from "./Navigation";
import { QuickEntry } from "./QuickEntry";
import { TaskDetail } from "./TaskDetail";
import { store, activeTaskId, setActiveTaskId } from "@/store";
import { PanelLeftOpen } from "lucide-solid";
const TaskDetail = lazy(() => import("./TaskDetail").then(m => ({ default: m.TaskDetail })));
const QuickEntry = lazy(() => import("./QuickEntry").then(m => ({ default: m.QuickEntry })));
import { Button } from "./ui/button";
import { cn } from "@/lib/utils";
@@ -17,6 +18,14 @@ export const Layout: Component<LayoutProps> = (props) => {
const [isSidebarLocked, setIsSidebarLocked] = createSignal(true);
const [isSidebarPeeking, setIsSidebarPeeking] = createSignal(false);
onMount(() => {
// Preload TaskDetail and QuickEntry in background
setTimeout(() => {
import("./TaskDetail");
import("./QuickEntry");
}, 500);
});
// Derived active task for the detail view
const activeTask = () => store.tasks.find(t => t.id === activeTaskId());
@@ -58,14 +67,18 @@ export const Layout: Component<LayoutProps> = (props) => {
<BottomNav currentView={props.currentView} setView={props.setView} />
</div>
<QuickEntry />
<Suspense>
<QuickEntry />
</Suspense>
<Show when={activeTask()}>
<TaskDetail
task={activeTask()!}
isOpen={!!activeTaskId()}
onClose={() => setActiveTaskId(null)}
/>
<Suspense>
<TaskDetail
task={activeTask()!}
isOpen={!!activeTaskId()}
onClose={() => setActiveTaskId(null)}
/>
</Suspense>
</Show>
</div>
);
+1 -1
View File
@@ -183,7 +183,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
const taskId = props.task.id;
removeTask(taskId);
props.onClose();
toast.info("Task moved to trash", {
toast.info("Task moved to trash. Find inside Settings.", {
action: {
label: "Undo",
onClick: () => restoreTask(taskId)