Elgato_dark/taxonomy
1
0
Fork 0
mirror of https://github.com/shadcn-ui/taxonomy synced 2026-05-24 09:48:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: implement loading for editor pages

Browse source
This commit is contained in:
shadcn 2022-11-03 20:15:27 +04:00
parent 84cc459562
commit d4bed71bd8
4 changed files with 41 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
app/(editor)/editor/[postId]/loading.tsx Normal file
View file

@ -0,0 +1,18 @@
import { Skeleton } from "@/components/ui/skeleton"
export default function Loading() {
return (
<div className="grid w-full gap-10">
<div className="flex w-full items-center justify-between">
<Skeleton className="h-[38px] w-[90px]" />
<Skeleton className="h-[38px] w-[80px]" />
</div>
<div className="prose prose-stone mx-auto w-[800px] space-y-6">
<Skeleton className="h-[50px] w-full" />
<Skeleton className="h-[20px] w-2/3" />
<Skeleton className="h-[20px] w-full" />
<Skeleton className="h-[20px] w-full" />
</div>
</div>
)
}

7
components/post-item.tsx
View file

@ -1,8 +1,9 @@
import { formatDate } from "@/lib/utils"
import { Post } from "@prisma/client"
import Link from "next/link"
import { formatDate } from "@/lib/utils"
import { PostOperations } from "@/components/post-operations"
import { Skeleton } from "@/components/ui/skeleton"
interface PostItemProps {
post: Pick<Post, "id" | "title" | "published" | "createdAt">
@ -34,8 +35,8 @@ PostItem.Skeleton = function PostItemSkeleton() {
return (
<div className="p-4">
<div className="space-y-3">
<div className="h-5 w-2/5 animate-pulse rounded-lg bg-slate-100"></div>
<div className="h-4 w-4/5 animate-pulse rounded-lg bg-slate-100"></div>
<Skeleton className="h-5 w-2/5" />
<Skeleton className="h-4 w-4/5" />
</div>
</div>
)

7
components/ui/card.tsx
View file

@ -1,4 +1,5 @@
import { cn } from "@/lib/utils"
import { Skeleton } from "@/components/ui/skeleton"
interface CardProps extends React.HTMLAttributes<HTMLDivElement> {}
@ -54,12 +55,12 @@ Card.Skeleton = function CardSeleton() {
return (
<Card>
<Card.Header className="gap-2">
<div className="h-5 w-1/5 animate-pulse rounded-lg bg-slate-100"></div>
<div className="h-4 w-4/5 animate-pulse rounded-lg bg-slate-100"></div>
<Skeleton className="h-5 w-1/5" />
<Skeleton className="h-4 w-4/5" />
</Card.Header>
<Card.Content className="h-10" />
<Card.Footer>
<div className="h-8 w-[120px] animate-pulse rounded-lg bg-slate-200"></div>
<Skeleton className="h-8 w-[120px] bg-slate-200" />
</Card.Footer>
</Card>
)

15
components/ui/skeleton.tsx Normal file
View file

@ -0,0 +1,15 @@
import { cn } from "@/lib/utils"
interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {}
export function Skeleton({ className, ...props }: SkeletonProps) {
return (
<div
className={cn(
"h-5 w-2/5 animate-pulse rounded-lg bg-slate-100",
className
)}
{...props}
/>
)
}