From 4060006a22ff10175abcd710a1dfa83cf7de2202 Mon Sep 17 00:00:00 2001
From: Laurent Bossavit <laurent.git@bossavit.com>
Date: Mon, 3 Mar 2025 16:08:53 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(domains)=20improve=20user=20experi?=
 =?UTF-8?q?ence=20and=20avoid=20repeat=20fix=20operations?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a loader after clicking on "Re-run check" for a domain
---
 CHANGELOG.md                                  |  1 +
 .../domains/components/MailDomainView.tsx     | 42 ++++++++++---------
 2 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 70eb290..8db24d6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to
 
 ### Fixed
 
+- 💄(domains) improve user experience and avoid repeat fix_domain operations
 - 👽️(dimail) increase timeout value for check domain API call
 - 🧱(helm) add resource-server ingress path #743
 - 🌐(backend) synchronize translations with crowdin again
diff --git a/src/frontend/apps/desk/src/features/mail-domains/domains/components/MailDomainView.tsx b/src/frontend/apps/desk/src/features/mail-domains/domains/components/MailDomainView.tsx
index 6156ee5..ddb6a9b 100644
--- a/src/frontend/apps/desk/src/features/mail-domains/domains/components/MailDomainView.tsx
+++ b/src/frontend/apps/desk/src/features/mail-domains/domains/components/MailDomainView.tsx
@@ -1,5 +1,6 @@
 import {
   Button,
+  Loader,
   Modal,
   ModalSize,
   VariantType,
@@ -62,18 +63,17 @@ export const MailDomainView = ({ mailDomain, onMailDomainUpdate }: Props) => {
     toast(t('copy done'), VariantType.SUCCESS);
   };
 
-  const { mutate: fetchMailDomain } = useFetchFromDimail({
-    onSuccess: (data: MailDomain) => {
-      console.info('fetchMailDomain success', data);
-      setShowModal(false);
-      toast(t('Domain data fetched successfully'), VariantType.SUCCESS);
-      onMailDomainUpdate?.(data);
-    },
-    onError: () => {
-      console.error('fetchMailDomain error');
-      toast(t('Failed to fetch domain data'), VariantType.ERROR);
-    },
-  });
+  const { mutate: fetchMailDomain, isPending: fetchPending } =
+    useFetchFromDimail({
+      onSuccess: (data: MailDomain) => {
+        setShowModal(false);
+        toast(t('Domain data fetched successfully'), VariantType.SUCCESS);
+        onMailDomainUpdate?.(data);
+      },
+      onError: () => {
+        toast(t('Failed to fetch domain data'), VariantType.ERROR);
+      },
+    });
 
   return (
     <>
@@ -155,13 +155,17 @@ export const MailDomainView = ({ mailDomain, onMailDomainUpdate }: Props) => {
           )}
           <pre>
             <div style={{ display: 'flex', justifyContent: 'center' }}>
-              <Button
-                onClick={() => {
-                  void fetchMailDomain(mailDomain.slug);
-                }}
-              >
-                {t('Re-run check')}
-              </Button>
+              {fetchPending ? (
+                <Loader />
+              ) : (
+                <Button
+                  onClick={() => {
+                    void fetchMailDomain(mailDomain.slug);
+                  }}
+                >
+                  {t('Re-run check')}
+                </Button>
+              )}
             </div>
           </pre>
         </Modal>