add suspense boundary

src/app/[locale]/layout.tsx

@@ -3,14 +3,15 @@ import '@mantine/core/styles.css'
 import { type Metadata } from 'next'
 
 import { TRPCReactProvider } from '~/trpc/react'
-import { ColorSchemeScript } from '@mantine/core'
+import { ColorSchemeScript, Loader } from '@mantine/core'
 import { MantineProvider } from '~/app/_styles/MantineProvider'
 import { I18nProvider } from '~/app/_providers/I18nProvider'
 import { initTranslations, namespaces } from '~/app/i18n'
 import { Navbar } from '~/app/_components/Navbar'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { Analytics } from '@vercel/analytics/react'
 import { SpeedInsights } from '@vercel/speed-insights/next'
+import { Suspense } from 'react'
 
 export const generateStaticParams = async () => ['en', 'es', 'fr'].map((locale) => ({ locale }))
 export async function generateMetadata({ params }: RootLayoutProps): Promise<Metadata> {
@@ -39,7 +40,7 @@ export default async function RootLayout({ children, params: { locale } }: RootL
 					<I18nProvider namespaces={namespaces} locale={locale} resources={resources}>
 						<TRPCReactProvider>
 							<Navbar />
-							{children}
+							<Suspense fallback={<Loader />}>{children}</Suspense>
 							<ReactQueryDevtools buttonPosition='bottom-left' />
 						</TRPCReactProvider>
 					</I18nProvider>