feat(SPV-1092): suggestion how to improve the refresh button

bitcoin-sv · Oct 4, 2024 · 837fe9e · 837fe9e
1 parent 6cd3cc6
commit 837fe9e
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 22 deletions.
diff --git a/src/routes/admin/_admin.tsx b/src/routes/admin/_admin.tsx
@@ -8,13 +8,14 @@ import {
   KeyRound,
   KeySquare,
   Mail,
-  RefreshCcw,
+  RefreshCw,
   Route as RouteIcon,
   UsersRound,
   Webhook,
 } from 'lucide-react';
 
 import { useEffect, useState } from 'react';
+import logger from '@/logger';
 
 export const Route = createFileRoute('/admin/_admin')({
   beforeLoad: ({ context, location }) => {
@@ -31,11 +32,20 @@ function LayoutComponent() {
   const queryClient = useQueryClient();
   const [isRefreshing, setIsRefreshing] = useState(false);
 
-  const onRefreshClick = () => {
+  const onRefreshClick = async () => {
     setIsRefreshing(true);
-    queryClient.invalidateQueries().finally(() => {
+    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))
+      ]);
+    }catch {
+      logger.error('Failed to refresh');
+    }finally {
       setIsRefreshing(false);
-    });
+    }
   };
 
   useEffect(() => {
@@ -150,7 +160,7 @@ function LayoutComponent() {
             <h1>SPV Wallet Admin</h1>
           </Sheet>
           <Button variant="ghost" className="ml-auto" onClick={onRefreshClick}>
-            <RefreshCcw className={cn('h-4 w-4 mr-2', isRefreshing && 'animate-spin')} />
+            <RefreshCw className={cn('h-4 w-4 mr-2', isRefreshing && 'animate-spin')} />
             Refresh
           </Button>
           <ModeToggle />

diff --git a/src/routes/routeTree.autogenerated.ts b/src/routes/routeTree.autogenerated.ts
@@ -8,25 +8,26 @@
 
 // This file is auto-generated by TanStack Router
 
-import { createFileRoute } from '@tanstack/react-router';
+import { createFileRoute } from '@tanstack/react-router'
 
 // Import Routes
-import { Route as rootRoute } from './__root';
-import { Route as AdminAdminImport } from './admin/_admin';
-import { Route as AdminAdminAccessKeysImport } from './admin/_admin.access-keys';
-import { Route as AdminAdminContactsImport } from './admin/_admin.contacts';
-import { Route as AdminAdminDestinationsImport } from './admin/_admin.destinations';
-import { Route as AdminAdminPaymailsImport } from './admin/_admin.paymails';
-import { Route as AdminAdminTransactionsImport } from './admin/_admin.transactions';
-import { Route as AdminAdminWebhooksImport } from './admin/_admin.webhooks';
-import { Route as AdminAdminXpubImport } from './admin/_admin.xpub';
-import { Route as IndexImport } from './index';
-import { Route as LoginImport } from './login';
-import { Route as UserUserImport } from './user/_user';
-import { Route as UserUserAccessKeysImport } from './user/_user.access-keys';
-import { Route as UserUserDestinationsImport } from './user/_user.destinations';
-import { Route as UserUserTransactionsImport } from './user/_user.transactions';
-import { Route as UserUserXpubImport } from './user/_user.xpub';
+
+import { Route as rootRoute } from './__root'
+import { Route as LoginImport } from './login'
+import { Route as IndexImport } from './index'
+import { Route as UserUserImport } from './user/_user'
+import { Route as AdminAdminImport } from './admin/_admin'
+import { Route as UserUserXpubImport } from './user/_user.xpub'
+import { Route as UserUserTransactionsImport } from './user/_user.transactions'
+import { Route as UserUserDestinationsImport } from './user/_user.destinations'
+import { Route as UserUserAccessKeysImport } from './user/_user.access-keys'
+import { Route as AdminAdminXpubImport } from './admin/_admin.xpub'
+import { Route as AdminAdminWebhooksImport } from './admin/_admin.webhooks'
+import { Route as AdminAdminTransactionsImport } from './admin/_admin.transactions'
+import { Route as AdminAdminPaymailsImport } from './admin/_admin.paymails'
+import { Route as AdminAdminDestinationsImport } from './admin/_admin.destinations'
+import { Route as AdminAdminContactsImport } from './admin/_admin.contacts'
+import { Route as AdminAdminAccessKeysImport } from './admin/_admin.access-keys'
 
 // Create Virtual Routes