Page goes blank when I add useContent, no error in console
Adding useContent to our React app (old CRA setup) makes the componet tree render nothing while content loads. No error in the console, the page is just blank for a moment and then everything appears. Component looks like this:
import {useContent} from '@croct/plug-react';
export function HomeHero() { const content = useContent('home-hero');
return <Hero title={content.title} subtitle={content.subtitle} />;}Provider is set up correctly, content does arrive. Why does React render nothing in the meantime?
1 answer
That blank moment is React Suspense doing its default thing. useContent suspends the component while fetching, and if there is no <Suspense> boundary above it with a fallback, React has nothing to show, so it renders nothing until the fetch resolves. No error because nothing failed.
Wrap the component in a boundary:
import {Suspense} from 'react';
<Suspense fallback={<HeroSkeleton />}> <HomeHero /></Suspense>Alternatively, pass an initial value to the hook so there is something to render immediately and no suspension happens at all:
const content = useContent('home-hero', { initial: {title: 'Welcome', subtitle: 'Default subtitle'},});Skeleton via Suspense or real default content via initial, whichever fits the design better.
Went with the initial value, blank screen gone. Thanks!