feat(ui): replace skeleton loaders with honest loading states

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/network/ClientsTab.tsx

@@ -171,7 +171,7 @@ export function ClientsTab({ tenantId, deviceId, active }: ClientsTabProps) {
 
   // Loading state
   if (isLoading) {
-    return <TableSkeleton rows={8} />
+    return <TableSkeleton />
   }
 
   // Error state

frontend/src/components/network/InterfaceGauges.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
 import { metricsApi, type InterfaceMetricPoint } from '@/lib/api'
-import { Skeleton } from '@/components/ui/skeleton'
+import { LoadingText } from '@/components/ui/skeleton'
 
 interface InterfaceGaugesProps {
   tenantId: string
@@ -101,14 +101,8 @@ export function InterfaceGauges({ tenantId, deviceId, active }: InterfaceGaugesP
 
   if (isLoading) {
     return (
-      <div className="space-y-3">
-        {[0, 1, 2].map((i) => (
-          <div key={i} className="rounded-lg border border-border bg-panel p-3">
-            <Skeleton className="h-4 w-24 mb-2" />
-            <Skeleton className="h-3 w-full mb-1" />
-            <Skeleton className="h-3 w-full" />
-          </div>
-        ))}
+      <div className="py-8 text-center">
+        <LoadingText />
       </div>
     )
   }

frontend/src/components/network/LogsTab.tsx

@@ -2,7 +2,7 @@ import { useState, useMemo, useCallback, useRef, useEffect } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { Search, RefreshCw } from 'lucide-react'
 import { networkApi, type LogEntry } from '@/lib/networkApi'
-import { Skeleton } from '@/components/ui/skeleton'
+import { LoadingText } from '@/components/ui/skeleton'
 
 interface LogsTabProps {
   tenantId: string
@@ -62,16 +62,10 @@ function TopicBadge({ topics }: { topics: string }) {
   )
 }
 
-function TableSkeleton() {
+function TableLoading() {
   return (
-    <div className="space-y-1">
-      {Array.from({ length: 8 }).map((_, i) => (
-        <div key={i} className="flex gap-3 py-2 px-3">
-          <Skeleton className="h-4 w-32 shrink-0" />
-          <Skeleton className="h-4 w-20 shrink-0" />
-          <Skeleton className="h-4 flex-1" />
-        </div>
-      ))}
+    <div className="py-8 text-center">
+      <LoadingText />
     </div>
   )
 }
@@ -189,7 +183,7 @@ export function LogsTab({ tenantId, deviceId, active }: LogsTabProps) {
       {/* Log table */}
       <div className="rounded-lg border border-border bg-panel overflow-hidden">
         {isLoading ? (
-          <TableSkeleton />
+          <TableLoading />
         ) : error ? (
           <div className="p-6 text-center text-sm text-error">
             Failed to fetch device logs. The device may be offline or unreachable.

frontend/src/components/network/VpnTab.tsx

@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 import { Shield, Lock, Globe } from 'lucide-react'
 import { networkApi, type VpnTunnel } from '@/lib/networkApi'
-import { Skeleton } from '@/components/ui/skeleton'
+import { LoadingText } from '@/components/ui/skeleton'
 import { Badge } from '@/components/ui/badge'
 
 interface VpnTabProps {
@@ -102,10 +102,8 @@ export function VpnTab({ tenantId, deviceId, active }: VpnTabProps) {
 
   if (isLoading) {
     return (
-      <div className="mt-4 space-y-2">
-        <Skeleton className="h-10 w-full" />
-        <Skeleton className="h-10 w-full" />
-        <Skeleton className="h-10 w-full" />
+      <div className="mt-4 py-8 text-center">
+        <LoadingText />
       </div>
     )
   }