3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-04-29 10:16:32 +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
Show stats 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,
PageHeader,
} from "@/app/components/page-layout";
import { Skeleton } from "@/components/skeleton";
import { Skeleton, SkeletonCard } from "@/components/skeleton";
export default function Loading() {
return (
@ -13,10 +13,10 @@ export default function Loading() {
</PageHeader>
<PageContent>
<div className="max-w-4xl mx-auto space-y-6">
<Skeleton className="h-72 w-full" />
<Skeleton className="h-96 w-full" />
<SkeletonCard className="h-72 w-full" />
<SkeletonCard className="h-96 w-full" />
<hr />
<Skeleton className="h-64 w-full" />
<SkeletonCard className="h-64 w-full" />
</div>
</PageContent>
</PageContainer>

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

@ -3,20 +3,21 @@ import {
PageContent,
PageHeader,
} from "@/app/components/page-layout";
import { Skeleton } from "@/components/skeleton";
import { Skeleton, SkeletonCard } from "@/components/skeleton";
export default function Loading() {
return (
<PageContainer>
<PageHeader>
<Skeleton className="w-32 h-9" />
<PageHeader className="flex items-center gap-x-4">
<Skeleton className="w-9 h-9" />
<Skeleton className="w-48 h-5" />
</PageHeader>
<PageContent>
<div className="max-w-4xl mx-auto space-y-6">
<Skeleton className="h-72 w-full" />
<Skeleton className="h-96 w-full" />
<SkeletonCard className="h-72 w-full" />
<SkeletonCard className="h-96 w-full" />
<hr />
<Skeleton className="h-64 w-full" />
<SkeletonCard className="h-64 w-full" />
</div>
</PageContent>
</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 { PropsWithClassName } from "@/types";
export const Skeleton = (props: PropsWithClassName) => {
export const Skeleton = (props: {
className?: string;
children?: React.ReactNode;
}) => {
return (
<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}
</div>
);
};
export function SkeletonCard({
children,
className,
}: {
children?: React.ReactNode;
className?: string;
}) {
return (
<div className={cn("rounded-md bg-white shadow-sm", className)}>
{children}
</div>
);
}