/**
 * Loading state placeholder — pulsing gray bars.
 */
const BAR_WIDTHS = [ 85, 65, 92, 70 ];

export function LoadingSkeleton( { rows = 4 } ) {
	return (
		<div className="repivot-skeleton">
			{ Array.from( { length: rows } ).map( ( _, i ) => (
				<div
					key={ i }
					className="repivot-skeleton-bar"
					style={ { width: `${ BAR_WIDTHS[ i % BAR_WIDTHS.length ] }%` } }
				/>
			) ) }
		</div>
	);
}