I've been pulling my hair our over this issue for the last 3 days. In short, I cannot get loading.tsx to work with ISR using generateStaticParams, and dynamic params.

Even when I try to simulate a large delay, the loading indicator never appears, and it makes the user wait the full 10 seconds before showing anything. I've read, and re-read the docs, and cannot seem to figure out what I'm missing.

Would love some expert help on this. Thank you guys!

Reproduction Repo: https://github.com/adamghowiba/next-loading-bug

For example:

import Link from 'next/link';

export const dynamicParams = true;
export const revalidate = 30;

export async function generateStaticParams() {
  return [];
}

const fakePromise = async () => {
  await new Promise(res => {
    setTimeout(() => {
      res('Success');
    }, 1000 * 10);
  });
};

export default async function DynamicLoading(params: { params: Promise<{ ticker: string }> }) {
  const { ticker } = await params.params;
  const lastLoad = new Date().toLocaleTimeString();

  await fakePromise();

  return (
    <div className=" gap-4 size-full grid place-content-center p-12">
      <div className="flex flex-col gap-2">
        <span className="text-base">
          Dynamic page: <b>{ticker}</b>
        </span>

        <div className="flex flex-col gap-1">
          <span>Last load time: {lastLoad}</span>
        </div>

        <Link href="/" prefetch={false}>
          Back Home
        </Link>
      </div>
    </div>
  );
}