ui: more accurately call isSetLoading when clicking mirror (#1297)

Before clicking on div, not link, would cause throbber without loading mirror
PeerDB-io · Feb 15, 2024 · 59d7ee2 · 59d7ee2
1 parent 5cac242
commit 59d7ee2
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/ui/app/mirrors/page.tsx b/ui/app/mirrors/page.tsx
@@ -50,7 +50,7 @@ export default function Mirrors() {
         <Header
           variant='title2'
           slot={
-            <Button as={Link} href={'/mirrors/create'} variant='normalSolid'>
+            <Button as={Link} href='/mirrors/create' variant='normalSolid'>
               <div
                 style={{
                   display: 'flex',

diff --git a/ui/components/MirrorLink.tsx b/ui/components/MirrorLink.tsx
@@ -2,16 +2,24 @@
 import { Label } from '@/lib/Label';
 import { ProgressCircle } from '@/lib/ProgressCircle';
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 
 const MirrorLink = ({ flowName }: { flowName: string }) => {
+  const router = useRouter();
   const [isLoading, setIsLoading] = useState(false);
   return (
-    <div onClick={() => setIsLoading(true)}>
+    <div>
       {isLoading ? (
         <ProgressCircle variant='determinate_progress_circle' />
       ) : (
-        <Link href={`/mirrors/${flowName}`}>
+        <Link
+          href={`/mirrors/${flowName}`}
+          onClick={() => {
+            setIsLoading(true);
+            router.push(`/mirrors/${flowName}`);
+          }}
+        >
           <Label>
             <div className='cursor-pointer underline'>{flowName}</div>
           </Label>