From e864a67585e443d94548bef7cf28abc80818ba3f Mon Sep 17 00:00:00 2001
From: vishwasrvalke <39165365+vishwasrvalke@users.noreply.github.com>
Date: Mon, 19 Jul 2021 14:17:49 +0530
Subject: [PATCH] Implementation of spinner and css fixes

---
 components/stock-operation-modal/index.js     |  19 +-
 .../stock-operation.module.css                | 272 ++++++++++--------
 2 files changed, 158 insertions(+), 133 deletions(-)

diff --git a/components/stock-operation-modal/index.js b/components/stock-operation-modal/index.js
index 60fc708..9da6b00 100644
--- a/components/stock-operation-modal/index.js
+++ b/components/stock-operation-modal/index.js
@@ -19,6 +19,7 @@ const StockOperationModal = (props) => {
   const [quantity, setQuantity] = useState('');
   const [isUserLoggedIn, setIsUserLoggedIn] = useState(false);
   const [userMoney, setUserMoney] = useState(0);
+  const [loading, setLoadingState] = useState(false);
 
   const validateQuantity = (quantity) => {
     if (quantity > availableQty) {
@@ -80,7 +81,7 @@ const StockOperationModal = (props) => {
         listedPrice: listedPriceOfStock,
         totalPrice: quantity * listedPriceOfStock,
       };
-
+      setLoadingState(true);
       fetch(`${BASE_API_URL}/trade/stock/new/self`, {
         credentials: 'include',
         method: 'POST',
@@ -96,13 +97,15 @@ const StockOperationModal = (props) => {
             throw new Error(response.statusText);
           }
         })
-        .then((data) =>
+        .then((data) => {
           alert(
             `Trading Successful! Your balance is ${data.userBalance} Dineros`
-          )
-        )
+          );
+          setLoadingState(false);
+        })
         .catch((err) => {
           alert(err.message);
+          setLoadingState(false);
         });
     }
   };
@@ -170,10 +173,14 @@ const StockOperationModal = (props) => {
                   ? styles.greenButton
                   : styles.redButton
               }`}
-              disabled={!(nameOfStock && listedPriceOfStock && quantity)}
+              disabled={
+                !(nameOfStock && listedPriceOfStock && quantity) && loading
+              }
               onClick={submitHandler}
             >
-              {transactionType}
+              <div className={loading ? styles.spin : ''}>
+                {!loading && transactionType}
+              </div>
             </button>
           </div>
         </div>
diff --git a/components/stock-operation-modal/stock-operation.module.css b/components/stock-operation-modal/stock-operation.module.css
index f8ca7e6..e06fd56 100644
--- a/components/stock-operation-modal/stock-operation.module.css
+++ b/components/stock-operation-modal/stock-operation.module.css
@@ -1,7 +1,87 @@
 .backgroundVisible {
-    position: fixed;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 100;
+  display: block;
+  cursor: default;
+}
+
+.modalWrapper {
+  position: fixed;
+  z-index: 100;
+  background: white;
+  border-radius: 10px;
+  padding: 20px 20px;
+  width: 40%;
+  max-width: 435px;
+  height: auto;
+  top: 30vh;
+  left: 34%;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+  display: block;
+  /* animation: fade-slide-in 0.3s ease-in-out forwards; */
+}
+
+/* @keyframes fade-slide-in {
+    from {
+      transform: translateY(-30rem);
+    }
+    to {
+      transform: translateY(0);
+    }
+  } */
+
+.modalContent {
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.modalActions {
+  padding: 1rem;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.label {
+  font-weight: bold;
+  margin: 0.5rem 0;
+  color: #464646;
+}
+
+.select {
+  width: 100%;
+  padding: 12px 20px;
+  margin: 8px 0;
+  display: inline-block;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+.closedButton {
+  cursor: pointer;
+  position: absolute;
+  top: 8px;
+  right: 15px;
+  z-index: 10;
+  width: 20px;
+  height: 20px;
+  color: rgb(199, 57, 57);
+  border-radius: 50%;
+  text-align: center;
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+@media only screen and (max-width: 600px) {
+  .background {
     width: 100%;
-    height: 100%;
+    height: 100vh;
     top: 0;
     left: 0;
     background: rgba(0, 0, 0, 0.5);
@@ -9,140 +89,78 @@
     display: block;
     pointer-events: all;
   }
-  
+
   .modalWrapper {
     position: fixed;
     z-index: 100;
     background: white;
     border-radius: 10px;
-    padding: 20px 20px;
-    width: 40%;
-    max-width: 435px;
+    padding: 20px 10px;
+    width: 80%;
     height: auto;
     top: 30vh;
-    left: 34%;
+    left: 10%;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
     display: block;
-    animation: fade-slide-in 0.3s ease-in-out forwards;
-  }
-  
-  @keyframes fade-slide-in {
-    from {
-      transform: translateY(-30rem);
-    }
-    to {
-      transform: translateY(0);
-    }
-  }
-  
-  .modalContent {
-    padding: 1rem;
-    display: flex;
-    flex-direction: column;
-  }
-  
-  .modalActions {
-    padding: 1rem;
-    display: flex;
-    justify-content: flex-end;
-  }
-  
-  .label {
-    font-weight: bold;
-    margin: 0.5rem 0;
-    color: #464646;
-  }
-  
-  .select {
-    width: 100%;
-    padding: 12px 20px;
-    margin: 8px 0;
-    display: inline-block;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    box-sizing: border-box;
-  }
-  
-  .closedButton {
-    cursor: pointer;
-    position: absolute;
-    top: 8px;
-    right: 15px;
-    z-index: 10;
-    width: 20px;
-    height: 20px;
-    color: rgb(199, 57, 57);
-    border-radius: 50%;
-    text-align: center;
-    font-size: 1rem;
-    font-weight: 700;
-  }
-  .closedButton:hover {
-    transform: scale(2);
-  }
-  
-  @media only screen and (max-width: 600px) {
-    .background {
-      width: 100%;
-      height: 100vh;
-      top: 0;
-      left: 0;
-      background: rgba(0, 0, 0, 0.5);
-      z-index: 100;
-      display: block;
-      pointer-events: all;
-    }
-  
-    .modalWrapper {
-      position: fixed;
-      z-index: 100;
-      background: white;
-      border-radius: 10px;
-      padding: 20px 10px;
-      width: 80%;
-      height: auto;
-      top: 30vh;
-      left: 10%;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
-      display: block;
-      animation: fade-slide-in 0.3s ease-out forwards;
-    }
-  }
-  
-  .buttonClass {
-    width: 100%;
-    padding: 10px 20px;
-    margin-top: 16px;
-    border-radius: 5px;
-    color: white;
-    font-weight: bold;
-    font-size: 20px;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-  }
-  
-  .greenButton {
-    background-color: #2ecc71;
-    border: 1px solid #2ecc71;
-  }
-  
-  .redButton {
-    color: white;
-    background-color: #ff3838;
-    border: 1px solid #ff3838;
+    animation: fade-slide-in 0.3s ease-out forwards;
   }
-  
-  .errorMessage {
-    font-size: 0.8rem;
-    margin-top: -10px;
-    margin-bottom: 10px;
-    color: red;
+}
+
+.buttonClass {
+  width: 100%;
+  padding: 10px 20px;
+  margin-top: 16px;
+  border-radius: 5px;
+  color: white;
+  font-weight: bold;
+  font-size: 20px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+}
+
+.spin {
+  border: 16px solid #0e57c4;
+  border-radius: 50%;
+  border-top: 4px solid #c9d4e6;
+  border-right: 4px solid #bbc9dd;
+  border-bottom: 4px solid #96bff9;
+  border-left: 4px solid #c9e0ff;
+  width: 25px;
+  height: 25px;
+  -webkit-animation: spin 1s linear infinite;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
   }
-  
-  .buttonDisabled {
-    background-color: #cccccc;
-    color: #666666;
-    opacity: 0.5;
+  100% {
+    transform: rotate(360deg);
   }
-  
\ No newline at end of file
+}
+
+.greenButton {
+  background-color: #2ecc71;
+  border: 1px solid #2ecc71;
+}
+
+.redButton {
+  color: white;
+  background-color: #ff3838;
+  border: 1px solid #ff3838;
+}
+
+.errorMessage {
+  font-size: 0.8rem;
+  margin-top: -10px;
+  margin-bottom: 10px;
+  color: red;
+}
+
+.buttonDisabled {
+  background-color: #cccccc;
+  color: #666666;
+  opacity: 0.5;
+}