Loading.tsx not working when using <Link> to its own page in Nextjs14

Question

I am using nextjs 14.2.7, the root page is a server component that get a ticket from a server action

import { random } from "lodash";
import Link from "next/link";

const getTicket = () => new Promise<number>((r) => {
  const ret = random(1, 10000);
  setTimeout(() => r(ret), 2000)
})
export default async function Home() {

  const newTicket = await getTicket(); // Get a new ticket from server action

  return (
    <>
      <h1>Your new ticket is: {newTicket}</h1>
      <Link href={`/?q=${newTicket}`}>Get a new ticket</Link>
    </>
  );
}

This is loading page

export default async function Loading() {
    return (
        <h1 className="loader">
            LOADING...
        </h1>
    )
}

The loading page can display when clicking refresh button in the browser. But not working when clicking the link 'Get a new ticket', the page is blocked for 2 seconds until the new ticket generated.

Did I misunderstand the usage of loading page? Are there any special configurations or coding considerations for this case? Thanks!

Answer 1

Your Loading component won't load automatically, you can use Suspense and pass it as fallback so that it displays until newTicket resolves.

import { random } from "lodash";
import Link from "next/link";
import { Loading } from "<proper path>";
import { Suspense } from "react";

const getTicket = () => new Promise<number>((r) => {
  const ret = random(1, 10000);
  setTimeout(() => r(ret), 2000)
})
export default async function Home() {

  const newTicket = await getTicket(); // Get a new ticket from server action

  return (
    <>
    <Suspense fallback={<Loading />}>
      <h1>Your new ticket is: {newTicket}</h1>
      <Link href={`/?q=${newTicket}`}>Get a new ticket</Link>
    </>
  );
}