# Page goes blank when I add useContent, no error in console

Asked by Sofia L on 2024-03-18. Tags: react, suspense, setup.

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:

```tsx
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

### Accepted answer from Tobias Renner (2024-03-18)

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:

```tsx
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:

```tsx
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.

#### Reply from Sofia L (2024-03-19)

Went with the initial value, blank screen gone. Thanks!