cleanup

src/app/page.tsx

@@ -1,23 +1,19 @@
 import { UniqueUsersBarChart } from "@/components/Stats/UniqueUsersBarChart";
 import { TransactionRow } from "@/components/Transaction/TransactionRow";
-import {
-  getTransactions,
-  getTransactionsStats,
-  getTransactionsUniqueSendersByMonth,
-} from "@/db/transactions";
+import { getTransactions, getTransactionsStats } from "@/db/transactions";
 import { Card, Container, Heading, Separator, Text } from "@radix-ui/themes";
-import { Fragment } from "react";
+import { Fragment, Suspense } from "react";
 
 export const dynamic = "force-dynamic";
 // TODO
 // Cache the page for 60 seconds
 // export const revalidate = 60;
 
 export default async function HomePage() {
-  // TODO run in parallel to speed up the page load
-  const transactions = await getTransactions();
-  const stats = await getTransactionsStats();
-  const test = await getTransactionsUniqueSendersByMonth();
+  const [transactions, stats] = await Promise.all([
+    getTransactions(),
+    getTransactionsStats(),
+  ]);
 
   return (
     <Container size="2" className="px-4 pb-10 pt-5">
@@ -40,7 +36,9 @@ export default async function HomePage() {
         </Card>
       </div>
 
-      <UniqueUsersBarChart data={test} />
+      <Suspense>
+        <UniqueUsersBarChart />
+      </Suspense>
 
       <div className="mt-10">
         <Heading as="h2" size="3" color="gray">

src/components/Stats/UniqueUsersBarChart.tsx → src/components/Stats/UniqueUsersBarChart/UniqueUsersBarChartClient.tsx

@@ -18,7 +18,9 @@ interface UniqueUsersBarChartProps {
   }[];
 }
 
-export const UniqueUsersBarChart = ({ data }: UniqueUsersBarChartProps) => {
+export const UniqueUsersBarChartClient = ({
+  data,
+}: UniqueUsersBarChartProps) => {
   // To format we need to group by month
   const formattedData: {
     date: string;

src/components/Stats/UniqueUsersBarChart/index.tsx

@@ -0,0 +1,8 @@
+import { getTransactionsUniqueSendersByMonth } from "@/db/transactions";
+import { UniqueUsersBarChartClient } from "./UniqueUsersBarChartClient";
+
+export const UniqueUsersBarChart = async () => {
+  const stats = await getTransactionsUniqueSendersByMonth();
+
+  return <UniqueUsersBarChartClient data={stats} />;
+};