Reduce layout shift (CLS) on reload via localStorage cache + skeleton placeholders #1

Problem

When reloading jss.live/git/?repo=<URL>, content arrives in waves:

1. Page paints with just the URL form + brand
2. Refs fetch completes → repo header + tabs render
3. Clone completes → file tree appears
4. README blob fetched → README renders
5. Sidebar stats populate

Each step causes layout shift (CLS). Visible churn for ~1–2 seconds on every reload.

Solution

Part 1 — localStorage cache (high impact)

Save last-rendered state per repo URL after a successful load:

localStorage.setItem(`jss-git:${repoUrl}`, JSON.stringify({
  refs, tree, readmeHtml, latestCommit, branch, commits, savedAt: Date.now(),
}));

On page load: if URL matches a cached entry, paint cached state immediately, then fetch fresh data in background. If fresh data differs, swap in (could even diff and only update changed regions, but full re-render is fine for v1).

This is the pattern GitHub uses for instant page loads on repeat visits.

Part 2 — skeleton placeholders (medium impact)

Even on first visit (no cache), reserve layout space upfront. Render the grid container, sidebar shell, tabs placeholder, and a gray-rectangle skeleton for the file list before data arrives. Eliminates the URL-form-only flash before content fills in.

.skeleton-row { background: #eaeef2; height: 2.5rem; border-radius: 4px; margin: 0.25rem 0; }
.skeleton-pulse { animation: pulse 1.5s infinite; }

Combined effect

Constraints

• Cache TTL: stay reasonable (24h?) to avoid stale state across long gaps
• Wipe cache on wipe: true LightningFS reinstantiation (already happens on each session)
• Storage budget: each repo state is ~10–50 KB JSON; localStorage 5MB limit handles many repos
• Sensitive content concern: localStorage is per-origin, low risk for public repo views; private repos via auth would need separate handling later

Acknowledgement

Layout-shift improvement was suggested by Michael Peters in chat following the v13 announcement. Patch matches GitHub's "instant load" pattern.