File Preview Skeleton

Скелетоны загрузки превью файлов — markdown, docx, xlsx и обычный текст.

import { MarkdownSkeleton } from "@/components/ui/file-preview-skeleton";

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

Установка


pnpm dlx shadcn@latest add @oracul/file-preview-skeleton

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

import {
  MarkdownSkeleton,
  DocxSkeleton,
  XlsxSkeleton,
  TextSkeleton,
} from "@/components/ui/file-preview-skeleton";
 
{loading ? <XlsxSkeleton /> : <SheetPreview … />}

API

Презентационные скелетоны для разных типов превью, пока тяжёлый рендерер подгружается. Построены на DS-примитиве Skeleton, поэтому шиммер совпадает со всей системой.

Компонент	Параметры	Описание
`MarkdownSkeleton`	`className`	Заголовок + абзацы + блок.
`DocxSkeleton`	`className`	Лист документа в карточке.
`XlsxSkeleton`	`className`, `cols`, `rows`	Сетка таблицы.
`TextSkeleton`	`className`	Простые строки текста.

Примеры

Markdown

import { MarkdownSkeleton } from "@/components/ui/file-preview-skeleton";

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

DOCX

import { DocxSkeleton } from "@/components/ui/file-preview-skeleton";

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

XLSX

import { XlsxSkeleton } from "@/components/ui/file-preview-skeleton";

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

Текст

import { TextSkeleton } from "@/components/ui/file-preview-skeleton";

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

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

Установка Использование API Примеры Markdown DOCX XLSX Текст