diff --git a/frontend/src/hooks/useDomains.ts b/frontend/src/hooks/useDomains.ts index 9ebadf99..a378f54f 100644 --- a/frontend/src/hooks/useDomains.ts +++ b/frontend/src/hooks/useDomains.ts @@ -4,7 +4,7 @@ import * as api from '../api/domains' export function useDomains() { const queryClient = useQueryClient() - const { data: domains = [], isLoading, error } = useQuery({ + const { data: domains = [], isLoading, isFetching, error } = useQuery({ queryKey: ['domains'], queryFn: api.getDomains, }) @@ -26,6 +26,7 @@ export function useDomains() { return { domains, isLoading, + isFetching, error, createDomain: createMutation.mutateAsync, deleteDomain: deleteMutation.mutateAsync, diff --git a/frontend/src/hooks/useProxyHosts.ts b/frontend/src/hooks/useProxyHosts.ts index 536fe1f9..d03cf64c 100644 --- a/frontend/src/hooks/useProxyHosts.ts +++ b/frontend/src/hooks/useProxyHosts.ts @@ -42,6 +42,7 @@ export function useProxyHosts() { return { hosts: query.data || [], loading: query.isLoading, + isFetching: query.isFetching, error: query.error ? (query.error as Error).message : null, createHost: createMutation.mutateAsync, updateHost: (uuid: string, data: Partial) => updateMutation.mutateAsync({ uuid, data }), diff --git a/frontend/src/hooks/useRemoteServers.ts b/frontend/src/hooks/useRemoteServers.ts index 947844e2..9b158525 100644 --- a/frontend/src/hooks/useRemoteServers.ts +++ b/frontend/src/hooks/useRemoteServers.ts @@ -47,6 +47,7 @@ export function useRemoteServers(enabledOnly = false) { return { servers: query.data || [], loading: query.isLoading, + isFetching: query.isFetching, error: query.error ? (query.error as Error).message : null, createServer: createMutation.mutateAsync, updateServer: (uuid: string, data: Partial) => updateMutation.mutateAsync({ uuid, data }), diff --git a/frontend/src/pages/Domains.tsx b/frontend/src/pages/Domains.tsx index aa908218..e6c5bec2 100644 --- a/frontend/src/pages/Domains.tsx +++ b/frontend/src/pages/Domains.tsx @@ -1,9 +1,9 @@ import { useState } from 'react' import { useDomains } from '../hooks/useDomains' -import { Trash2, Plus, Globe } from 'lucide-react' +import { Trash2, Plus, Globe, Loader2 } from 'lucide-react' export default function Domains() { - const { domains, isLoading, error, createDomain, deleteDomain } = useDomains() + const { domains, isLoading, isFetching, error, createDomain, deleteDomain } = useDomains() const [newDomain, setNewDomain] = useState('') const [isSubmitting, setIsSubmitting] = useState(false) @@ -38,7 +38,10 @@ export default function Domains() { return (
-

Domains

+
+

Domains

+ {isFetching && !isLoading && } +
diff --git a/frontend/src/pages/ProxyHosts.tsx b/frontend/src/pages/ProxyHosts.tsx index 54da428c..536082b1 100644 --- a/frontend/src/pages/ProxyHosts.tsx +++ b/frontend/src/pages/ProxyHosts.tsx @@ -1,11 +1,12 @@ import { useState } from 'react' +import { Loader2 } from 'lucide-react' import { useProxyHosts } from '../hooks/useProxyHosts' import type { ProxyHost } from '../api/proxyHosts' import ProxyHostForm from '../components/ProxyHostForm' import { Switch } from '../components/ui/Switch' export default function ProxyHosts() { - const { hosts, loading, error, createHost, updateHost, deleteHost } = useProxyHosts() + const { hosts, loading, isFetching, error, createHost, updateHost, deleteHost } = useProxyHosts() const [showForm, setShowForm] = useState(false) const [editingHost, setEditingHost] = useState() @@ -42,7 +43,10 @@ export default function ProxyHosts() { return (
-

Proxy Hosts

+
+

Proxy Hosts

+ {isFetching && !loading && } +