# useContent suspends and blanks my whole page, how do I scope the Suspense boundary?

Asked by Priya Nair on 2026-08-23. Tags: react, suspense, usecontent.

I have a single `<Suspense>` boundary wrapping the whole page, and every
`useContent` call inside it suspends the entire view until all of the slots
resolve. So the static parts of the page, the header and the article body, sit
behind a placeholder while the slowest personalized slot is still fetching.

What I want is for only the personalized regions to show a placeholder while the
rest of the page paints immediately. How should I be placing the boundaries?

## 2 answers

### Accepted answer from Tobias Renner (2026-08-25)

That is expected: `useContent` suspends, and a single top-level boundary makes
the whole subtree wait on the slowest slot. The fix is to scope the boundary
down to each personalized region instead of the page.

```tsx
<Header />

<Suspense fallback={<HeroSkeleton />}>
    <PersonalizedHero />
</Suspense>

<ArticleBody />

<Suspense fallback={<RecsSkeleton />}>
    <RecommendedForYou />
</Suspense>
```

Now the header and article body paint right away, and each slot shows its own
placeholder only while that slot is fetching. Nothing else waits on it.

### Answer from helena.dev (2026-08-26)

Worth pairing that with a `fallback` on the `useContent` call itself. The
Suspense boundary handles the loading placeholder, but the fallback is what
renders when the fetch is slow or fails, so the region shows sensible content
instead of hanging.

```tsx
const content = useContent('home-hero', {
    fallback: {title: 'Welcome', subtitle: 'Discover what is new'},
});
```

#### Reply from Priya Nair (2026-08-26)

Scoping a boundary per region fixed the full-page blank, and I added the
fallbacks too. Both parts were what I needed, thank you.