feat: update session links to include tab parameters for improved navigation and add loading skeletons for better user experience

src/app/sessions/page.tsx

@@ -1,10 +1,30 @@
+import { Suspense } from 'react';
 import Link from 'next/link';
 import { auth } from '@/lib/auth';
 import { getSessionsByUserId } from '@/services/sessions';
 import { getMotivatorSessionsByUserId } from '@/services/moving-motivators';
-import { Card, CardContent, Badge, Button } from '@/components/ui';
+import { Card, Button } from '@/components/ui';
 import { WorkshopTabs } from './WorkshopTabs';
 
+function WorkshopTabsSkeleton() {
+  return (
+    <div className="space-y-6">
+      {/* Tabs skeleton */}
+      <div className="flex gap-2 border-b border-border pb-4">
+        {[...Array(4)].map((_, i) => (
+          <div key={i} className="h-10 w-32 bg-card animate-pulse rounded-lg" />
+        ))}
+      </div>
+      {/* Cards skeleton */}
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {[...Array(6)].map((_, i) => (
+          <div key={i} className="h-40 bg-card animate-pulse rounded-xl" />
+        ))}
+      </div>
+    </div>
+  );
+}
+
 export default async function SessionsPage() {
   const session = await auth();
 
@@ -88,10 +108,12 @@ export default async function SessionsPage() {
           </div>
         </Card>
       ) : (
-        <WorkshopTabs
-          swotSessions={allSwotSessions}
-          motivatorSessions={allMotivatorSessions}
-        />
+        <Suspense fallback={<WorkshopTabsSkeleton />}>
+          <WorkshopTabs
+            swotSessions={allSwotSessions}
+            motivatorSessions={allMotivatorSessions}
+          />
+        </Suspense>
       )}
     </main>
   );