Added spinner to dashboard and home

TPH777 · Jun 26, 2024 · ad87138 · ad87138
1 parent d6150ab
commit ad87138
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 7 deletions.
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
@@ -9,6 +9,7 @@ import { Search } from "../components/Search";
 import { FoodItem } from "../interface/FoodItem";
 import { deleteSuccess, deleteWarning } from "../functions/Alert";
 import { getFoodList } from "../functions/Get";
+import { Spinner } from "react-bootstrap";
 
 export function Dashboard() {
   const user = auth.currentUser;
@@ -19,12 +20,15 @@ export function Dashboard() {
   const [search, setSearch] = useState<string>("");
   const [cuisine, setCuisine] = useState<string>("~Cuisine~");
   const [sort, setSort] = useState<string>("~Sort~");
+  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   // To set food list
   const fetchFoodList = async () => {
     try {
+      setIsLoading(true);
       const updatedFoodList = await getFoodList();
       setFoodList(updatedFoodList);
+      setIsLoading(false);
     } catch (error) {
       console.error("Error fetching food items:", error);
     }
@@ -77,10 +81,14 @@ export function Dashboard() {
   });
   return (
     <>
-      <h1>{user?.displayName}'s Dashboard</h1>
-      <br />
-      {!isAdding && !isEditing && (
+      {isLoading && (
+        <Spinner animation="border" role="status">
+          <span className="visually-hidden">Loading...</span>
+        </Spinner>
+      )}
+      {!isLoading && !isAdding && !isEditing && (
         <>
+          <h1 className="mb-4">{user?.displayName}'s Dashboard</h1>
           <div className="d-grid gap-2 mb-4">
             <button
               type="button"

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import Card from "react-bootstrap/Card";
-import { Badge, Button, Col, Row } from "react-bootstrap";
+import { Badge, Button, Col, Row, Spinner } from "react-bootstrap";
 import { Search } from "../components/Search";
 import { FoodItem } from "../interface/FoodItem";
 import { timestampToString } from "../functions/Date";
@@ -12,15 +12,18 @@ export function Home() {
   const [cuisine, setCuisine] = useState<string>("~Cuisine~");
   const [sort, setSort] = useState<string>("~Sort~");
   const [business, setBusiness] = useState<string>("");
+  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const fetchFoodList = async () => {
     try {
+      setIsLoading(true);
       const updatedFoodList = await getFoodList();
       const postedFoodList = updatedFoodList.filter((food) => {
         // Display posted food items only
         return food.post === true;
       });
       setFoodList(postedFoodList);
+      setIsLoading(false);
     } catch (error) {
       console.error("Error fetching food items:", error);
     }
@@ -70,7 +73,13 @@ export function Home() {
         Showing {business}'s results only, Click to Return
       </Button>
 
-      {searchFoodList && searchFoodList.length > 0 ? (
+      {isLoading && (
+        <Spinner animation="border" role="status">
+          <span className="visually-hidden">Loading...</span>
+        </Spinner>
+      )}
+
+      {!isLoading && (
         <Row md={4} className="g-4">
           {searchFoodList.map((food, index) => (
             <Col key={index}>
@@ -107,8 +116,10 @@ export function Home() {
             </Col>
           ))}
         </Row>
-      ) : (
-        <h1>No Results</h1>
+      )}
+
+      {!isLoading && searchFoodList.length == 0 && (
+        <h1 className="mt-3">No Results</h1>
       )}
     </>
   );