Chapter 9 - stream 2nd component (exercise)

app/dashboard/(overview)/page.tsx

@@ -2,12 +2,11 @@ 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 { fetchLatestInvoices, fetchCardData} from "@/app/lib/data";
+import { fetchCardData} from "@/app/lib/data";
 import { Suspense } from 'react';
-import { RevenueChartSkeleton } from '@/app/ui/skeletons';
+import {LatestInvoicesSkeleton, RevenueChartSkeleton} from '@/app/ui/skeletons';
 export default async function Page() {
 
-    const latestInvoices = await fetchLatestInvoices();
 
     const {
         numberOfInvoices,
@@ -34,7 +33,9 @@ export default async function Page() {
                 <Suspense fallback={<RevenueChartSkeleton />}>
                     <RevenueChart />
                 </Suspense>
-                <LatestInvoices latestInvoices={latestInvoices} />
+                <Suspense fallback={<LatestInvoicesSkeleton />}>
+                    <LatestInvoices />
+                </Suspense>
             </div>
         </main>
     );

app/ui/dashboard/latest-invoices.tsx

@@ -3,12 +3,11 @@ import clsx from 'clsx';
 import Image from 'next/image';
 import { lusitana } from '@/app/ui/fonts';
 import { LatestInvoice } from '@/app/lib/definitions';
-export default async function LatestInvoices({
-  latestInvoices,
-}: {
-  latestInvoices: LatestInvoice[];
-}) {
-  return (
+import {fetchLatestInvoices} from "@/app/lib/data";
+export default async function LatestInvoices() {
+    const latestInvoices = await fetchLatestInvoices();
+
+    return (
     <div className="flex w-full flex-col md:col-span-4">
       <h2 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
         Latest Invoices