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!
Hit this today on an old CRA app and this thread nailed it. Adding a data point: we went with the Suspense boundary rather than the initial value, mainly because we wanted a proper skeleton, and it dropped straight into the loading UI we already had. Either way the key realization is that the blank screen is a missing boundary, not a Croct error. The absence of any console message is exactly why it took us a while to spot.