Help on chapter 9 of the App Router course (loading.tsx)

[AlexisR81]

I'm starting to learn Next.JS for an entreprise project, so I'm doing the App Route course, and everything was going well until I got to chapter 9. In this chapter you have to make a loading page, I made a wait as in the course, so my dashboard page takes 3 seconds to load, but my loading page only displays for 0.5 sec and not 3 sec. Why isn't my loading page displayed for the whole loading time (3seconds)?
There is my page.tsx file :

import { Card } from '@/app/ui/dashboard/cards';
import RevenueChart from '@/app/ui/dashboard/revenue-chart';
import LatestInvoices from '@/app/ui/dashboard/latest-invoices';
import { lusitana } from '@/app/ui/fonts';
import { fetchRevenue, fetchLatestInvoices, fetchCardData } from '@/app/lib/data';

export default async function Page() {
    const revenue = await fetchRevenue();
    const latestInvoices = await fetchLatestInvoices();
    const {
      numberOfInvoices,
      numberOfCustomers,
      totalPaidInvoices,
      totalPendingInvoices,
    } = await fetchCardData();

  return (
    <main>
      <h1 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
        Dashboard
      </h1>
      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
        <Card title="Collected" value={totalPaidInvoices} type="collected" />
        <Card title="Pending" value={totalPendingInvoices} type="pending" /> 
        <Card title="Total Invoices" value={numberOfInvoices} type="invoices" /> 
        <Card
          title="Total Customers"
          value={numberOfCustomers}
          type="customers"
        />
      </div>
      <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
        <RevenueChart revenue={revenue}  /> 
        <LatestInvoices latestInvoices={latestInvoices} /> 
      </div>
    </main>
  );
}

There is my loading.tsx file :

console.log("Test Loading....")
export default function Loading() {
  return <div>Loading...</div>;
}   

And there is my fetchRevenue() function :

export async function fetchRevenue() {
  try {
    // Artificially delay a response for demo purposes.
    // Don't do this in production :)

    console.log('Fetching revenue data...');
    await new Promise((resolve) => setTimeout(resolve, 3000));

    const data = await sql<Revenue[]>`SELECT * FROM revenue`;

    console.log('Data fetch completed after 3 seconds.');

    return data;
  } catch (error) {
    console.error('Database Error:', error);
    throw new Error('Failed to fetch revenue data.');
  }
}

[icyJoseph]

Hi,

Any chance you should show a screen recording of what's happening? Maybe restart the server and try again.

[AlexisR81]

To make this video, I restarted the server, switched to private browsing to avoid cookie problems and went through the client page to reach the dashboard page.
As you can see, the first time my loading page was displayed very shortly before the dashboard page, and the second time it didn't appear.
I don't understand why this is happening because I've followed the course perfectly.
https://www.loom.com/share/d35e01700781491c9b9ed820ee1ae1e5?sid=6c37a675-c000-4614-b752-459fe6d0926d

[icyJoseph]

Could you also print or take a screenshot of your file structure?

[AlexisR81]

Yes, of course