From 4207410c0967270b2f7f69188ac32f7d01f24da2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philip=20Dub=C3=A9?= <philip@peerdb.io>
Date: Thu, 15 Feb 2024 04:03:17 +0000
Subject: [PATCH] ui: more accurately call isSetLoading when clicking mirror

Before clicking on div, not link, would cause throbber without loading mirror
---
 ui/app/mirrors/page.tsx      |  2 +-
 ui/components/MirrorLink.tsx | 12 ++++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/ui/app/mirrors/page.tsx b/ui/app/mirrors/page.tsx
index 0fe7012806..0a8c51f6c1 100644
--- 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
index af73a083fa..9128c6b1a6 100644
--- 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>