add loading to measures

jwkaterina · Feb 26, 2024 · bbff472 · bbff472
1 parent ed28ae3
commit bbff472
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 0 deletions.
diff --git a/src/app/components/analysis_cards/alanysis_card.module.css b/src/app/components/analysis_cards/alanysis_card.module.css
@@ -38,6 +38,7 @@
 .form {
     margin-top: 1rem;
     width: 80%;
+    position: relative;
 }
 
 .form .short_input, .form select, .form .long_input {
@@ -68,6 +69,37 @@
     outline: none;
 }
 
+.spinner {
+    position: absolute;
+    top: 4px;
+    right: 15px;
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+    z-index: 3;
+}
+
+.spinner:after {
+    content: ' ';
+    display: block;
+    width: 23px;
+    height: 23px;
+    margin: 1px;
+    border-radius: 50%;
+    border: 2px solid var(--primary-color);
+    border-color: var(--primary-color) transparent var(--primary-color) transparent;
+    animation: spinner 1.2s linear infinite;
+}
+
+@keyframes spinner {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
 .title {
     margin-bottom: 1rem;
     color: var(--gray-dark);

diff --git a/src/app/components/cards/food-cards/header-foodcard.tsx b/src/app/components/cards/food-cards/header-foodcard.tsx
@@ -19,6 +19,7 @@ const FoodHeaderCard = ({ food, option, setOption, setMeasure, quantity,  setQua
     const { sendRequest } = useHttpClient();
     const [measures, setMeasures] = useState<MeasureProp[]>([]);
     const [customWeight, setCustomWeight] = useState<boolean>(false);
+    const [isLoading, setIsLoading] = useState(false);
 
     const { image } = food.food;
     const gramUri: string = "http://www.edamam.com/ontologies/edamam.owl#Measure_gram";
@@ -32,6 +33,7 @@ const FoodHeaderCard = ({ food, option, setOption, setMeasure, quantity,  setQua
         const fetchMeasuresWeight = async() => {
             for(let i = 0; i < food.measures.length; i++) {
                 try {
+                    setIsLoading(true);
                     const nutrients: Nutrients = await sendRequest(
                         `/api/nutrients`,
                         'POST',
@@ -43,8 +45,10 @@ const FoodHeaderCard = ({ food, option, setOption, setMeasure, quantity,  setQua
                         { 'Content-Type': 'application/json' },
                         false, false
                     );
+                    setIsLoading(false);
                     measureNutrients.push(nutrients);
                 } catch (err) {
+                    setIsLoading(false);
                     setMessage('Could not find measures');
                 }
             } 
@@ -126,6 +130,7 @@ const FoodHeaderCard = ({ food, option, setOption, setMeasure, quantity,  setQua
                     onChange={(e) => handleOptionChange(e)}>
                     {calculateOptions()}
                 </select>
+                {isLoading &&  <div className={styles.spinner}></div>}
             </div>
         </div>
     );