3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-07-27 05:07:50 +02:00
Code Issues Projects Releases Packages Wiki Activity

💄 Improvements to page skeletons

Browse source
This commit is contained in:
Luke Vella 2024-01-13 19:12:02 +07:00
parent 0a2e3e3532
commit 33057397b0
3 changed files with 31 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

8
apps/web/src/app/[locale]/invite/[urlId]/loading.tsx
View file

@ -3,7 +3,7 @@ import {
PageContent, PageContent,
PageHeader, PageHeader,
} from "@/app/components/page-layout"; } from "@/app/components/page-layout";
import { Skeleton } from "@/components/skeleton"; import { Skeleton, SkeletonCard } from "@/components/skeleton";
export default function Loading() { export default function Loading() {
return ( return (
@ -13,10 +13,10 @@ export default function Loading() {
</PageHeader> </PageHeader>
<PageContent> <PageContent>
<div className="max-w-4xl mx-auto space-y-6"> <div className="max-w-4xl mx-auto space-y-6">
<Skeleton className="h-72 w-full" /> <SkeletonCard className="h-72 w-full" />
<Skeleton className="h-96 w-full" /> <SkeletonCard className="h-96 w-full" />
<hr /> <hr />
<Skeleton className="h-64 w-full" /> <SkeletonCard className="h-64 w-full" />
</div> </div>
</PageContent> </PageContent>
</PageContainer> </PageContainer>

13
apps/web/src/app/[locale]/poll/[urlId]/skeleton.tsx
View file

@ -3,20 +3,21 @@ import {
PageContent, PageContent,
PageHeader, PageHeader,
} from "@/app/components/page-layout"; } from "@/app/components/page-layout";
import { Skeleton } from "@/components/skeleton"; import { Skeleton, SkeletonCard } from "@/components/skeleton";
export default function Loading() { export default function Loading() {
return ( return (
<PageContainer> <PageContainer>
<PageHeader> <PageHeader className="flex items-center gap-x-4">
<Skeleton className="w-32 h-9" /> <Skeleton className="w-9 h-9" />
<Skeleton className="w-48 h-5" />
</PageHeader> </PageHeader>
<PageContent> <PageContent>
<div className="max-w-4xl mx-auto space-y-6"> <div className="max-w-4xl mx-auto space-y-6">
<Skeleton className="h-72 w-full" /> <SkeletonCard className="h-72 w-full" />
<Skeleton className="h-96 w-full" /> <SkeletonCard className="h-96 w-full" />
<hr /> <hr />
<Skeleton className="h-64 w-full" /> <SkeletonCard className="h-64 w-full" />
</div> </div>
</PageContent> </PageContent>
</PageContainer> </PageContainer>

25
apps/web/src/components/skeleton.tsx
View file

@ -1,14 +1,29 @@
import clsx from "clsx"; import { cn } from "@rallly/ui";
import React from "react"; import React from "react";
import { PropsWithClassName } from "@/types"; export const Skeleton = (props: {
className?: string;
export const Skeleton = (props: PropsWithClassName) => { children?: React.ReactNode;
}) => {
return ( return (
<div <div
className={clsx("animate-pulse rounded-md bg-gray-200", props.className)} className={cn("animate-pulse rounded-md bg-gray-200", props.className)}
> >
{props.children} {props.children}
</div> </div>
); );
}; };
export function SkeletonCard({
children,
className,
}: {
children?: React.ReactNode;
className?: string;
}) {
return (
<div className={cn("rounded-md bg-white shadow-sm", className)}>
{children}
</div>
);
}