reactjs - Ako znova spustiť načítavacie používateľské rozhranie v Next 13 pomocou nového adresára app?


Pracujem s adresárom app v Next 13 na vytvorenie jednoduchej webovej stránky. Trasa k mojej hlavnej stránke je /{username}?year={year}&month={month}. Pri navigácii na stránku hlavná sekcia tejto stránky spustí načítavacie UI z súboru loading.tsx, pretože sa vykonáva API požiadavka. Na stránke mám selektor, ktorý umožňuje používateľovi zmeniť rok a mesiac. Po zmene týchto hodnôt je používateľ presmerovaný na rovnakú stránku, ale s aktualizovanými dátumovými hodnotami: /{username}?year={updatedYear}&month={updatedMonth}. Po navigácii sa načítavacie UI už nezobrazuje.

Moja stránka je serverová súčasť a pozostáva z:

const year = searchParams.year;
const month = searchParams.month;

const userData = await getUserInfo(params.username);

return (
<main>
 ...
<Suspense fallback={<Loading />}>
  <GameList {...{
    username: params.username,
    year,
    month,
    }} />
</Suspense>
</main>
);

Môj komponent <GameList /> je tiež serverový komponent a je definovaný takto:

const games = await getUserGames(username, year, month);

return (
 <some game data />
);

Skúšal som Link z Next, aby som presmeroval používateľa na stránku s aktualizovanými dotazmi, kde som ho použil takto:

<Link href={`/${username}?year=${year}&month=${month}`}>component</Link>

Tiež som skúšal použiť useRouter z next/navigation s jeho funkciami push a replace:

router.replace(`/${username}?year=${year}&month=${month}`);

Skúšal som všetky rôzne stratégie cachovania pre moje volania fetch, a stále to nič nezmenilo. Ako môžem dosiahnuť, aby sa moja komponenta <GameList /> opäť dostala do stavu Načítavania, keď sa zmení dátum (keď vykoná nový API request na naplnenie novými dátami)?

Vstupný bod na stránku: GitHub repozitár.