From 1824c019ab4f3648409097d8d0bb33814519bf96 Mon Sep 17 00:00:00 2001
From: Jakub Knetl <knetl.j@gmail.com>
Date: Tue, 2 Jan 2024 18:17:37 +0100
Subject: [PATCH] Chapter 9 - stream single component

---
 app/dashboard/(overview)/page.tsx  | 12 +++++++-----
 app/ui/dashboard/revenue-chart.tsx | 10 +++++-----
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/app/dashboard/(overview)/page.tsx b/app/dashboard/(overview)/page.tsx
index 587325f..91c49b3 100644
--- a/app/dashboard/(overview)/page.tsx
+++ b/app/dashboard/(overview)/page.tsx
@@ -2,11 +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 { fetchRevenue, fetchLatestInvoices, fetchCardData} from "@/app/lib/data";
-
+import { fetchLatestInvoices, fetchCardData} from "@/app/lib/data";
+import { Suspense } from 'react';
+import { RevenueChartSkeleton } from '@/app/ui/skeletons';
 export default async function Page() {
 
-    const revenue = await fetchRevenue();
     const latestInvoices = await fetchLatestInvoices();
 
     const {
@@ -31,8 +31,10 @@ export default async function Page() {
                 />
             </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} />
+                <Suspense fallback={<RevenueChartSkeleton />}>
+                    <RevenueChart />
+                </Suspense>
+                <LatestInvoices latestInvoices={latestInvoices} />
             </div>
         </main>
     );
diff --git a/app/ui/dashboard/revenue-chart.tsx b/app/ui/dashboard/revenue-chart.tsx
index 1a189f7..05ef888 100644
--- a/app/ui/dashboard/revenue-chart.tsx
+++ b/app/ui/dashboard/revenue-chart.tsx
@@ -3,17 +3,17 @@ import { CalendarIcon } from '@heroicons/react/24/outline';
 import { lusitana } from '@/app/ui/fonts';
 import { Revenue } from '@/app/lib/definitions';
 
+import { fetchRevenue } from '@/app/lib/data';
+
 // This component is representational only.
 // For data visualization UI, check out:
 // https://www.tremor.so/
 // https://www.chartjs.org/
 // https://airbnb.io/visx/
 
-export default async function RevenueChart({
-  revenue,
-}: {
-  revenue: Revenue[];
-}) {
+
+export default async function RevenueChart() { // Make component async, remove the props
+    const revenue = await fetchRevenue(); // Fetch data inside the component
   const chartHeight = 350;
   // NOTE: comment in this code when you get to this point in the course