cinny/src/app/components/LobbySkeleton.tsx

import React, { useId } from 'react';

const ROOM_ROWS = [
  { w: '160px', indent: false },
  { w: '120px', indent: true },
  { w: '140px', indent: true },
  { w: '130px', indent: true },
  { w: '150px', indent: false },
  { w: '110px', indent: true },
];

export function LobbySkeleton() {
  const id = useId().replace(/:/g, '');
  const shimmerKeyframes = `
    @keyframes shimmer-${id} {
      0%   { background-position: -400px 0; }
      100% { background-position: 400px 0; }
    }
  `;

  const shimmer = {
    background:
      'linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%)',
    backgroundSize: '800px 100%',
    animation: `shimmer-${id} 1.6s ease-in-out infinite`,
    borderRadius: '4px',
  } as React.CSSProperties;

  return (
    <>
      <style>{shimmerKeyframes}</style>
      <div
        style={
          {
            display: 'flex',
            flexDirection: 'column',
            flexGrow: 1,
            height: '100%',
            overflow: 'hidden',
            '--skeleton-base': 'color-mix(in srgb, currentColor 8%, transparent)',
            '--skeleton-shine': 'color-mix(in srgb, currentColor 15%, transparent)',
          } as React.CSSProperties
        }
      >
        {/* Header — matches LobbyHeader (56px) */}
        <div
          style={{
            height: '56px',
            borderBottom: '1px solid color-mix(in srgb, currentColor 10%, transparent)',
            display: 'flex',
            alignItems: 'center',
            gap: '12px',
            padding: '0 16px',
            flexShrink: 0,
          }}
        >
          <div
            style={{
              ...shimmer,
              width: '32px',
              height: '32px',
              borderRadius: '50%',
              flexShrink: 0,
            }}
          />
          <div style={{ ...shimmer, width: '130px', height: '16px' }} />
          <div style={{ flex: 1 }} />
          <div style={{ ...shimmer, width: '24px', height: '24px', borderRadius: '4px' }} />
          <div style={{ ...shimmer, width: '24px', height: '24px', borderRadius: '4px' }} />
        </div>

        <div style={{ flex: 1, overflowY: 'hidden', display: 'flex', flexDirection: 'column' }}>
          {/* Hero — matches PageHero with large avatar + title + subtitle */}
          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              padding: '32px 16px 24px',
              gap: '12px',
              flexShrink: 0,
            }}
          >
            <div style={{ ...shimmer, width: '72px', height: '72px', borderRadius: '50%' }} />
            <div style={{ ...shimmer, width: '180px', height: '20px' }} />
            <div style={{ ...shimmer, width: '240px', height: '13px' }} />
          </div>

          {/* Room list rows */}
          <div style={{ flex: 1, padding: '8px 0' }}>
            {ROOM_ROWS.map((row, i) => (
              <div
                key={i}
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: '10px',
                  padding: `6px 16px 6px ${row.indent ? '36px' : '16px'}`,
                }}
              >
                <div
                  style={{
                    ...shimmer,
                    width: '18px',
                    height: '18px',
                    borderRadius: '4px',
                    flexShrink: 0,
                  }}
                />
                <div style={{ ...shimmer, width: row.w, height: '14px' }} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}