Next.js Discord

Discord Forum

2 suspenses in same page

Unanswered
Wirehaired Vizsla posted this in #help-forum
Open in Discord
Wirehaired VizslaOP
Hi, I have 2 Suspense components in the same component

<Suspense fallback={<>Loading1</>}>
  <ComponentA />
</Suspense>

Component A contains the categories, and when I click, I put the selected category into the query string.

<Suspense key={qString.category} fallback={<>Loading2</>}>
  <ComponentB />
</Suspense>

that's the component
<div>
  <Suspense fallback={<>Loading1</>}>
    <ComponentA />
  </Suspense>
  
  <Suspense key={qString.category} fallback={<>Loading2</>}>
    <ComponentB />
  </Suspense>
</div>

The problem is that when I do router.push, the second Suspense does not show the loading fallback. I tested, and it only works if both Suspense components have the key set with that query string; otherwise, it doesn’t.

1 Reply

Wirehaired VizslaOP
both components have await in them