From 305d37b9d4a18f3c4ad7c0d1b7189564d42014b5 Mon Sep 17 00:00:00 2001
From: Sebastian Sebald <sebastian.sebald@gmail.com>
Date: Tue, 31 Oct 2023 14:01:00 +0100
Subject: [PATCH] loading stuff

---
 app/(stats)/composition/[id]/loading.tsx      | 15 +----
 .../compositions/[[...range]]/loading.tsx     | 19 +++++++
 .../compositions/[[...range]]/page.tsx        | 29 ++++++----
 lib/db/db.ts                                  | 13 +++--
 ui/skeleton.tsx                               | 56 +++++++++++++++++++
 5 files changed, 103 insertions(+), 29 deletions(-)
 create mode 100644 app/(stats)/compositions/[[...range]]/loading.tsx

diff --git a/app/(stats)/composition/[id]/loading.tsx b/app/(stats)/composition/[id]/loading.tsx
index 09cce41f..6ae7020f 100644
--- a/app/(stats)/composition/[id]/loading.tsx
+++ b/app/(stats)/composition/[id]/loading.tsx
@@ -2,21 +2,12 @@ import { Skeleton, HeadlineSkeleton, CardChartSkeleton } from '@/ui';
 
 export const Loading = () => (
   <Skeleton>
-    <HeadlineSkeleton className="mt-8 h-14 w-72" />
-    <div className="flex items-center gap-4">
-      <HeadlineSkeleton className="mt-2 h-4 w-44" />{' '}
-      <HeadlineSkeleton className="mt-2 h-4 w-24" />{' '}
-      <HeadlineSkeleton className="mt-2 h-4 w-36" />
-    </div>
-    <div className="mb-4 mt-8 flex justify-end gap-4">
-      <HeadlineSkeleton className="h-8 w-12" />
-      <HeadlineSkeleton className="h-8 w-44" />
-    </div>
     <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
       <CardChartSkeleton />
       <CardChartSkeleton />
-      <CardChartSkeleton />
-      <CardChartSkeleton />
+      <div className="col-span-full">
+        <CardChartSkeleton />
+      </div>
     </div>
   </Skeleton>
 );
diff --git a/app/(stats)/compositions/[[...range]]/loading.tsx b/app/(stats)/compositions/[[...range]]/loading.tsx
new file mode 100644
index 00000000..af34d7ab
--- /dev/null
+++ b/app/(stats)/compositions/[[...range]]/loading.tsx
@@ -0,0 +1,19 @@
+import { Skeleton, HeadlineSkeleton, CardTableSkeleton } from '@/ui';
+
+export const Loading = () => (
+  <Skeleton>
+    <HeadlineSkeleton className="mt-8 h-14 w-72" />
+    <div className="flex items-center gap-4">
+      <HeadlineSkeleton className="mt-2 h-4 w-44" />{' '}
+      <HeadlineSkeleton className="mt-2 h-4 w-24" />{' '}
+      <HeadlineSkeleton className="mt-2 h-4 w-36" />
+    </div>
+    <div className="mb-4 mt-8 flex justify-end gap-4">
+      <HeadlineSkeleton className="h-8 w-12" />
+      <HeadlineSkeleton className="h-8 w-44" />
+    </div>
+    <CardTableSkeleton />
+  </Skeleton>
+);
+
+export default Loading;
diff --git a/app/(stats)/compositions/[[...range]]/page.tsx b/app/(stats)/compositions/[[...range]]/page.tsx
index 3c85a779..50e260d8 100644
--- a/app/(stats)/compositions/[[...range]]/page.tsx
+++ b/app/(stats)/compositions/[[...range]]/page.tsx
@@ -7,7 +7,7 @@ import { getTournamentsCount } from '@/lib/db/tournaments';
 import { formatDate, fromDate, toDate, today } from '@/lib/utils/date.utils';
 import { fromDateRange } from '@/lib/utils/url.utils';
 
-import { Caption, Inline, Title } from '@/ui';
+import { Caption, CardTableSkeleton, Inline, Title } from '@/ui';
 import { Calendar, Rocket, Trophy } from '@/ui/icons';
 
 import { StatsHint } from '@/ui/stats/stats-hint';
@@ -63,6 +63,13 @@ const getStats = async (from: Date, to: Date | undefined) => {
   };
 };
 
+// Content (wrapped for suspense)
+// ---------------
+const Content = async ({ from, to }: { from: Date; to?: Date }) => {
+  const { stats } = await getStats(from, to);
+  return <Compositions data={stats.composition} />;
+};
+
 // Props
 // ---------------
 interface PageProps {
@@ -83,7 +90,7 @@ const CompositionsPage = async ({ params }: PageProps) => {
   const from = fromDate(range ? range.from : pointsUpdateDate);
   const to = range && range.to ? fromDate(range.to) : undefined;
 
-  const { stats, meta } = await getStats(from, to);
+  const { meta } = await getStats(from, to);
 
   return (
     <>
@@ -113,16 +120,16 @@ const CompositionsPage = async ({ params }: PageProps) => {
         <FactionFilter />
         <SortParam />
       </Inline>
-      <Suspense fallback={<div>loading...</div>}>
-        <div className="grid grid-cols-1 gap-4 md:grid-cols-12">
-          <div className="col-span-full">
-            <Compositions data={stats.composition} />
-          </div>
-          <div className="col-span-full pt-8 lg:col-start-2 lg:col-end-12">
-            <StatsHint />
-          </div>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-12">
+        <div className="col-span-full">
+          <Suspense fallback={<CardTableSkeleton />}>
+            <Content to={to} from={from} />
+          </Suspense>
         </div>
-      </Suspense>
+        <div className="col-span-full pt-8 lg:col-start-2 lg:col-end-12">
+          <StatsHint />
+        </div>
+      </div>
     </>
   );
 };
diff --git a/lib/db/db.ts b/lib/db/db.ts
index 952adcdd..e1a2dd4f 100644
--- a/lib/db/db.ts
+++ b/lib/db/db.ts
@@ -45,12 +45,13 @@ export interface Database {
 // ---------------
 export const db = new Kysely<Database>({
   dialect: new MysqlDialect({
-    pool: createPool({
-      host: process.env.DATABASE_HOST,
-      user: process.env.DATABASE_USERNAME,
-      password: process.env.DATABASE_PASSWORD,
-      database: 'main',
-    }),
+    pool: async () =>
+      createPool({
+        host: process.env.DATABASE_HOST,
+        user: process.env.DATABASE_USERNAME,
+        password: process.env.DATABASE_PASSWORD,
+        database: 'main',
+      }),
   }),
   // log: ['query', 'error'],
 });
diff --git a/ui/skeleton.tsx b/ui/skeleton.tsx
index c90f90b2..2612ff45 100644
--- a/ui/skeleton.tsx
+++ b/ui/skeleton.tsx
@@ -104,3 +104,59 @@ export const CardChartSkeleton = () => (
     </Card.Footer>
   </Card>
 );
+
+// Loading: Chart with Card
+// ---------------
+const Row = ({ className }: { className?: string }) => (
+  <>
+    <div className="col-span-1 py-1">
+      <LineSkeleton className={`h-3 rounded ${className}`} />
+    </div>
+    <div className="col-span-4 py-1">
+      <LineSkeleton className={`h-3 rounded ${className}`} />
+    </div>
+    <div className="col-span-3 py-1">
+      <LineSkeleton className={`h-3 rounded ${className}`} />
+    </div>
+    <div className="col-span-2 py-1">
+      <LineSkeleton className={`h-3 rounded ${className}`} />
+    </div>
+    <div className="col-span-3 py-1">
+      <LineSkeleton className={`h-3 rounded ${className}`} />
+    </div>
+    <div className="col-span-3 py-1">
+      <LineSkeleton className={`h-3 rounded ${className}`} />
+    </div>
+    <div className="col-span-3 py-1">
+      <LineSkeleton className={`h-3 rounded ${className}`} />
+    </div>
+    <div className="col-span-3 py-1">
+      <LineSkeleton className={`h-3 rounded ${className}`} />
+    </div>
+    <div className="col-span-2 py-1">
+      <LineSkeleton className={`h-3 rounded ${className}`} />
+    </div>
+  </>
+);
+
+export const RowDivider = () => (
+  <div className="col-span-full w-full border-t border-secondary-50" />
+);
+
+export const CardTableSkeleton = () => (
+  <Card role="status" className="animate-pulse p-4" elevation="light">
+    <div className="grid grid-cols-[repeat(24,_minmax(0,_1fr))] gap-4">
+      <Row className="bg-primary-200" />
+      <RowDivider />
+      <Row />
+      <RowDivider />
+      <Row />
+      <RowDivider />
+      <Row />
+      <RowDivider />
+      <Row />
+      <RowDivider />
+      <Row />
+    </div>
+  </Card>
+);