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" />
-                <Card title="Pending" value={totalPendingInvoices} type="pending" />
-                <Card title="Total Invoices" value={numberOfInvoices} type="invoices" />
-                <Card
-                  title="Total Customers"
-                  value={numberOfCustomers}
-                  type="customers"
-                />
+                <Suspense fallback={<CardsSkeleton />}>
+                    <CardWrapper />
+                </Suspense>
             </div>
             <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
                 <Suspense fallback={<RevenueChartSkeleton />}>