next-loading-skeleton

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

When to Use

使用场景

Trigger this skill when:

Creating Next.js App Router pages with data fetching
User mentions "loading", "skeleton", "placeholder", "Suspense"
Building dashboards, tables, lists, or profile pages
Pages with slow API calls or database queries
Any layout that needs instant visual feedback

在以下场景中使用该技能：

构建带有数据获取功能的Next.js App Router页面
用户提到“loading”、“skeleton”、“placeholder”、“Suspense”
构建仪表板、表格、列表或个人资料页面
包含缓慢API调用或数据库查询的页面
任何需要即时视觉反馈的布局

Installation Reminder

安装提醒

Always install shadcn/ui skeleton first:

bash

npx shadcn@latest add skeleton

Install additional components as needed:

bash

npx shadcn@latest add card table avatar badge

请务必先安装shadcn/ui skeleton：

bash

npx shadcn@latest add skeleton

根据需要安装额外组件：

bash

npx shadcn@latest add card table avatar badge

Standard Patterns

标准模式

Basic Structure

基础结构

Create
```
loading.tsx
```
in same folder as
```
page.tsx
```
Export default function
```
Loading()
```
Import
```
{ Skeleton }
```
from "@/components/ui/skeleton"
Use
```
animate-pulse
```
on wrapper elements

在
```
page.tsx
```
所在的同一文件夹中创建
```
loading.tsx
```
导出默认函数
```
Loading()
```
从"@/components/ui/skeleton"导入
```
{ Skeleton }
```
在容器元素上使用
```
animate-pulse
```

Common Skeleton Patterns

常见Skeleton模式

tsx

// Text line
<Skeleton className="h-4 w-[250px] rounded-full" />

// Card
<Skeleton className="h-[125px] w-full rounded-lg" />

// Avatar
<Skeleton className="h-10 w-10 rounded-full" />

// Table row
<div className="flex gap-4">
  <Skeleton className="h-4 w-[100px]" />
  <Skeleton className="h-4 w-[200px]" />
  <Skeleton className="h-4 w-[150px]" />
</div>

tsx

// 文本行
<Skeleton className="h-4 w-[250px] rounded-full" />

// 卡片
<Skeleton className="h-[125px] w-full rounded-lg" />

// 头像
<Skeleton className="h-10 w-10 rounded-full" />

// 表格行
<div className="flex gap-4">
  <Skeleton className="h-4 w-[100px]" />
  <Skeleton className="h-4 w-[200px]" />
  <Skeleton className="h-4 w-[150px]" />
</div>

Generation via Script

通过脚本生成

For complex layouts, use the Python script to save tokens:

bash

python scripts/generate-loading.py "dashboard with 4 stat cards and recent users table"

The script outputs a complete

loading.tsx

string that matches your description.

对于复杂布局，使用Python脚本节省时间：

bash

python scripts/generate-loading.py "dashboard with 4 stat cards and recent users table"

该脚本会输出与您描述匹配的完整

loading.tsx

代码字符串。

Examples

示例

Simple Card List

简单卡片列表

tsx

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

export default function Loading() {
  return (
    <div className="space-y-4 animate-pulse">
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        {Array.from({ length: 4 }).map((_, i) => (
          <Skeleton key={i} className="h-[125px] w-full rounded-lg" />
        ))}
      </div>
      <div className="space-y-2">
        {Array.from({ length: 3 }).map((_, i) => (
          <Skeleton key={i} className="h-20 w-full rounded-lg" />
        ))}
      </div>
    </div>
  )
}

tsx

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

export default function Loading() {
  return (
    <div className="space-y-4 animate-pulse">
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        {Array.from({ length: 4 }).map((_, i) => (
          <Skeleton key={i} className="h-[125px] w-full rounded-lg" />
        ))}
      </div>
      <div className="space-y-2">
        {Array.from({ length: 3 }).map((_, i) => (
          <Skeleton key={i} className="h-20 w-full rounded-lg" />
        ))}
      </div>
    </div>
  )
}

Profile Page

个人资料页面

tsx

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

export default function Loading() {
  return (
    <div className="space-y-6 animate-pulse">
      <div className="flex items-center gap-4">
        <Skeleton className="h-20 w-20 rounded-full" />
        <div className="space-y-2">
          <Skeleton className="h-6 w-[200px]" />
          <Skeleton className="h-4 w-[150px]" />
        </div>
      </div>
      <div className="grid gap-4 md:grid-cols-2">
        <Skeleton className="h-[200px] w-full rounded-lg" />
        <Skeleton className="h-[200px] w-full rounded-lg" />
      </div>
    </div>
  )
}

tsx

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

export default function Loading() {
  return (
    <div className="space-y-6 animate-pulse">
      <div className="flex items-center gap-4">
        <Skeleton className="h-20 w-20 rounded-full" />
        <div className="space-y-2">
          <Skeleton className="h-6 w-[200px]" />
          <Skeleton className="h-4 w-[150px]" />
        </div>
      </div>
      <div className="grid gap-4 md:grid-cols-2">
        <Skeleton className="h-[200px] w-full rounded-lg" />
        <Skeleton className="h-[200px] w-full rounded-lg" />
      </div>
    </div>
  )
}

Table with Search

带搜索功能的表格

tsx

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

export default function Loading() {
  return (
    <div className="space-y-4 animate-pulse">
      <div className="flex gap-4">
        <Skeleton className="h-10 w-[300px]" />
        <Skeleton className="h-10 w-[100px]" />
      </div>
      <div className="space-y-2">
        {Array.from({ length: 8 }).map((_, i) => (
          <div key={i} className="flex gap-4">
            <Skeleton className="h-4 w-[100px]" />
            <Skeleton className="h-4 w-[200px]" />
            <Skeleton className="h-4 w-[150px]" />
            <Skeleton className="h-4 w-[100px]" />
          </div>
        ))}
      </div>
    </div>
  )
}

tsx

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

export default function Loading() {
  return (
    <div className="space-y-4 animate-pulse">
      <div className="flex gap-4">
        <Skeleton className="h-10 w-[300px]" />
        <Skeleton className="h-10 w-[100px]" />
      </div>
      <div className="space-y-2">
        {Array.from({ length: 8 }).map((_, i) => (
          <div key={i} className="flex gap-4">
            <Skeleton className="h-4 w-[100px]" />
            <Skeleton className="h-4 w-[200px]" />
            <Skeleton className="h-4 w-[150px]" />
            <Skeleton className="h-4 w-[100px]" />
          </div>
        ))}
      </div>
    </div>
  )
}

Key Principles

核心原则

Match real layout - Skeleton should mirror actual page structure
Use animate-pulse - Add to wrapper containers for smooth animation
Vary skeleton sizes - Different widths/heights for realistic feel
Keep it simple - Focus on main content areas, ignore minor details

匹配真实布局 - Skeleton应与实际页面结构一致
使用animate-pulse - 添加到容器元素以实现平滑动画
多样化Skeleton尺寸 - 不同的宽高以营造真实感
保持简洁 - 聚焦主要内容区域，忽略次要细节