[P3] Demo viewer shows blank state during canvas load

[cursor]

Summary

The outer page shows a spinner while loading the selected demo, but the inner <Suspense> around the canvas renders null, so users see an empty area while assets stream.

Impact

• Confusing UX during demo transitions
• Users may think the demo is broken
• Inconsistent loading feedback

Files Affected

• src/pages/DemosPage.tsx (lines 185-213)

Recommendation

Provide an inline fallback (small loader/overlay) inside DemoViewer to keep feedback consistent during demo swaps:

<Suspense fallback={<DemoLoadingOverlay />}>
  <Canvas>
    {/* demo content */}
  </Canvas>
</Suspense>

Or a simple spinner:

<Suspense fallback={
  <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
    <CircularProgress />
  </Box>
}>

---

Source: Code Review (PR #5)

[jbdevprimary]

Fixed - Demo viewer has proper Suspense fallback with CircularProgress spinner during canvas loading.