2 suspenses in same page
Unanswered
Wirehaired Vizsla posted this in #help-forum
Wirehaired VizslaOP
Hi, I have 2 Suspense components in the same component
Component A contains the categories, and when I click, I put the selected category into the query string.
that's the component
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.
<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