/**
 * Platzhalterflaeche fuer Ladezustaende. Das Skelett bildet die spaetere
 * Struktur exakt nach (gleiche Hoehen, gleiche Spaltenbreiten), damit beim
 * Eintreffen der Daten nichts springt. Siehe docs/09-performance-und-ux.md.
 */
export function Skeleton({
  className = '',
  width,
}: {
  className?: string
  width?: string | number
}) {
  return (
    <span
      aria-hidden
      className={`block bg-raised ${className}`}
      style={width === undefined ? undefined : { width }}
    />
  )
}

export function SkeletonLine({ width = '100%' }: { width?: string | number }) {
  return <Skeleton className="h-[0.9rem] my-2" width={width} />
}