Why wont my Suspense trigger?

[J4v4Scr1pt]

Summary

I have a dashboard page with four parallel routes. In one pf them I want to change a list of items based on a searchParam.
I have a dropdown and use Nuqs to trigger non-shallow param change. This trigger my page to re-render.

No here is the tricky part, I want the loading.tsx to happen on initial load, then on searchParam changes trigger change to the list.

This is what I got so far.

The page:

import { ActivitesInitial } from './types';
import { Card, CardBody, CardHeader } from '@nextui-org/card';
import { Header } from './_Components/Header';
import { GET } from '@/utils/Api';
import { SkeletonActivites } from './_Components/SkeletonActivites ';
import Activity from './_Components/Activity/Activity';
import {  Suspense } from 'react';
import Await from './_Components/await';

export default async function ActivitiesPage({
	searchParams,
}: {
	searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}) {
	const selectedReGroup = (await searchParams).selectedReGroup;
	const activitiesResponse = GET<ActivitesInitial >(
		`api/activities?selectedGroup=${selectedReGroup}`
	);
	return (
			<Card shadow="none">
				<CardHeader className="flex items-center justify-between">
					<Header activitiesResponse={activitiesResponse } /> // use the use hook in the clientComponent
				</CardHeader>
				<CardBody className="flex flex-col gap-4">
					<Suspense fallback={<SkeletonActivites />}>
						<Await promise={activitiesResponse}>
							{(activitiesResponse) => (
								<>
									{activitiesResponse?.activities?.map((activity, index) => (
										<Activity
											key={activity.ActivityId + index}
											activity={activity}
										/>
									))}
								</>
							)}
						</Await>
					</Suspense>
				</CardBody>
			</Card>
	);
}

The Await component:

export default async function Await<T>({
	promise,
	children,
}: {
	promise: Promise<T>;
	children: (value: T) => React.ReactNode;
}) {
	const data = await promise;

	return children(data);
}

I have tried a lot of things, adding a Fragment around the whole Card with the key prop to trigger re-render.
If I inspect with the React extension for Chrome I can see the key updating AFTER the fetch is done.

My initial thought was that any fetch would trigger the Loading.tsx file but that never happens, that's why I tested with this Await component to trigger suspense inside of the page.

Any ideas?

Additional information

No response

Example

No response

[icyJoseph]

Put a key in the Suspense boundary. You can search the issues/discussions, there is a good one explaining why loading doesn't re-trigger, and in general, Suspense boundaries, and the solution is to make them new instances, by giving them a new key.

[icyJoseph]

• Suspense only shows its fallback once (on page load), when async component suspends, the Suspense wrapper doesn't fall back. All components working however #50563
• Support params and searchParams props for the loading file of a route #58179 (comment)
• Updating search params does not trigger suspense fallback or loading.tsx #53543 (comment) -> best one IMO

[J4v4Scr1pt]

King Icy fast with response as always! 👑
Thx for the suggestion 🙌, but forgot to mention this in previous post, I have also tried that. It did not work.
It's like the whole parallel route freeze until done, the key on the suspense don't change until the fetch is done.

I can try later/tomorrow to make an stackblitz or something to reproduce it to easier show whats wrong. Should have done that from start 😅

[J4v4Scr1pt]

We can close this with your answer Icy.
There something fishy in my app. Because the CodeSandbox I created works as excepted. I have done the exact same thing as in this example.
But after some iteration I realized I needed more data and infinite scroll behavior, ended up using useInfiniteQuery from Tanstack instead.