Files
supabase/apps/studio/pages/_document.tsx
Monica Khoury 1b5a806963 fix: show support contact message if Studio fails to load (FE-4460) (#50872)
## 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 -->
2026-09-28 18:21:34 +03:00

28 lines
728 B
TypeScript

import Document, { DocumentContext, Head, Html, Main, NextScript } from 'next/document'
import { BootTimeoutFallback } from '@/components/ui/BootTimeoutFallback/BootTimeoutFallback'
import { inter, manrope, sourceCodePro } from '@/fonts'
class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const initialProps = await Document.getInitialProps(ctx)
return initialProps
}
render() {
return (
<Html lang="en">
<Head />
<body className={`${inter.variable} ${manrope.variable} ${sourceCodePro.variable}`}>
<BootTimeoutFallback />
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument