From f0081e2e10c074bde03c74cc81f42f297ecd20c4 Mon Sep 17 00:00:00 2001
From: jabahum <jabajnan8@gmail.com>
Date: Thu, 5 Sep 2024 10:38:32 +0300
Subject: [PATCH] fix delay in pick button

---
 .../change-status-dialog.component.tsx           | 14 +++++++-------
 ...ange-status-move-to-next-dialog.component.tsx | 13 +++++++------
 .../pick-patient-dialog.component.tsx            | 16 ++++++++--------
 3 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/packages/esm-patient-queues-app/src/active-visits/change-status-dialog.component.tsx b/packages/esm-patient-queues-app/src/active-visits/change-status-dialog.component.tsx
index 120d7458..45677f1d 100644
--- a/packages/esm-patient-queues-app/src/active-visits/change-status-dialog.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/change-status-dialog.component.tsx
@@ -65,15 +65,17 @@ const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, currentEn
 
   const [isLoading, setIsLoading] = useState(true);
 
-  const providerUuid = useMemo(() => {
-    if (!sessionUser?.user?.uuid) return null;
+  // Memoize the function to fetch the provider using useCallback
+  const fetchProvider = useCallback(() => {
+    if (!sessionUser?.user?.uuid) return;
+
     setIsLoading(true);
 
     getCareProvider(sessionUser?.user?.uuid).then(
       (response) => {
         const uuid = response?.data?.results[0].uuid;
-        setProvider(uuid);
         setIsLoading(false);
+        setProvider(uuid);
         mutate();
       },
       (error) => {
@@ -87,11 +89,9 @@ const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, currentEn
         });
       },
     );
-
-    return providerUuid;
   }, [sessionUser?.user?.uuid, mutate]);
 
-  useEffect(() => providerUuid, [providerUuid]);
+  useEffect(() => fetchProvider(), [fetchProvider]);
 
   useMemo(() => {
     switch (statusSwitcherIndex) {
@@ -470,7 +470,7 @@ const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, currentEn
               {t('endVisit', 'End Visit')}
             </Button>
             {isLoading ? (
-              <InlineLoading />
+              <InlineLoading description={'Fetching Provider..'} />
             ) : (
               <Button type="submit">{status === 'pending' ? 'Save' : 'Move to the next queue room'}</Button>
             )}
diff --git a/packages/esm-patient-queues-app/src/active-visits/change-status-move-to-next-dialog.component.tsx b/packages/esm-patient-queues-app/src/active-visits/change-status-move-to-next-dialog.component.tsx
index 453d28c7..b13ba064 100644
--- a/packages/esm-patient-queues-app/src/active-visits/change-status-move-to-next-dialog.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/change-status-move-to-next-dialog.component.tsx
@@ -63,9 +63,12 @@ const ChangeStatusMoveToNext: React.FC<ChangeStatusDialogProps> = ({ patientUuid
 
   const { activeVisit } = useVisit(patientUuid);
 
-  const providerUuid = useMemo(() => {
-    if (!sessionUser?.user?.uuid) return null;
+  // Memoize the function to fetch the provider using useCallback
+  const fetchProvider = useCallback(() => {
+    if (!sessionUser?.user?.uuid) return;
+
     setIsLoading(true);
+
     getCareProvider(sessionUser?.user?.uuid).then(
       (response) => {
         const uuid = response?.data?.results[0].uuid;
@@ -84,11 +87,9 @@ const ChangeStatusMoveToNext: React.FC<ChangeStatusDialogProps> = ({ patientUuid
         });
       },
     );
-
-    return providerUuid;
   }, [sessionUser?.user?.uuid, mutate]);
 
-  useEffect(() => providerUuid, [providerUuid]);
+  useEffect(() => fetchProvider(), [fetchProvider]);
 
   useMemo(() => {
     switch (statusSwitcherIndex) {
@@ -608,7 +609,7 @@ const ChangeStatusMoveToNext: React.FC<ChangeStatusDialogProps> = ({ patientUuid
             {t('endVisit', 'End Visit')}
           </Button>
           {isLoading ? (
-            <InlineLoading />
+            <InlineLoading description={'Fetching Provider..'} />
           ) : (
             <Button type="submit">{status === 'pending' ? 'Save' : 'Move to the next queue room'}</Button>
           )}
diff --git a/packages/esm-patient-queues-app/src/active-visits/pick-patient-dialog.component.tsx b/packages/esm-patient-queues-app/src/active-visits/pick-patient-dialog.component.tsx
index 5910d9f3..cd7869a9 100644
--- a/packages/esm-patient-queues-app/src/active-visits/pick-patient-dialog.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/pick-patient-dialog.component.tsx
@@ -27,20 +27,22 @@ const PickPatientStatus: React.FC<PickPatientDialogProps> = ({ queueEntry, close
 
   const [priorityComment, setPriorityComment] = useState('');
 
-  const providerUuid = useMemo(() => {
-    if (!sessionUser?.user?.uuid) return null;
+  // Memoize the function to fetch the provider using useCallback
+  const fetchProvider = useCallback(() => {
+    if (!sessionUser?.user?.uuid) return;
+
     setIsLoading(true);
 
     getCareProvider(sessionUser?.user?.uuid).then(
       (response) => {
         const uuid = response?.data?.results[0].uuid;
-        setProvider(uuid);
         setIsLoading(false);
+        setProvider(uuid);
         mutate();
       },
       (error) => {
-        setIsLoading(false);
         const errorMessages = extractErrorMessagesFromResponse(error);
+        setIsLoading(false);
         showNotification({
           title: "Couldn't get provider",
           kind: 'error',
@@ -49,11 +51,9 @@ const PickPatientStatus: React.FC<PickPatientDialogProps> = ({ queueEntry, close
         });
       },
     );
-
-    return providerUuid;
   }, [sessionUser?.user?.uuid, mutate]);
 
-  useEffect(() => providerUuid, [providerUuid]);
+  useEffect(() => fetchProvider(), [fetchProvider]);
 
   const pickPatientQueueStatus = useCallback(
     (event) => {
@@ -111,7 +111,7 @@ const PickPatientStatus: React.FC<PickPatientDialogProps> = ({ queueEntry, close
             </Button>
 
             {isLoading ? (
-              <InlineLoading />
+              <InlineLoading description={'Fetching Provider..'} />
             ) : (
               <Button disabled={isLoading} type="submit">
                 {t('pickPatient', 'Pick Patient')}