refactor: replace loading overlays with skeleton components for improved user experience across various pages

app/sites/[id]/funnels/[funnelId]/page.tsx

@@ -4,7 +4,8 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import { ApiError } from '@/lib/api/client'
 import { getFunnel, getFunnelStats, deleteFunnel, type Funnel, type FunnelStats } from '@/lib/api/funnels'
-import { toast, LoadingOverlay, Select, DatePicker, ChevronLeftIcon, ArrowRightIcon, TrashIcon, useTheme, Button } from '@ciphera-net/ui'
+import { toast, Select, DatePicker, ChevronLeftIcon, ArrowRightIcon, TrashIcon, useTheme, Button } from '@ciphera-net/ui'
+import { FunnelDetailSkeleton } from '@/components/skeletons'
 import Link from 'next/link'
 import {
   BarChart,
@@ -92,7 +93,7 @@ export default function FunnelReportPage() {
   }
 
   if (loading && !funnel) {
-    return <LoadingOverlay logoSrc="/pulse_icon_no_margins.png" title="Pulse" />
+    return <FunnelDetailSkeleton />
   }
 
   if (loadError === 'not_found' || (!funnel && !stats && !loadError)) {