// src/app/[locale]/admin/import/effects/loading.tsx
export default function Loading() {
	return (
		<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
			{Array.from({ length: 18 }).map((_, i) => (
				<div
					key={`effect-skeleton-${i}`}
					className="rounded-lg border bg-card p-3 animate-pulse"
				>
					<div className="h-12 w-12 bg-muted rounded mx-auto mb-2" />
					<div className="h-4 bg-muted rounded w-3/4 mx-auto mb-1" />
					<div className="h-7 bg-muted rounded" />
				</div>
			))}
		</div>
	);
}