diff --git a/src/components/PageRefreshButton/PageRefreshButton.tsx b/src/components/PageRefreshButton/PageRefreshButton.tsx
new file mode 100644
index 00000000..5b28ed1c
--- /dev/null
+++ b/src/components/PageRefreshButton/PageRefreshButton.tsx
@@ -0,0 +1,34 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { useState } from 'react';
+import { toast } from 'sonner';
+import logger from '@/logger';
+import { RefreshCw } from 'lucide-react';
+import { cn } from '@/lib/utils.ts';
+import { Button } from '@/components';
+
+export const PageRefreshButton = () => {
+ const queryClient = useQueryClient();
+ const [isRefreshing, setIsRefreshing] = useState(false);
+
+ 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);
+ }
+ };
+
+ return (
+
+ );
+};
diff --git a/src/components/PageRefreshButton/index.ts b/src/components/PageRefreshButton/index.ts
new file mode 100644
index 00000000..c13a648e
--- /dev/null
+++ b/src/components/PageRefreshButton/index.ts
@@ -0,0 +1 @@
+export * from './PageRefreshButton.tsx';
diff --git a/src/routes/admin/_admin.tsx b/src/routes/admin/_admin.tsx
index 50db2cb9..856b3770 100644
--- a/src/routes/admin/_admin.tsx
+++ b/src/routes/admin/_admin.tsx
@@ -1,21 +1,9 @@
-import { Button, Logo, ModeToggle, Profile, Sheet, Tooltip, TooltipContent, TooltipTrigger } from '@/components';
-import { cn } from '@/lib/utils.ts';
-import logger from '@/logger';
-import { useQueryClient } from '@tanstack/react-query';
+import { Logo, ModeToggle, Profile, Sheet, Tooltip, TooltipContent, TooltipTrigger } from '@/components';
import { createFileRoute, Link, Outlet, redirect, useLocation } from '@tanstack/react-router';
-import {
- ArrowLeftRight,
- KeyRound,
- KeySquare,
- Mail,
- RefreshCw,
- Route as RouteIcon,
- UsersRound,
- Webhook,
-} from 'lucide-react';
+import { ArrowLeftRight, KeyRound, KeySquare, Mail, Route as RouteIcon, UsersRound, Webhook } from 'lucide-react';
import { useEffect, useState } from 'react';
-import { toast } from 'sonner';
+import { PageRefreshButton } from '@/components/PageRefreshButton';
export const Route = createFileRoute('/admin/_admin')({
beforeLoad: ({ context, location }) => {
@@ -29,23 +17,6 @@ export const Route = createFileRoute('/admin/_admin')({
function LayoutComponent() {
const [route, setRoute] = useState('/admin/xpub');
const { pathname } = useLocation();
- const queryClient = useQueryClient();
- const [isRefreshing, setIsRefreshing] = useState(false);
-
- 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(() => {
setRoute(pathname);
@@ -56,6 +27,7 @@ function LayoutComponent() {
return 'bg-accent text-accent-foreground';
}
};
+
return (