I made my SaaS dashboard load instantly — here's exactly how

#performance #tutorial #typescript #webdev

I just made my dashboard go from 2-3 second loading
spinner to instant. Here's the exact technique.

The problem: every time a user opened the dashboard,
they'd see a spinner while we fetched their plan,
repos, and docs from the API. Even on fast connections
it felt slow.

The solution: stale-while-revalidate with localStorage

Here's the pattern:

On load, check localStorage for cached data
If found, show it IMMEDIATELY (no spinner)
Always fetch fresh data in background
Update the UI silently when fresh data arrives

The user sees their data in milliseconds. If data
changed since last visit they see the update
a second later with zero disruption.

The cache utility (TypeScript):

\`typescript
interface CacheEntry {
data: T
timestamp: number
userId: string
version: string
}

export function getCached(
key: string,
userId: string,
ttlMs: number
): T | null {
try {
const raw = localStorage.getItem(`pushpen_\${key}) if (!raw) return null const entry: CacheEntry<T> = JSON.parse(raw) if (entry.userId !== userId) return null if (Date.now() - entry.timestamp > ttlMs) return null return entry.data } catch { return null } } \\

Usage in the dashboard:

\`typescript
async function fetchUserPlan(userId: string) {
// Show cached data instantly
const cached = getCached('user_plan', userId, 300000)
if (cached) {
setUserPlan(cached)
setLoading(false)
}

// Always fetch fresh in background
const res = await fetch('/api/user/plan')
const data = await res.json()
setUserPlan(data)
setCached('user_plan', userId, data)
}
`\

TTLs I use: