alright

sebald · Nov 8, 2023 · 34aa9d5 · 34aa9d5
1 parent 26551f8
commit 34aa9d5
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 5 deletions.
diff --git a/app/(stats)/analyze/content.tsx b/app/(stats)/analyze/content.tsx
@@ -65,9 +65,16 @@ const create = setup<StatsData>([
   upgrade,
 ]);
 
+// Props
+// ---------------
+export interface ContentProps {
+  from: Date;
+  to?: Date;
+}
+
 // Component
 // ---------------
-export const Content = async ({ from, to }: { from: Date; to?: Date }) => {
+const AsyncContent = async ({ from, to }: ContentProps) => {
   const [squads, tournaments, count] = await Promise.all([
     getSquads({ from, to }),
     getTournamentsCount({ from, to }),
@@ -80,7 +87,7 @@ export const Content = async ({ from, to }: { from: Date; to?: Date }) => {
   });
 
   return (
-    <Suspense fallback={<Loading />}>
+    <>
       <div className="grid grid-cols-1 gap-4 md:grid-cols-12">
         <div className="md:col-span-6">
           <FactionDistribution value={stats.faction} total={count.all} />
@@ -119,6 +126,12 @@ export const Content = async ({ from, to }: { from: Date; to?: Date }) => {
           <StatsHint />
         </div>
       </div>
-    </Suspense>
+    </>
   );
 };
+
+export const Content = (props: ContentProps) => (
+  <Suspense fallback={<Loading />}>
+    <AsyncContent {...props} />
+  </Suspense>
+);
diff --git a/app/(stats)/analyze/page.tsx b/app/(stats)/analyze/page.tsx
@@ -1,12 +1,13 @@
 import { createMetadata } from '@/lib/metadata';
 import { toDateRange } from '@/lib/utils/params.utils';
 
-import { Caption, Message, Title } from '@/ui';
+import { Caption, CardChartSkeleton, Message, Title } from '@/ui';
 import { Filter } from '@/ui/params/filter';
 import { DateRangeFilter } from '@/ui/params/date-range-filter';
 import { StatsInfo } from '@/ui/stats/stats-info';
 
 import { Content } from './content';
+import { Suspense } from 'react';
 
 // Metadata
 // ---------------
@@ -15,6 +16,17 @@ export const metadata = createMetadata({
   description: 'Analyze the current X-Wing meta!',
 });
 
+// Helpers
+// ---------------
+const Loading = () => (
+  <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+    <CardChartSkeleton />
+    <CardChartSkeleton />
+    <CardChartSkeleton />
+    <CardChartSkeleton />
+  </div>
+);
+
 // Props
 // ---------------
 interface AnalyzePageProps {
@@ -53,7 +65,9 @@ const AnalyzePage = async ({ searchParams }: AnalyzePageProps) => {
       <Filter>
         <DateRangeFilter />
       </Filter>
-      <Content from={from} to={to} />
+      <Suspense fallback={<Loading />}>
+        <Content from={from} to={to} />
+      </Suspense>
     </>
   );
 };