Directory Skeleton

Скелетоны загрузки персонализации — детали навыка/коннектора, колонка списка и результаты поиска.

Заглушки загрузки для раздела «Персонализация» (каталог навыков и коннекторов), 1:1 с фронтендом. Размеры-плейсхолдеры замерены попиксельно.

Деталь навыка

import { SkillDetailSkeleton } from "@/components/ui/directory-skeleton";

export default function Particle() {
  return (
    <div className="h-80 w-full overflow-hidden rounded-lg border">
      <SkillDetailSkeleton />
    </div>
  );
}

Деталь коннектора

import { ConnectorDetailSkeleton } from "@/components/ui/directory-skeleton";

export default function Particle() {
  return (
    <div className="h-72 w-full overflow-hidden rounded-lg border">
      <ConnectorDetailSkeleton />
    </div>
  );
}

Колонка списка

Навыки — высокие строки и квадрат-кнопка в шапке; коннекторы — компактные строки.

import { DirectoryListSkeleton } from "@/components/ui/directory-skeleton";

/** The list column (Col 2) loading — skills (tall rows + action) vs connectors. */
export default function Particle() {
  return (
    <div className="grid w-full gap-4 sm:grid-cols-2">
      <div className="overflow-hidden rounded-lg border">
        <DirectoryListSkeleton variant="skills" />
      </div>
      <div className="overflow-hidden rounded-lg border">
        <DirectoryListSkeleton variant="connectors" />
      </div>
    </div>
  );
}

Результаты поиска

import { SearchSkeleton } from "@/components/ui/directory-skeleton";

export default function Particle() {
  return (
    <div className="w-full max-w-sm overflow-hidden rounded-xl border bg-popover p-1">
      <SearchSkeleton />
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/directory-skeleton

Использование

import {
  ConnectorDetailSkeleton,
  DirectoryListSkeleton,
  SearchSkeleton,
  SkillDetailSkeleton,
} from "@/components/ui/directory-skeleton";
 
{loading ? <SkillDetailSkeleton /> : <SkillDetail … />}
<DirectoryListSkeleton variant="connectors" rows={5} />

API

Компонент	Props	Описание
`SkillDetailSkeleton`	`className?`	Панель детали навыка (Col 3).
`ConnectorDetailSkeleton`	`className?`	Панель детали коннектора (Col 3).
`DirectoryListSkeleton`	`variant?: "skills" \| "connectors"`, `rows?`, `className?`	Колонка списка (Col 2).
`SearchSkeleton`	`rows?: number[]`, `className?`	Строки результатов поиска.

На этой странице

Деталь навыка Деталь коннектора Колонка списка Результаты поиска Установка Использование API