feat(frontend): add skeleton loading state for dashboard

Replace simple spinner with skeleton loading placeholders that match
the dashboard layout structure, providing better visual feedback during
data loading.

frontend/src/pages/DashboardPage.jsx

@@ -6,6 +6,7 @@ import { useAuth } from '../contexts/AuthContext';
 import { dashboardAPI, matchesAPI } from '../services/api';
 import { connectSocket, disconnectSocket, getSocket } from '../services/socket';
 import HeatBadges from '../components/heats/HeatBadges';
+import { DashboardSkeleton } from '../components/common/Skeleton';
 import {
   Calendar,
   MapPin,
@@ -139,12 +140,7 @@ const DashboardPage = () => {
   if (loading) {
     return (
       <Layout>
-        <div className="max-w-5xl mx-auto flex items-center justify-center min-h-[400px]">
-          <div className="flex flex-col items-center gap-3">
-            <Loader2 className="w-12 h-12 animate-spin text-primary-600" />
-            <p className="text-gray-600">Loading dashboard...</p>
-          </div>
-        </div>
+        <DashboardSkeleton />
       </Layout>
     );
   }