Skeleton

จาก shadcn

บล็อกพื้นหลังกะพริบแทนเนื้อหาที่กำลังโหลด ลดความรู้สึกว่าหน้ากระตุกเมื่อข้อมูลจากเซิร์ฟเวอร์มาถึง

ติดตั้ง

Terminal

pnpm dlx shadcn@latest add @whereui/skeleton

ต้องผูก registry และติดตั้ง @whereui/theme นำหน้าเสมอเมื่อติดตั้งครั้งแรก

การใช้งาน

import { Skeleton } from "@/components/ui/skeleton"<Skeleton className="size-12 rounded-xl" /><Skeleton className="h-4 w-3/4" />

ข้อควรรู้

ปรับรูปทรงด้วย className เช่น rounded-full สำหรับรูปโปรไฟล์ size-12
จำลองโครงร่างหน้าจริง (รูป + บรรทัดข้อความ) จะดูเป็นธรรมชาติกว่าบล็อกเดี่ยว

ซอร์สโค้ด

components/ui/skeleton.tsx

import { cn } from "cn"function Skeleton({ className, ...props }: React.ComponentProps<"div">) {  return (    <div      data-slot="skeleton"      className={cn("animate-pulse rounded-md bg-muted", className)}      {...props}    />  )}export { Skeleton }