From 2d84d4e6e7a8053cea09e507b95f66cae51399ce Mon Sep 17 00:00:00 2001
From: SandraBergstrom <bergstrom_sandra@hotmail.com>
Date: Wed, 28 Jun 2023 12:49:56 +0000
Subject: [PATCH] #50 Add loading spinner

---
 src/pages/travelers/PopularTravelers.js | 27 ++++++++++++++++---------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/pages/travelers/PopularTravelers.js b/src/pages/travelers/PopularTravelers.js
index 5e17b44..8517aea 100644
--- a/src/pages/travelers/PopularTravelers.js
+++ b/src/pages/travelers/PopularTravelers.js
@@ -3,6 +3,7 @@ import appStyles from "../../App.module.css";
 import Container from "react-bootstrap/Container";
 import { axiosReq } from "../../api/axiosDefaults";
 import { useCurrentUser } from "../../contexts/CurrentUserContext";
+import Asset from "../../components/Asset";
 
 const PopularTravelers = () => {
   const [travelerData, setTravelerData] = useState({
@@ -10,7 +11,7 @@ const PopularTravelers = () => {
     popularTravelers: { results: [] },
   });
   const { popularTravelers } = travelerData;
-  const currentUser = useCurrentUser()
+  const currentUser = useCurrentUser();
 
   useEffect(() => {
     const handleMount = async () => {
@@ -19,23 +20,29 @@ const PopularTravelers = () => {
           "/travelers/?ordering=-followers_count"
         );
         setTravelerData((prevState) => ({
-            ...prevState,
-            popularTravelers: data,
-        }))
+          ...prevState,
+          popularTravelers: data,
+        }));
       } catch (err) {
-        console.log(err)
+        console.log(err);
       }
     };
 
-    handleMount()
+    handleMount();
   }, [currentUser]);
 
   return (
     <Container className={appStyles.Container}>
-      <p>Most followed travelers</p>
-      {popularTravelers.results.map(traveler => (
-        <p key={traveler.id}>{traveler.owner}</p>
-      ))}
+      {popularTravelers.results.length ? (
+        <>
+          <p>Most followed travelers</p>
+          {popularTravelers.results.map((traveler) => (
+            <p key={traveler.id}>{traveler.owner}</p>
+          ))}
+        </>
+      ) : (
+        <Asset spinner />
+      )}
     </Container>
   );
 };