router-lists-ui/frontend/src/components/TableSkeleton.jsx

/**
 * Skeleton loader для таблиц с анимацией pulse
 */
export default function TableSkeleton({ rows = 10, cols = 3, hasCheckbox = false }) {
  const Row = () => (
    <tr>
      {hasCheckbox && (
        <td style={{ width: '40px' }}>
          <div className="placeholder placeholder-xs col-6"></div>
        </td>
      )}
      {Array.from({ length: cols }).map((_, i) => (
        <td key={i}>
          <div className="placeholder col-8 placeholder-wave" style={{ height: 14 }}></div>
        </td>
      ))}
    </tr>
  );
  return (
    <div className="table-responsive">
      <table className="table card-table table-vcenter table-nowrap mb-0">
        <thead>
          <tr>
            {hasCheckbox && <th style={{ width: '40px' }}></th>}
            {Array.from({ length: cols }).map((_, i) => (
              <th key={i}><div className="placeholder col-6 placeholder-wave"></div></th>
            ))}
          </tr>
        </thead>
        <tbody>
          {Array.from({ length: rows }).map((_, i) => <Row key={i} />)}
        </tbody>
      </table>
    </div>
  );
}

export function TableEmpty({ cols = 3, children }) {
  return (
    <div className="table-responsive">
      <table className="table card-table table-vcenter table-nowrap mb-0">
        <tbody>
          <tr>
            <td colSpan={cols} className="text-center text-muted py-5">
              {children}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

/**
 * Skeleton для карточек статистики на Dashboard
 */
export function CardSkeleton({ count = 4 }) {
  return (
    <div className="row g-3">
      {Array.from({ length: count }).map((_, i) => (
        <div key={i} className="col-md-3">
          <div className="card">
            <div className="card-body">
              <div className="d-flex align-items-center">
                <div className="placeholder placeholder-lg bg-secondary rounded me-3" style={{ width: '48px', height: '48px' }}></div>
                <div className="flex-grow-1">
                  <div className="placeholder col-8 placeholder-wave mb-2"></div>
                  <div className="placeholder col-6 placeholder-wave"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

/**
 * Skeleton для списка элементов
 */
export function ListSkeleton({ rows = 5 }) {
  return (
    <div className="list-group list-group-flush">
      {Array.from({ length: rows }).map((_, i) => (
        <div key={i} className="list-group-item">
          <div className="d-flex align-items-center">
            <div className="placeholder bg-secondary rounded me-3" style={{ width: '40px', height: '40px' }}></div>
            <div className="flex-grow-1">
              <div className="placeholder col-8 placeholder-wave mb-2"></div>
              <div className="placeholder col-6 placeholder-wave"></div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

/**
 * Skeleton для формы
 */
export function FormSkeleton({ fields = 3 }) {
  return (
    <div>
      {Array.from({ length: fields }).map((_, i) => (
        <div key={i} className="mb-3">
          <div className="placeholder col-3 placeholder-wave mb-2"></div>
          <div className="placeholder col-12 placeholder-wave" style={{ height: '38px' }}></div>
        </div>
      ))}
      <div className="placeholder col-4 placeholder-wave" style={{ height: '38px' }}></div>
    </div>
  );
}