In my Next.js project using version 14.2.7, the root page is a server component that retrieves a ticket from a server action.
import { uniqueRandom } from "lodash";
import Link from "next/link";
const getTicket = () => new Promise<number>((resolve) => {
const generatedTicket = uniqueRandom(1, 10000);
setTimeout(() => resolve(generatedTicket), 2000);
})
export default async function Home() {
const newTicket = await getTicket(); // Retrieves a new ticket from server action
return (
<>
<h1>Your new ticket number is: {newTicket}</h1>
<Link href={`/?q=${newTicket}`}>Get another ticket</Link>
</>
);
}
This represents the loading page:
export default async function Loading() {
return (
<h1 className="loader">
LOADING...
</h1>
)
}
The loading page displays when clicking the refresh button in the browser. However, it does not work when clicking the 'Get another ticket' link as the page gets blocked for 2 seconds until the new ticket is generated.
Have I misunderstood how to use the loading page? Are there any specific configurations or coding considerations needed in this case? Thank you!