スケルトンスクリーン（Skeleton）

データの読み込み中にコンテンツの形を仮表示するローディングUI。スピナーよりも体感速度が良く、レイアウトシフトを防げる。

このページでは、Mantine・Ant Design・shadcn/ui・MUI・react-loading-skeletonを使ったスケルトンスクリーンの実装パターン（基本・複数行・カード型・アバター+テキスト・ロード完了切り替え）をインタラクティブなデモとコードで確認できます。

@mantine/corev9.1.1 antdv6.3.7 shadcn/uiv4.2.0 @mui/materialv9.0.0 react-loading-skeletonv3.5.0

Mantine Skeleton

Mantine の Skeleton は height・width で形状を、circle で円形を指定するシンプルなコンポーネント。 visible プロパティで子要素をラップすると、読み込み完了時にそのまま実コンテンツへ切り替えられるため条件分岐が不要になる。

height / widthcircleradiusvisible で子要素ラップ

読み込み中...

tsx

'use client';
import { Skeleton } from '@mantine/core';
import '@mantine/core/styles.css';

export function MantineSkeletonDemo() {
  const [loading, setLoading] = useState(true);

  return (
    <>
      {/* 基本（1行） */}
      <Skeleton height={20} width="100%" radius="sm" />

      {/* 複数行（最後の行は短め） */}
      <Skeleton height={12} />
      <Skeleton height={12} mt={6} />
      <Skeleton height={12} mt={6} width="70%" />

      {/* カード型 */}
      <div style={{ width: 288 }}>
        <Skeleton height={160} radius="md" />
        <Skeleton height={16} mt={12} width="80%" />
        <Skeleton height={12} mt={8} />
      </div>

      {/* アバター + テキスト */}
      <div className="flex items-center gap-3">
        <Skeleton height={40} circle />
        <div className="flex-1">
          <Skeleton height={12} width="40%" />
          <Skeleton height={10} mt={6} width="70%" />
        </div>
      </div>

      {/* ロード切り替え（visibleで子要素をラップ） */}
      <Skeleton visible={loading}>
        <div>実際のコンテンツ</div>
      </Skeleton>
    </>
  );
}

🤖 AIプロンプトテンプレート

React + Tailwind CSSで、Mantineを使ったスケルトンスクリーンを実装してください。
- 使用コンポーネント: @mantine/core の Skeleton
- 基本（1行テキスト）、複数行テキスト、カード型、アバター+テキストの4パターン
- height、width、circle、radius プロパティを活用
- visible プロパティで子要素のラップによる表示制御も実装
- ボタンでローディング/完了をトグルできるデモも追加

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

ライブラリ比較

項目	Mantine	Ant Design	shadcn/ui	MUI	react-loading-skeleton
アニメーション	✅ あり	✅ active で切替	✅ あり（Tailwind）	✅ wave / pulse 切替	✅ あり
バリアント	形状を数値指定	avatar / title / paragraph 一括	Tailwind で自由	text / rect / circular / rounded	count / circle / width / height
子要素ラップ	✅ visible で可能	✅ loading で可能	⚠️ 条件分岐	⚠️ 条件分岐	⚠️ 条件分岐
画像プレースホルダ	⚠️ height で自作	✅ Skeleton.Image	⚠️ className で自作	✅ rectangular / rounded	⚠️ height で自作
学習コスト	低	低	中	中	低
おすすめ用途	Mantine系プロジェクト	管理画面・一括指定派	完全カスタム派	Material Design準拠	UIライブラリ非依存

選択のポイント

Mantine — Mantine を既に使っているプロジェクトなら最有力。visible プロパティで子要素をラップすると条件分岐不要で書ける。
Ant Design —avatar・paragraph などのオプションで複雑なレイアウトを一発で作れる。管理画面・ダッシュボードに最適。
shadcn/ui — Tailwind の class で形状を完全コントロール。デザインシステムを統一したいプロジェクト向け。
MUI —variant が豊富で text はフォントサイズに合わせた自動サイズ調整あり。Material Design 準拠が必要なら最適。
react-loading-skeleton — UIライブラリに依存せず単独で使える。count プロパティで複数行を一気に書ける手軽さが魅力。