هيكل تحميل

import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonDemo() {

الهيكل العظمي هو عنصر مؤقت نابض بالحياة يحتفظ بجزء من شكل واجهة المستخدم أثناء تحميل بياناتها. وهو عبارة عن div واحد — دون أي عنصر أساسي تحته — مع animate-pulse، وخلفية باهتة، والحدود السميكة الخاصة بـ«وصفة النيوبروتالية».

استخدمه عندما:

• البطاقات والقوائم — لتعكس التخطيط النهائي بحيث يظهر المحتوى دون أي تغيير.
• الصور الرمزية والوسائط — لحجز الدائرة أو مربع الصورة المصغرة قبل وصول الصورة.
• الجداول والنماذج — للحفاظ على الصفوف والحقول في مكانها أثناء عملية الاسترداد البطيئة.

التثبيت#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/skeleton.json
npx shadcn@latest add https://neobrutalism.com/r/base/skeleton.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/skeleton.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/skeleton.json
نسخ

import { cn } from "@/lib/utils"

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

export { Skeleton }

الاستخدام#

نسخimport { Skeleton } from "@/components/ui/skeleton"

نسخ<Skeleton className="h-[20px] w-[100px] rounded-full" />

أمثلة#

الصورة الرمزية#

import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonAvatar() {

البطاقة#

import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

نص#

import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonText() {

نموذج#

import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonForm() {

جدول#

import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonTable() {

RTL#

لتفعيل RTL في Neobrutalism، راجع دليل إعداد RTL.

"use client"

import * as React from "react"

إمكانية الوصول#

الهياكل العظمية هي عناصر زخرفية — قم بإخفائها عن التقنيات المساعدة باستخدام aria-hidden="true" حتى لا تقوم برامج قراءة الشاشة بالإعلان عن مربعات فارغة تومض. أشر إلى حالة التحميل نفسها بشكل منفصل: قم بتعيين aria-busy="true" على المنطقة قيد التحميل، أو قم بتحديث منطقة حية مخفية بصريًا ("جاري تحميل النتائج…") يتم مسحها عند ظهور المحتوى. بمجرد عرض المحتوى الفعلي، قم بإزالة الهياكل العظمية من DOM تمامًا.