josh
e48038c399
Some checks failed
Build and Deploy / Build & Push (push) Failing after 22s
Visual overhaul: - Warmer color system with amber accent for Today, better text hierarchy - Row hover highlighting, sticky column shadow on horizontal scroll - Closed cells replaced with dot (·) instead of "Closed" text - Regional grouping (Northeast/Southeast/Midwest/Texas & South/West) - Two-row header with park count badge and WeekNav on separate lines - Amber "Today" button in WeekNav when off current week - Mobile card layout (< 1024px) with 7-day grid per park; table on desktop - Skeleton loading state via app/loading.tsx Park detail pages (/park/[id]): - Month calendar view with ← → navigation via ?month= param - Live ride status fetched from Six Flags API (cached 1h) - Ride hours only shown when they differ from park operating hours - Fallback to nearest upcoming open day when today is dropped by API, including cross-month fallback for end-of-month edge case Data layer: - Park type gains region field; parks.ts exports groupByRegion() - db.ts gains getParkMonthData() for single-park month queries - sixflags.ts gains scrapeRidesForDay() returning RidesFetchResult with rides, dataDate, isExact, and parkHoursLabel Removed: CalendarGrid.tsx, MonthNav.tsx (dead code) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
83 lines
4.1 KiB
TypeScript
83 lines
4.1 KiB
TypeScript
// Next.js automatically shows this while the page Server Component fetches data.
|
|
// No client JS — the skeleton is pure HTML + CSS animation.
|
|
|
|
const SKELETON_ROWS = 8;
|
|
const SKELETON_COLS = 7;
|
|
|
|
export default function Loading() {
|
|
return (
|
|
<div style={{ minHeight: "100vh", background: "var(--color-bg)" }}>
|
|
{/* Skeleton header */}
|
|
<header style={{
|
|
position: "sticky",
|
|
top: 0,
|
|
zIndex: 20,
|
|
background: "var(--color-bg)",
|
|
borderBottom: "1px solid var(--color-border)",
|
|
}}>
|
|
<div style={{ padding: "12px 24px 10px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
|
|
<div className="skeleton" style={{ width: 180, height: 22, borderRadius: 6 }} />
|
|
<div className="skeleton" style={{ width: 120, height: 26, borderRadius: 20 }} />
|
|
</div>
|
|
<div style={{ padding: "8px 24px 10px", borderTop: "1px solid var(--color-border-subtle)", display: "flex", alignItems: "center", gap: 12 }}>
|
|
<div className="skeleton" style={{ width: 32, height: 32, borderRadius: 6 }} />
|
|
<div className="skeleton" style={{ width: 200, height: 20, borderRadius: 4 }} />
|
|
<div className="skeleton" style={{ width: 32, height: 32, borderRadius: 6 }} />
|
|
</div>
|
|
</header>
|
|
|
|
{/* Skeleton table — desktop */}
|
|
<main style={{ padding: "0 24px 48px" }}>
|
|
<div style={{ overflowX: "auto", marginTop: 0 }}>
|
|
<table style={{ borderCollapse: "collapse", width: "100%", minWidth: 700, tableLayout: "fixed" }}>
|
|
<colgroup>
|
|
<col style={{ width: 240 }} />
|
|
{Array.from({ length: SKELETON_COLS }).map((_, i) => (
|
|
<col key={i} style={{ width: 130 }} />
|
|
))}
|
|
</colgroup>
|
|
|
|
{/* Column headers */}
|
|
<thead>
|
|
<tr>
|
|
<th style={{ padding: "10px 14px", borderBottom: "1px solid var(--color-border)" }}>
|
|
<div className="skeleton" style={{ width: 40, height: 12, borderRadius: 3 }} />
|
|
</th>
|
|
{Array.from({ length: SKELETON_COLS }).map((_, i) => (
|
|
<th key={i} style={{ padding: "10px 8px", borderBottom: "1px solid var(--color-border)", borderLeft: "1px solid var(--color-border)", textAlign: "center" }}>
|
|
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }}>
|
|
<div className="skeleton" style={{ width: 24, height: 10, borderRadius: 3 }} />
|
|
<div className="skeleton" style={{ width: 18, height: 18, borderRadius: 3 }} />
|
|
</div>
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
|
|
{/* Skeleton rows */}
|
|
<tbody>
|
|
{Array.from({ length: SKELETON_ROWS }).map((_, rowIdx) => (
|
|
<tr key={rowIdx} style={{ background: rowIdx % 2 === 0 ? "var(--color-bg)" : "var(--color-surface)" }}>
|
|
<td style={{ padding: "10px 14px", borderBottom: "1px solid var(--color-border)", borderRight: "1px solid var(--color-border)" }}>
|
|
<div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
|
|
<div className="skeleton" style={{ width: `${140 + (rowIdx % 3) * 20}px`, height: 13, borderRadius: 3 }} />
|
|
<div className="skeleton" style={{ width: 80, height: 10, borderRadius: 3 }} />
|
|
</div>
|
|
</td>
|
|
{Array.from({ length: SKELETON_COLS }).map((_, colIdx) => (
|
|
<td key={colIdx} style={{ padding: 4, borderBottom: "1px solid var(--color-border)", borderLeft: "1px solid var(--color-border)", height: 56 }}>
|
|
{(rowIdx + colIdx) % 3 === 0 && (
|
|
<div className="skeleton" style={{ width: "100%", height: "100%", borderRadius: 6 }} />
|
|
)}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|