Suspense doesn't work in layout with css modules (DEV-only)

We have a tricky case in an example.

waku/examples/09_cssmodules/src/components/Layout.tsx

Lines 6 to 20 in 3b87654

    
           const Layout = ({ children }: { children: ReactNode }) => { 
        
             return ( 
        
               <div> 
        
                 {children} 
        
                 <Suspense fallback="Pending..."> 
        
                   <ServerMessage /> 
        
                 </Suspense> 
        
               </div> 
        
             ); 
        
           }; 
        
           const ServerMessage = async () => { 
        
             await new Promise((resolve) => setTimeout(resolve, 2000)); 
        
             return <p>Hello from server!</p>; 
        
           };

It should show "Pending..." and then "Hello from server!".
However, it doesn't work as expected.

It seems like a regression in #446.
This is a dev-only issue.
@Aslemammad Can you investigate it please?

Here is a screencast that works before #446 commit.

Screen.Recording.2024-03-31.at.16.28.35.mov

I'll take a look.

The example is moved from 09_cssmodules to 12_css in #641.

working on it.

	const Layout = ({ children }: { children: ReactNode }) => {
	return (
	<div>
	{children}
	<Suspense fallback="Pending...">
	<ServerMessage />
	</Suspense>
	</div>
	);
	};

	const ServerMessage = async () => {
	await new Promise((resolve) => setTimeout(resolve, 2000));
	return <p>Hello from server!</p>;
	};