diff --git a/src/routes/admin/_admin.tsx b/src/routes/admin/_admin.tsx index 61c82a65..1c975dbb 100644 --- a/src/routes/admin/_admin.tsx +++ b/src/routes/admin/_admin.tsx @@ -1,7 +1,7 @@ import { Button, Logo, ModeToggle, Profile, Sheet, Tooltip, TooltipContent, TooltipTrigger } from '@/components'; import { cn } from '@/lib/utils.ts'; import logger from '@/logger'; -import { useIsFetching, useQueryClient } from '@tanstack/react-query'; +import { useQueryClient } from '@tanstack/react-query'; import { createFileRoute, Link, Outlet, redirect, useLocation } from '@tanstack/react-router'; import { ArrowLeftRight, @@ -30,18 +30,21 @@ function LayoutComponent() { const [route, setRoute] = useState('/admin/xpub'); const { pathname } = useLocation(); const queryClient = useQueryClient(); - const isFetching = useIsFetching(); + const [isRefreshing, setIsRefreshing] = useState(false); - const onRefreshClick = () => { - queryClient - .invalidateQueries() - .then(() => { - toast.success('Data refreshed!'); - }) - .catch((err) => { - toast.error(err.message); - logger.error(err); - }); + const onRefreshClick = async () => { + setIsRefreshing(true); + try { + // Wait for all queries invalidation (data refetching) + // and a minimum delay of 0.5sec before proceeding to make sure the UI doesn't flicker + await Promise.all([queryClient.invalidateQueries(), new Promise((resolve) => setTimeout(resolve, 500))]); + toast.success('Data refreshed'); + } catch { + logger.error('Failed to refresh'); + toast.error('Failed to refresh'); + } finally { + setIsRefreshing(false); + } }; useEffect(() => { @@ -156,7 +159,7 @@ function LayoutComponent() {

SPV Wallet Admin