Fixing Blank Dashboard Content During Navigation — ERR-03
Fixing Blank Dashboard Content During Navigation — ERR-03
Version: v0.1.101
What Was the Problem?
Prior to this release, the dashboard had no route-level loading boundaries. While individual client-side pages managed their own loading state internally via useState, Next.js server-side navigation had no structured fallback.
The result: when a user navigated to /dashboard, /dashboard/people, /dashboard/matches, or /dashboard/billing, the layout chrome (navigation sidebar, header) would render immediately — but the main content area stayed blank until all server-side data finished resolving. On slow connections or large data sets, this produced a visually broken experience with no indication that anything was loading.
What Changed
This fix introduces loading.tsx files in the key route segments of the dashboard:
src/app/dashboard/loading.tsx
src/app/dashboard/people/loading.tsx
src/app/dashboard/matches/loading.tsx
src/app/dashboard/billing/loading.tsx
Next.js automatically treats any loading.tsx file as a Suspense boundary for its route segment. The file's exported component is shown immediately while the segment's data is being fetched, then replaced by the real content once it is ready.
Each loading.tsx renders either a skeleton UI that mirrors the shape of the page's content, or a centred spinner — providing a clear, immediate signal that navigation is in progress.
Why This Also Enables Streaming
Because these route segments now have Suspense boundaries, React can stream server component output to the browser incrementally. Parts of the page that are ready early can appear before slower data dependencies resolve, rather than the entire segment being held back by the slowest fetch.
Affected Routes
| Route | File |
|---|---|
| Dashboard root | src/app/dashboard/loading.tsx |
| People screening | src/app/dashboard/people/loading.tsx |
| Matches review | src/app/dashboard/matches/loading.tsx |
| Billing | src/app/dashboard/billing/loading.tsx |
No Action Required
This change is transparent to users — loading states appear automatically during navigation. No configuration or code changes are needed by operators deploying this update.