export default function TradesLoading() {
  return (
    <div className="page">
      <div className="page-head">
        <div className="skeleton sk-title" style={{ width: 140, marginBottom: 8 }} />
      </div>
      <div style={{ marginTop: 16 }}>
        {Array.from({ length: 6 }).map((_, i) => (
          <div key={i} className="skeleton-card" style={{ marginBottom: 8, padding: 16 }}>
            <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
              <div className="skeleton sk-line" style={{ width: 40 }} />
              <div className="skeleton sk-line" style={{ width: 60 }} />
              <div className="skeleton sk-line" style={{ width: 80 }} />
              <div className="skeleton sk-line" style={{ width: 100 }} />
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
