Show dashboard loading state from landing page

[x0ba]

Stack Context

This PR improves the perceived loading experience when entering the dashboard from the landing page.

What?

• Keep landing-page dashboard links external for SvelteKit prerender crawling.
• Intercept ordinary clicks and use SvelteKit goto('/runs') so the root dot matrix route loader appears while /runs loads.
• Add a boot-matching dot matrix variant and use it for root route transitions.
• Apply the behavior to the nav, hero CTA, and footer dashboard links.

Why?

The links previously opted out of SvelteKit navigation with rel="external", so users stayed on the landing page with only the browser spinner while the dashboard loaded. Removing rel="external" entirely made the prerender crawler follow /runs, which fails during Vercel prerender because it is an authenticated app route. This keeps prerender behavior safe while still giving users the client-side loading state on normal clicks.

The root route-transition loader also now matches the first-load landing page loader, using the same 5x5 pulse grid, dark background, amber dot color, timing, and reduced-motion behavior.

Test plan

• bun run check
• bun run lint
• bunx vite build
• bun run build:vercel could not complete locally because drizzle-kit push --force failed before Vite started; bunx vite build verifies the SvelteKit build/prerender phase that failed in Vercel.
• Manual browser click-through not run because no dev server was already listening, and project instructions say not to run dev without approval.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
flightlog	Ready	Preview, Comment	May 29, 2026 7:38pm

[x0ba]

• Show dashboard loading state from landing page #49 👈 (View in Graphite)
• staging

This stack of pull requests is managed by Graphite. Learn more about stacking.

[greptile-apps]

Greptile Summary

This PR improves perceived load time when navigating from the landing page to the dashboard by intercepting plain left-clicks and using SvelteKit's goto() to trigger the client-side navigation overlay, while keeping rel="external" on the anchor elements so the prerender crawler continues to skip /runs.

• +page.svelte: Adds openDashboard() which calls event.preventDefault() + goto(dashboardPath) for unmodified left-clicks only; modifier-key and non-left-button clicks fall through so browser behaviors like "open in new tab" remain intact.
• dotmatrix-loader.svelte: Adds a new boot variant — a lightweight 5×5 CSS dot-grid with staggered animation delays and a fixed dark background (#100f12) suited to the marketing page's palette; prefers-reduced-motion is respected.
• route-navigation-loader.svelte: Swaps the root-scope cross-context overlay from variant=\"page\" to variant=\"boot\" to display the new loader during landing-to-dashboard transitions.

Confidence Score: 5/5

Safe to merge — the change is additive, scoped to the marketing landing page and a new loader variant, and introduces no side effects on authenticated routes.

The click-intercept logic is correct: modifier-key and non-left-button clicks fall through to native behavior, rel=external is preserved on all three anchors so prerender continues to skip /runs, and goto() is only invoked in the browser via an event handler. The new boot variant is self-contained CSS with no shared state, and prefers-reduced-motion is handled. No auth logic, data paths, or existing routes are affected.

No files require special attention.

Important Files Changed

Filename	Overview
src/routes/(marketing)/+page.svelte	Adds openDashboard click interceptor that triggers goto() for plain left-clicks while preserving rel="external" for prerender safety; modifier-key and non-left clicks correctly fall through to native behavior.
src/lib/components/dotmatrix-loader.svelte	Introduces a new boot variant — a standalone 5×5 CSS-animated dot grid with staggered delays and a dark hardcoded background, distinct from the existing page variant; prefers-reduced-motion is handled correctly.
src/lib/components/route-navigation-loader.svelte	Single-line change swapping the root-scope overlay from variant="page" to variant="boot" to show the new landing-page-themed loader during cross-context navigations.

Sequence Diagram

sequenceDiagram
    participant User
    participant LandingPage as Landing Page (+page.svelte)
    participant RouteLoader as RouteNavigationLoader (root scope)
    participant SvelteKit as SvelteKit goto()
    participant Dashboard as /runs (Dashboard)

    User->>LandingPage: clicks Dashboard link (left-click, no modifier)
    LandingPage->>LandingPage: openDashboard() intercepts click
    LandingPage->>LandingPage: event.preventDefault()
    LandingPage->>SvelteKit: goto(dashboardPath)
    SvelteKit->>RouteLoader: "navigating.to set → active = true"
    RouteLoader->>User: Shows full-screen boot-dmx loader
    SvelteKit->>Dashboard: Fetches /runs route
    Dashboard-->>SvelteKit: Route loaded
    SvelteKit->>RouteLoader: "navigating.to cleared → active = false"
    RouteLoader->>User: Loader hidden, dashboard renders

    Note over LandingPage: Modifier-key or non-left clicks bypass preventDefault
    Note over LandingPage: rel=external kept so prerender skips /runs

Loading

_{Reviews (3): Last reviewed commit: "Show dashboard loading state from landin..." | Re-trigger Greptile}