Skip to content

Commit

Permalink
loading stuff
Browse files Browse the repository at this point in the history
  • Loading branch information
@sebald
sebald committed Oct 31, 2023
1 parent c63b1ca commit 305d37b
Show file tree
Hide file tree
Showing 5 changed files with 103 additions and 29 deletions.
15 changes: 3 additions & 12 deletions app/(stats)/composition/[id]/loading.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
19 changes: 19 additions & 0 deletions app/(stats)/compositions/[[...range]]/loading.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
29 changes: 18 additions & 11 deletions app/(stats)/compositions/[[...range]]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 {
Expand All @@ -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 (
<>
Expand Down Expand Up @@ -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>
</>
);
};
Expand Down
13 changes: 7 additions & 6 deletions lib/db/db.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
});
Expand Down
56 changes: 56 additions & 0 deletions ui/skeleton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);

0 comments on commit 305d37b

Please sign in to comment.