import "./loading.css";

// 列表数据在途时的骨架屏(grid 卡片 / 行),替代「为空」状态,让用户看到「加载中」而非「没数据」。
export function SkeletonGrid({ count = 8 }: { count?: number }) {
  return (
    <div>
      <div className="skeleton-loading-tag">// 加载中…</div>
      <div className="skeleton-grid">
        {Array.from({ length: count }).map((_, i) => (
          <div className="skeleton-block skeleton-card" key={i} />
        ))}
      </div>
    </div>
  );
}

export function SkeletonRows({ count = 6 }: { count?: number }) {
  return (
    <div>
      <div className="skeleton-loading-tag">// 加载中…</div>
      <div className="skeleton-rows">
        {Array.from({ length: count }).map((_, i) => (
          <div className="skeleton-block skeleton-line" key={i} />
        ))}
      </div>
    </div>
  );
}