From 8819b0ab78fc4758e2f8b3b2f197876823af678d Mon Sep 17 00:00:00 2001
From: om-3004 <omthakkar3004@gmail.com>
Date: Thu, 17 Oct 2024 13:00:11 +0530
Subject: [PATCH] Update Button to show Checking endpoint during the endpoint
 checking process in Create Monitor as well as PageSpeed

---
 Client/src/Pages/Monitors/CreateMonitor/index.jsx    | 6 +++++-
 Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
index d9cdb725f..e919b1b28 100644
--- a/Client/src/Pages/Monitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
@@ -43,6 +43,7 @@ const CreateMonitor = () => {
   });
   const [https, setHttps] = useState(true);
   const [errors, setErrors] = useState({});
+  const [isCheckingEndpoint, setIsCheckingEndpoint] = useState(false);
 
   useEffect(() => {
     const fetchMonitor = async () => {
@@ -125,6 +126,7 @@ const CreateMonitor = () => {
 
   const handleCreateMonitor = async (event) => {
     event.preventDefault();
+    setIsCheckingEndpoint(true);
     //obj to submit
     let form = {
       url:
@@ -156,8 +158,10 @@ const CreateMonitor = () => {
         if (checkEndpointAction.meta.requestStatus === "rejected") {
           createToast({ body: "The endpoint you entered doesn't resolve. Check the URL again." });
           setErrors({ url: "The entered URL is not reachable." });
+          setIsCheckingEndpoint(false);
           return;
         }
+        setIsCheckingEndpoint(false);
       }
 
       form = {
@@ -387,7 +391,7 @@ const CreateMonitor = () => {
             onClick={handleCreateMonitor}
             disabled={Object.keys(errors).length !== 0 && true}
           >
-            Create monitor
+            { isCheckingEndpoint ? "Checking endpoint" : "Create monitor" }
           </Button>
         </Stack>
       </Stack>
diff --git a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
index 802572782..6bdbaacc9 100644
--- a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
+++ b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
@@ -40,6 +40,7 @@ const CreatePageSpeed = () => {
   });
   const [https, setHttps] = useState(true);
   const [errors, setErrors] = useState({});
+  const [isCheckingEndpoint, setIsCheckingEndpoint] = useState(false);
 
   const handleChange = (event, name) => {
     const { value, id } = event.target;
@@ -92,6 +93,7 @@ const CreatePageSpeed = () => {
 
   const handleCreateMonitor = async (event) => {
     event.preventDefault();
+    setIsCheckingEndpoint(true);
     //obj to submit
     let form = {
       url: `http${https ? "s" : ""}://` + monitor.url,
@@ -118,8 +120,10 @@ const CreatePageSpeed = () => {
       if (checkEndpointAction.meta.requestStatus === "rejected") {
         createToast({ body: "The endpoint you entered doesn't resolve. Check the URL again." });
         setErrors({ url: "The entered URL is not reachable." });
+        setIsCheckingEndpoint(false);
         return;
       }
+      setIsCheckingEndpoint(false);
 
       form = {
         ...form,
@@ -343,7 +347,7 @@ const CreatePageSpeed = () => {
             onClick={handleCreateMonitor}
             disabled={Object.keys(errors).length !== 0 && true}
           >
-            Create monitor
+            { isCheckingEndpoint ? "Checking endpoint" : "Create monitor" }
           </Button>
         </Stack>
       </Stack>