Prevent layout shift while Spline Sans loads

[skyfallwastaken]

Summary of the problem

After restoring the signed-in dashboard's eager SSR path, a smaller layout shift remained during hydration. Spline Sans was imported by the Inertia JavaScript entrypoint, so the browser initially laid out the SSR HTML with its substantially wider system fallback. When Spline Sans loaded, the GitHub banner changed from three lines to two and moved the already-rendered dashboard upward by 24px.

Cold Playwright runs measured CLS of 0.0335 from this font swap. Blocking the Spline Sans request eliminated the shift, confirming the cause was font metrics rather than deferred dashboard data or hydration markup.

Describe your changes

• Load Spline Sans through the render-blocking application stylesheet instead of the Inertia client and SSR JavaScript entries.
• Add a metric-adjusted local fallback for Arial, Liberation Sans, and DejaVu Sans so cold text layout closely matches Spline Sans before the webfont arrives.
• Keep the final Spline Sans rendering unchanged.

On three cache-isolated Playwright runs through the Amp Portal, measured CLS fell from 0.0335 to 0.00098 (about a 97% reduction). The eager dashboard remained present in raw SSR with zero skeletons and no dashboard_stats partial request.

Validated with:

• docker compose exec -T web bun run check
• targeted Prettier checks for all changed CSS and TypeScript files
• docker compose exec -T web bin/vite build --force
• docker compose exec -T web bin/vite build --ssr --force
• Playwright with JavaScript disabled and enabled for both eager rollup and genuinely deferred dashboard URLs

Screenshots / Media

N/A — the final rendering is unchanged; this prevents movement while the existing font loads.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[greptile-apps]

Greptile Summary

This PR changes how Spline Sans is loaded to reduce font-swap layout shift. The main changes are:

• Moves the Spline Sans import into the render-blocking application stylesheet.
• Adds a metric-adjusted local fallback font to the global font stack.
• Removes the font import from the client and SSR Inertia entrypoints.

Confidence Score: 5/5

Safe to merge with minimal risk.

The changes are narrowly scoped to font loading and global CSS fallback behavior, and the client and SSR Inertia entrypoints remain aligned.

No files require special attention.

T-Rex Logs

What T-Rex did

• Compared the before/after font-loading changes to verify the migration from old inertia.ts/ssr.ts imports to a CSS-based font-face setup in application.css.
• Validated the isolated CSS build, confirming Vite emitted the spline-sans font files and the application CSS bundle.
• Inspected the compiled CSS to confirm @font-face rules for Spline Sans Variable, the local fallback, and the final body/html font stack.
• Noted that UI capture could not be produced because Rails could not boot in the sandbox, with blocker evidence captured in the Rails start attempt log.

_{Ran code and verified through T-Rex}

Important Files Changed

Filename	Overview
app/assets/tailwind/main.css	Adds a metric-adjusted local fallback font into the global font stack to reduce font-swap layout shift.
app/javascript/entrypoints/application.css	Moves the Spline Sans fontsource import into the application stylesheet so it loads with render-blocking CSS.
app/javascript/entrypoints/inertia.ts	Removes the Spline Sans import from the client Inertia entrypoint without changing page resolution or prefetch behavior.
app/javascript/ssr/ssr.ts	Removes the Spline Sans import from the SSR entrypoint while keeping SSR/client component resolution aligned.

Sequence Diagram

sequenceDiagram
  participant Browser
  participant CSS as application.css
  participant Tailwind as main.css
  participant JS as Inertia/SSR entries
  Browser->>CSS: request render-blocking stylesheet
  CSS->>CSS: "import @fontsource-variable/spline-sans"
  CSS->>Tailwind: import app Tailwind styles
  Tailwind-->>Browser: font stack includes Spline Sans Fallback
  Browser->>JS: load and hydrate Inertia app
  JS-->>Browser: resolve pages and layouts without font imports

Loading

_{Reviews (1): Last reviewed commit: "Prevent layout shift while the app font ..." | Re-trigger Greptile}