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>

frontend/src/app/(public)/components/HomepageFaqSection.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect } from 'react';
 import { useLanguage } from '@/context/LanguageContext';
 import { faqApi, FaqItem } from '@/lib/api';
+import { Skeleton, FaqListSkeleton } from '@/components/ui/Skeleton';
 import { ChevronDownIcon } from '@heroicons/react/24/outline';
 import Link from 'next/link';
 import clsx from 'clsx';
@@ -23,7 +24,20 @@ export default function HomepageFaqSection() {
     return () => { cancelled = true; };
   }, []);
 
-  if (loading || faqs.length === 0) {
+  if (loading) {
+    return (
+      <section className="section-padding bg-secondary-gray" aria-labelledby="homepage-faq-title">
+        <div className="container-page">
+          <div className="max-w-2xl mx-auto">
+            <Skeleton className="h-9 w-72 max-w-full mx-auto mb-8" />
+            <FaqListSkeleton count={4} compact />
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  if (faqs.length === 0) {
     return null;
   }
 

frontend/src/app/(public)/components/NextEventSection.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link';
 import { useLanguage } from '@/context/LanguageContext';
 import { eventsApi, Event } from '@/lib/api';
 import { formatPrice, formatDateLong, formatTime } from '@/lib/utils';
+import { FeaturedEventSkeleton } from '@/components/ui/Skeleton';
 import { CalendarIcon, MapPinIcon, ClockIcon } from '@heroicons/react/24/outline';
 
 interface NextEventSectionProps {
@@ -51,11 +52,7 @@ export default function NextEventSection({ initialEvent }: NextEventSectionProps
     : '';
 
   if (loading) {
-    return (
-      <div className="text-center py-12">
-        <div className="animate-spin w-8 h-8 border-4 border-primary-yellow border-t-transparent rounded-full mx-auto" />
-      </div>
-    );
+    return <FeaturedEventSkeleton />;
   }
 
   if (!nextEvent) {