Suspense not working in layout.tsx? #44385
Replies: 2 comments 3 replies
-
|
Hey,
|
Beta Was this translation helpful? Give feedback.
-
|
Hello @ciruz |
Beta Was this translation helpful? Give feedback.
-
|
Hey @whydea , I am using next js app router, i am doing the same thing like i have a layout.tsx (server component) where i am fetching some data, in same folder i have loading.tsx, but loading.tsx content never shows. |
Beta Was this translation helpful? Give feedback.
-
|
I have the same issue, Suspense is not working in |
Beta Was this translation helpful? Give feedback.
-
Suspense not working in layout.tsx?
Example:
import { Orbitron } from '@next/font/google';
import { getConfigInstitution } from '../services/configInstitution';
import { loadConfigTheme } from '../utils/themeUtils';
import { Suspense } from 'react';
const orbitron = Orbitron({
weight: ['400', '700'],
style: ['normal']
async function getInitialConfig() {
const configRes = await getConfigInstitution();
const themeRes = loadConfigTheme(configRes);
return {
config: configRes,
theme: themeRes
export default async function RootLayout({
children,
children: React.ReactNode
const { config, theme } = await getInitialConfig()
return(
Using the same example on any page the suspense works, but not on Layout files.
I look for the initial settings in the layout file because I share it in a context so I don't have to look for them on each page.
The problem is not related to the ThemeProvider, as I've tried using Suspense only with {children} and it doesn't work either.
Is there any other strategy to show loading feedback to user on initial load?
Beta Was this translation helpful? Give feedback.
All reactions