export function SignalMatrixSkeleton() {
  return (
    <div className="pageStack">
      <div style={{ marginBottom: 16 }}>
        <div
          style={{
            width: 120,
            height: 10,
            background: "rgba(159, 176, 204, 0.08)",
            borderRadius: 3,
            marginBottom: 6,
          }}
        />
        <div
          style={{
            width: 200,
            height: 16,
            background: "rgba(159, 176, 204, 0.12)",
            borderRadius: 3,
            marginBottom: 4,
          }}
        />
      </div>
      {[1, 2, 3].map((i) => (
        <div key={i} className="panel" style={{ padding: 16 }}>
          <div
            style={{
              width: 80,
              height: 12,
              background: "rgba(159, 176, 204, 0.10)",
              borderRadius: 3,
              marginBottom: 12,
            }}
          />
          {[1, 2, 3, 4].map((j) => (
            <div
              key={j}
              style={{
                height: 28,
                background: "rgba(159, 176, 204, 0.04)",
                borderRadius: 2,
                marginBottom: 4,
              }}
            />
          ))}
        </div>
      ))}
    </div>
  );
}
