| export default function CAMSkeleton() { |
| return ( |
| <div className="animate-pulse" style={{ display: "flex", minHeight: "100vh" }}> |
| {/* Sidebar skeleton */} |
| <aside |
| className="hide-mobile" |
| style={{ |
| width: "280px", flexShrink: 0, borderRight: "1px solid var(--border)", |
| padding: "24px", display: "flex", flexDirection: "column", gap: "16px", |
| }} |
| > |
| <div style={{ height: "24px", width: "75%", borderRadius: "var(--radius-sm)", background: "var(--bg-elevated)" }} /> |
| <div style={{ height: "40px", width: "50%", borderRadius: "var(--radius-sm)", background: "var(--bg-elevated)" }} /> |
| <div style={{ height: "20px", width: "33%", borderRadius: "var(--radius-sm)", background: "var(--bg-elevated)" }} /> |
| <div style={{ marginTop: "24px", display: "flex", flexDirection: "column", gap: "8px" }}> |
| {Array.from({ length: 6 }).map((_, i) => ( |
| <div key={i} style={{ height: "16px", borderRadius: "var(--radius-sm)", background: "var(--bg-elevated)", width: `${70 + (i % 3) * 10}%` }} /> |
| ))} |
| </div> |
| <div style={{ marginTop: "32px", display: "flex", flexDirection: "column", gap: "12px" }}> |
| <div style={{ height: "36px", borderRadius: "var(--radius-sm)", background: "var(--bg-elevated)" }} /> |
| <div style={{ height: "36px", borderRadius: "var(--radius-sm)", background: "var(--bg-elevated)" }} /> |
| </div> |
| </aside> |
| {/* Main skeleton */} |
| <main style={{ flex: 1, padding: "32px", display: "flex", flexDirection: "column", gap: "40px" }}> |
| {Array.from({ length: 6 }).map((_, sectionIdx) => ( |
| <div key={sectionIdx} style={{ display: "flex", flexDirection: "column", gap: "12px" }}> |
| <div style={{ height: "24px", width: "180px", borderRadius: "var(--radius-sm)", background: "var(--bg-elevated)" }} /> |
| {Array.from({ length: 4 }).map((_, lineIdx) => ( |
| <div key={lineIdx} style={{ height: "16px", borderRadius: "var(--radius-sm)", background: "var(--bg-elevated)", width: `${60 + ((lineIdx + sectionIdx) % 4) * 10}%` }} /> |
| ))} |
| </div> |
| ))} |
| </main> |
| </div> |
| ); |
| } |
|
|
