Chapter 9 - group cards to stream them at once

app/dashboard/(overview)/page.tsx

@@ -4,7 +4,8 @@ import LatestInvoices from '@/app/ui/dashboard/latest-invoices';
 import { lusitana } from '@/app/ui/fonts';
 import { fetchCardData} from "@/app/lib/data";
 import { Suspense } from 'react';
-import {LatestInvoicesSkeleton, RevenueChartSkeleton} from '@/app/ui/skeletons';
+import {CardsSkeleton, LatestInvoicesSkeleton, RevenueChartSkeleton} from '@/app/ui/skeletons';
+import CardWrapper from '@/app/ui/dashboard/cards';
 export default async function Page() {
 
 
@@ -20,14 +21,9 @@ export default async function Page() {
                 Dashboard
             </h1>
             <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
-                <Card title="Collected" value={totalPaidInvoices} type="collected" />
+                <Suspense fallback={<CardsSkeleton />}>
-                <Card title="Pending" value={totalPendingInvoices} type="pending" />
+                    <CardWrapper />
-                <Card title="Total Invoices" value={numberOfInvoices} type="invoices" />
+                </Suspense>
-                <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">
                 <Suspense fallback={<RevenueChartSkeleton />}>

app/ui/dashboard/cards.tsx

@@ -5,6 +5,7 @@ import {
   InboxIcon,
 } from '@heroicons/react/24/outline';
 import { lusitana } from '@/app/ui/fonts';
+import {fetchCardData} from "@/app/lib/data";
 
 const iconMap = {
   collected: BanknotesIcon,
@@ -14,18 +15,22 @@ const iconMap = {
 };
 
 export default async function CardWrapper() {
+  const {
+    numberOfInvoices,
+    numberOfCustomers,
+    totalPaidInvoices,
+    totalPendingInvoices,
+  } = await fetchCardData();
   return (
     <>
-      {/* NOTE: comment in this code when you get to this point in the course */}
+       <Card title="Collected" value={totalPaidInvoices} type="collected" />
-
-      {/* <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"
-      /> */}
+      />
     </>
   );
 }