## Summary
- Adds a fallback message ("Taking longer than expected?... contact
support@supabase.io") shown after 7s if Studio fails to fully load, for
the Next.js runtime — mirrors the existing TanStack-only
`ShellFallback`, which had no Next.js equivalent
- Fixes the support email in the existing TanStack `ShellFallback` (was
`support@supabase.com`, should be `support@supabase.io`)
- Extracts the shared copy (message, email, delay) into one file so both
fallbacks stay in sync
## Why
Linear FE-4460: users reported the Dashboard going completely blank with
no way to reach support when a JS chunk failed to load. The Next.js
runtime (the current default) had no fallback at all for this case.
## Test plan
- [ ] Normal page load: fallback never appears
- [ ] Simulated stuck boot (mount signal disabled): fallback appears
after 7s with correct copy/email, no layout bugs
- [ ] Same two checks on the TanStack runtime
(`STUDIO_FRAMEWORK=tanstack`)
- [ ] `pnpm --filter studio run typecheck` / `lint:ratchet` pass
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a loading fallback that appears if the app takes too long to
load, with guidance to clear browser cookies and reload.
* On self-hosted platforms, the fallback includes a support contact
link.
* The fallback is automatically hidden once the app loads.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
The prerendered TanStack SPA shell (`_shell.html`) had a visually empty
body, so every cold load showed a blank page until the JS bundle
downloaded and hydrated. This bakes proper fallback states into the
shell as static HTML — none of them rely on JS executing.
**Added:**
- `ShellFallback` component, rendered as the `ClientOnly` fallback
around the root `<Outlet />` — during the shell prerender it serializes
into `_shell.html`, and on the client it unmounts the moment the app
mounts (no hydration mismatch: `ClientOnly` renders the fallback on the
server and first client render)
- Animated `LogoLoader` (Supabase logo outline) centered on screen — the
stroke-dash animation is pure CSS so it runs before any JS executes
- Stuck-load help text that fades in after 7s via CSS `animation-delay`
(clear cookies / reload, contact support@supabase.com — the support
email is gated behind `IS_PLATFORM` so self-hosted builds don't get it)
- `noscript` message for JS-disabled browsers, which also hides the
loader so users don't see an infinite spinner (uses
`dangerouslySetInnerHTML` so React hydration never diffs noscript
children)
- `data-nosnippet` on both text blocks so Google doesn't surface the
boilerplate as the search snippet for dashboard URLs (the one shell
serves every route)
## To test
All on the Vercel preview:
- Open the preview — on a cold load you should catch the animated logo
loader before the app mounts (throttle to "Slow 4G" in devtools if it
flashes by too fast), and it never reappears on client-side navigation
- In devtools, block the JS bundle (Network tab → right-click the
`/assets/index-*.js` request → Block request URL) and reload — the
loader animates on its own, and the help text (clear cookies / contact
support) fades in after ~7s
- Disable JavaScript (devtools command palette → "Disable JavaScript")
and reload — no spinner, just the "requires JavaScript" message
- View page source (or `curl` any preview URL) — the body contains the
logo SVG, the help text, and the noscript block, all with
`data-nosnippet` on the text
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a client-aware loading shell for Studio during initialization.
* Shows a branded loader with a help message that appears after a short
delay.
* Includes platform-specific support contact details when available.
* **Bug Fixes**
* Prevents partial or incomplete content from rendering before the app
is ready.
* Improves consistency for no-JavaScript fallback rendering to avoid
hydration mismatches.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Monica Khoury