Merge pull request #26 from mrkyns/spinner

added spinner for loading
mrkyns · Apr 21, 2023 · 341d496 · 341d496
2 parents 44eace4 + 38d5e1d
commit 341d496
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 2 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "react-dom": "^18.2.0",
     "react-paginate": "^8.2.0",
     "react-scripts": "5.0.1",
+    "react-spinners": "^0.13.8",
     "react-time-ago": "^7.2.1",
     "web-vitals": "^2.1.4"
   },

diff --git a/src/App.jsx b/src/App.jsx
@@ -11,13 +11,15 @@ function App() {
   const [query, setQuery] = useState("");
   const [hitsPerPage, setHitsPerPage] = useState(1000);
   const [pageNum, setPageNum] = useState(0);
+  const [loading, setLoading] = useState(true);
 
   const fetchData = async function (queryWord, hitsPerPage, pageNum) {
     try {
       const res = await fetch(
         `http://hn.algolia.com/api/v1/search?query=${queryWord}&hitsPerPage=${hitsPerPage}&page=${pageNum}`
       );
       const data = await res.json();
+      setLoading(false);
       setFetchedData(data);
     } catch (err) {
       // console.error(err);
@@ -31,13 +33,15 @@ function App() {
   return (
     <div className="App">
       <Header />
+
       <Body
         fetchedData={fetchedData}
         hits={fetchedData.hits}
         setFetchedData={setFetchedData}
         setQuery={setQuery}
         setHitsPerPage={setHitsPerPage}
         setPageNum={setPageNum}
+        loading={loading}
       />
       <Footer />
       <Reagan />

diff --git a/src/components/Body.jsx b/src/components/Body.jsx
@@ -1,17 +1,29 @@
 import Search from "./Search";
 import Pagination from "./Pagination";
-import { useEffect, useState } from "react";
+import { useEffect, useState, CSSProperties } from "react";
+import ClimbingBoxLoader from "react-spinners/ClimbingBoxLoader";
 
-export default function Body({ fetchedData, setQuery }) {
+export default function Body({ fetchedData, setQuery, loading }) {
   const [hits, setHits] = useState([]);
 
+  const override = {
+    display: "block",
+    margin: "20px auto",
+  };
+
   useEffect(() => {
     if (fetchedData.hits) setHits(fetchedData.hits);
   }, [fetchedData]);
 
   return (
     <div className="Body">
       <Search fetchedData={fetchedData} setQuery={setQuery} />
+      <ClimbingBoxLoader
+        color="var(--accent)"
+        loading={loading}
+        cssOverride={override}
+        size={25}
+      />
 
       <div className="pagination">
         <Pagination setHits={setHits} itemsPerPage={20} hits={hits} />