From 0d13f6c9c9e66e068e3af7db956620b595700bfe Mon Sep 17 00:00:00 2001
From: Anirban Biswas <139000437+ANIR1604@users.noreply.github.com>
Date: Wed, 27 Nov 2024 18:39:44 +0530
Subject: [PATCH] Solved the problem of overlapping notifications during
 updates (#9207)

---
 package-lock.json                    |  2 +-
 src/components/Users/UserProfile.tsx | 46 +++++++++++++++-------------
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 63af1164ef0..5c703af8fe1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20862,4 +20862,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Users/UserProfile.tsx b/src/components/Users/UserProfile.tsx
index 15cedafab2e..7b0df12cac0 100644
--- a/src/components/Users/UserProfile.tsx
+++ b/src/components/Users/UserProfile.tsx
@@ -36,7 +36,6 @@ import request from "@/Utils/request/request";
 import uploadFile from "@/Utils/request/uploadFile";
 import useQuery from "@/Utils/request/useQuery";
 import {
-  classNames,
   dateQueryString,
   formatDate,
   formatDisplayName,
@@ -1006,31 +1005,34 @@ export default function UserProfile() {
             </p>
           </div>
         </div>
-        {updateStatus.isUpdateAvailable && (
-          <UpdatableApp silentlyAutoUpdate={false}>
-            <ButtonV2 disabled={true}>
+        <div className="mt-5 md:col-span-2 md:mt-0">
+          {updateStatus.isChecking ? (
+            // While checking for updates
+            <ButtonV2 disabled>
               <div className="flex items-center gap-4">
-                <CareIcon icon="l-exclamation" className="text-2xl" />
-                {t("update_available")}
+                <CareIcon icon="l-sync" className="text-2xl animate-spin" />
+                {t("checking_for_update")}
               </div>
             </ButtonV2>
-          </UpdatableApp>
-        )}
-        <div className="mt-5 md:col-span-2 md:mt-0">
-          {!updateStatus.isUpdateAvailable && (
-            <ButtonV2 disabled={updateStatus.isChecking} onClick={checkUpdates}>
-              {" "}
+          ) : updateStatus.isUpdateAvailable ? (
+            // When an update is available
+            <UpdatableApp silentlyAutoUpdate={false}>
+              <ButtonV2 disabled>
+                <div className="flex items-center gap-4">
+                  <CareIcon
+                    icon="l-exclamation"
+                    className="text-2xl text-warning"
+                  />
+                  {t("update_available")}
+                </div>
+              </ButtonV2>
+            </UpdatableApp>
+          ) : (
+            // Default state to check for updates
+            <ButtonV2 onClick={checkUpdates}>
               <div className="flex items-center gap-4">
-                <CareIcon
-                  icon="l-sync"
-                  className={classNames(
-                    "text-2xl",
-                    updateStatus.isChecking && "animate-spin",
-                  )}
-                />
-                {updateStatus.isChecking
-                  ? t("checking_for_update")
-                  : t("check_for_update")}
+                <CareIcon icon="l-sync" className="text-2xl" />
+                {t("check_for_update")}
               </div>
             </ButtonV2>
           )}