feat: implement bulk ACL application feature for efficient access list management across multiple proxy hosts

feat: add modular Security Dashboard implementation plan with environment-driven security service activation
fix: update go.mod and go.sum for dependency version upgrades and optimizations
feat: enable gzip compression for API responses to reduce payload size
fix: optimize SQLite connection settings for better performance and concurrency
refactor: enhance RequireAuth component with consistent loading overlay
feat: configure global query client with optimized defaults for performance in main.tsx
refactor: replace health check useEffect with React Query for improved caching and auto-refresh
build: add code splitting in vite.config.ts for better caching and parallel loading

frontend/src/components/RequireAuth.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { Navigate, useLocation } from 'react-router-dom';
 import { useAuth } from '../hooks/useAuth';
+import { LoadingOverlay } from './LoadingStates';
 
 const RequireAuth: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const { isAuthenticated, isLoading } = useAuth();
   const location = useLocation();
 
   if (isLoading) {
-    return <div>Loading...</div>; // Or a spinner
+    return <LoadingOverlay message="Authenticating..." />;  // Consistent loading UX
   }
 
   if (!isAuthenticated) {

frontend/src/main.tsx

@@ -5,7 +5,18 @@ import App from './App.tsx'
 import { ThemeProvider } from './context/ThemeContext'
 import './index.css'
 
-const queryClient = new QueryClient()
+// Global query client with optimized defaults for performance
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 30, // 30 seconds - reduces unnecessary refetches
+      gcTime: 1000 * 60 * 5, // 5 minutes garbage collection
+      refetchOnWindowFocus: false, // Prevents refetch when switching tabs
+      refetchOnReconnect: 'always', // Refetch when network reconnects
+      retry: 1, // Only retry failed requests once
+    },
+  },
+})
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>

frontend/src/pages/Dashboard.tsx

@@ -1,7 +1,7 @@
-import { useEffect, useState } from 'react'
 import { useProxyHosts } from '../hooks/useProxyHosts'
 import { useRemoteServers } from '../hooks/useRemoteServers'
 import { useCertificates } from '../hooks/useCertificates'
+import { useQuery } from '@tanstack/react-query'
 import { checkHealth } from '../api/health'
 import { Link } from 'react-router-dom'
 import UptimeWidget from '../components/UptimeWidget'
@@ -10,19 +10,14 @@ export default function Dashboard() {
   const { hosts } = useProxyHosts()
   const { servers } = useRemoteServers()
   const { certificates } = useCertificates()
-  const [health, setHealth] = useState<{ status: string } | null>(null)
 
-  useEffect(() => {
-    const fetchHealth = async () => {
-      try {
-        const result = await checkHealth()
-        setHealth(result)
-      } catch {
-        setHealth({ status: 'error' })
-      }
-    }
-    fetchHealth()
-  }, [])
+  // Use React Query for health check - benefits from global caching
+  const { data: health } = useQuery({
+    queryKey: ['health'],
+    queryFn: checkHealth,
+    staleTime: 1000 * 60, // 1 minute for health checks
+    refetchInterval: 1000 * 60, // Auto-refresh every minute
+  })
 
   const enabledHosts = hosts.filter(h => h.enabled).length
   const enabledServers = servers.filter(s => s.enabled).length