Help

[issasalazar91]

Summary

I have a route like:

export default async function PromptListPage() {
  const prompts: PromptListItem[] = await fetchPromptsFromDB();
  return (
    <main>
      ...
      <div>
        <PromptList prompts={prompts} />
      </div>
    </main>
  );
}

I also have a loading.tsx under the same sub-directory. when I create a new prompt I call revalidatePath("/prompts/list"). The issue is when transitioning back to the /prompts/list route it doesn't show the loading.tsx skeleton and just hangs until the data is re-fetched.

This issue only occurs when I use a static route, a dynamic route correctly shows loading.tsx. The issue is that a dynamic route will re-fetch the data every time I transition to it, but I shouldn't need to do this until I explicitly invalidate the route. Any help is appreciated.

Additional information

No response

Example

No response

[DanielSalazarLoaiza]

This happens because static routes are pre-rendered and cached, so loading.tsx only appears during client-side transitions when data fetching is pending.

In your case, after calling revalidatePath("/prompts/list"), the new static asset is generated in the background, and the router doesn’t trigger a suspense boundary — hence no loading.tsx appears.

To fix it, you can:

Use a dynamic fetch (fetch(..., { cache: 'no-store' })) or export const dynamic = 'force-dynamic' to ensure a proper loading boundary.

Alternatively, wrap your list component in a boundary manually to force the skeleton render during revalidation transitions.

Static routes don’t automatically re-trigger loading.tsx after revalidatePath, since the cache update happens server-side, not via a client navigation event.

[issasalazar91]

Thanks 👍