Cara Implement Skeleton Loading dengan Claude Code

効果 skeletonローディング

skeletonローディング（skeletonスクリーン） 、kontenloading中 layout 骨格 tampilan UIpola.spinnerより juga 体感速度 速く感じられ、layoutシフト juga 防げ.Claude Codeなら、再pemanfaatandimungkinkanなskeletonkomponen 素早くpembangunan bisa dilakukan.

skeletonkomponen dasar

> 汎用的なskeletonkomponen buatkan.
> テキスト、gambar、カード 3pola support.

interface SkeletonProps {
  width?: string | number;
  height?: string | number;
  variant?: 'text' | 'circular' | 'rectangular';
  className?: string;
  lines?: number;
}

function Skeleton({ width, height, variant = 'text', className = '', lines = 1 }: SkeletonProps) {
  const baseClass = 'animate-pulse bg-gray-200 dark:bg-gray-700';

  const variantClass = {
    text: 'rounded',
    circular: 'rounded-full',
    rectangular: 'rounded-lg',
  }[variant];

  if (variant === 'text' && lines > 1) {
    return (
      <div className={`space-y-2 ${className}`}>
        {Array.from({ length: lines }).map((_, i) => (
          <div
            key={i}
            className={`${baseClass} rounded h-4`}
            style={{ width: i === lines - 1 ? '75%' : '100%' }}
          />
        ))}
      </div>
    );
  }

  return (
    <div
      className={`${baseClass} ${variantClass} ${className}`}
      style={{
        width: width ?? (variant === 'text' ? '100%' : undefined),
        height: height ?? (variant === 'text' ? '1rem' : undefined),
      }}
      role="status"
      aria-label="loading中"
    />
  );
}

カード型skeleton

function CardSkeleton() {
  return (
    <div className="border rounded-lg p-4 space-y-4" aria-busy="true" aria-label="loading中">
      <Skeleton variant="rectangular" height={200} />
      <Skeleton variant="text" width="60%" height={24} />
      <Skeleton variant="text" lines={3} />
      <div className="flex items-center gap-3">
        <Skeleton variant="circular" width={40} height={40} />
        <div className="flex-1">
          <Skeleton variant="text" width="40%" />
          <Skeleton variant="text" width="25%" className="mt-1" />
        </div>
      </div>
    </div>
  );
}

function CardListSkeleton({ count = 3 }: { count?: number }) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {Array.from({ length: count }).map((_, i) => (
        <CardSkeleton key={i} />
      ))}
    </div>
  );
}

peralihan kontenとskeleton

interface AsyncContentProps<T> {
  data: T | undefined;
  loading: boolean;
  skeleton: React.ReactNode;
  children: (data: T) => React.ReactNode;
  error?: Error | null;
}

function AsyncContent<T>({ data, loading, skeleton, children, error }: AsyncContentProps<T>) {
  if (error) {
    return <div role="alert" className="text-red-500">エラーが発生しました</div>;
  }

  if (loading || !data) {
    return <>{skeleton}</>;
  }

  return <>{children(data)}</>;
}

// Usage example
function UserProfile() {
  const { data, loading, error } = useQuery('/api/user');

  return (
    <AsyncContent
      data={data}
      loading={loading}
      error={error}
      skeleton={<ProfileSkeleton />}
    >
      {(user) => (
        <div>
          <img src={user.avatar} alt={user.name} />
          <h2>{user.name}</h2>
          <p>{user.bio}</p>
        </div>
      )}
    </AsyncContent>
  );
}

optimasi CSSanimasi

/* パルスアニメーション */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.animate-pulse {
  animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* シマーエフェクト（よりリッチな表現） */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.animate-shimmer {
  background: linear-gradient(
    90deg,
    #e5e7eb 25%,
    #f3f4f6 50%,
    #e5e7eb 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

Summary

Untuk Claude Codeを使えば、汎用skeletonkomponenから用途別のpola、シマーエフェクトまでefisienにpembangunanできます。performa全般についてはperformaoptimasiを、gambarloadingのoptimasi, lihat 画像遅延読み込み.

skeletonスクリーン UX mengenai Nielsen Norman Group - Skeleton Screens 参考 なり.