Replace spinners with skeleton loading states for faster perceived UX.

Add reusable Skeleton components and route-level loading files across public pages and admin lists so layouts stay stable while data loads.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Michilis
2026-07-12 23:14:11 +00:00
co-authored by Cursor
parent d8c207c995
commit 75e317d73e
20 changed files with 397 additions and 57 deletions
+16 -2
View File
@@ -73,8 +73,22 @@ export default function LinktreePage() {
</h2>
{loading ? (
<div className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 text-center">
<div className="animate-spin w-6 h-6 border-2 border-primary-yellow border-t-transparent rounded-full mx-auto" />
<div
className="bg-white/10 backdrop-blur-sm rounded-2xl p-5 border border-white/10 animate-pulse"
role="status"
aria-busy="true"
>
<span className="sr-only">Loading</span>
<div className="h-6 w-2/3 rounded-lg bg-white/15" />
<div className="mt-3 space-y-2">
<div className="h-4 w-3/4 rounded-lg bg-white/15" />
<div className="h-4 w-1/2 rounded-lg bg-white/15" />
</div>
<div className="mt-4 flex items-center justify-between">
<div className="h-5 w-20 rounded-lg bg-white/15" />
<div className="h-4 w-24 rounded-lg bg-white/15" />
</div>
<div className="mt-4 h-12 rounded-xl bg-white/15" />
</div>
) : nextEvent ? (
<Link href={`/events/${nextEvent.slug}`} className="block group">