set loading spinner

AngeloRai · Aug 2, 2021 · a803c44 · a803c44
1 parent 4907620
commit a803c44
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 13 deletions.
diff --git a/src/api/axios.config.js b/src/api/axios.config.js
@@ -1,7 +1,7 @@
 import axios from 'axios'
 
 const apis = {
-  development: 'http://localhost:4000',
+  development: 'https://actionsys.herokuapp.com/',
   production: 'https://actionsys.herokuapp.com/'
 }
 

diff --git a/src/components/ListarFuncionarios/ListarFuncionarios.js b/src/components/ListarFuncionarios/ListarFuncionarios.js
@@ -7,31 +7,32 @@ function ListarFuncionarios() {
   const [funcionarios, setFuncionarios] = useState([]);
   const [filteredFuncionarios, setFilteredFuncionarios] = useState([]);
   const [searchWord, setSearchWord] = useState("");
-  const [loading, setLoading] = useState(false)
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
     async function buscarFuncionarios() {
       try {
-        setLoading(true)
+        setLoading(true);
         const response = await api.get("/funcionarios");
 
         setFuncionarios([...response.data]);
-        setLoading(false)
+
+        setLoading(false);
       } catch (err) {
         console.error(err);
       }
     }
     buscarFuncionarios();
   }, [setLoading]);
-  
+
   useEffect(() => {
     async function buscarFuncionarios() {
       try {
         let filteredArray = [];
 
         if (funcionarios.length !== 0 && searchWord.length !== 0) {
           filteredArray = funcionarios.filter((funcionario) =>
-          funcionario.nome.toLowerCase().includes(searchWord.toLowerCase())
+            funcionario.nome.toLowerCase().includes(searchWord.toLowerCase())
           );
         }
         setFilteredFuncionarios([...filteredArray]);
@@ -46,8 +47,16 @@ function ListarFuncionarios() {
     setSearchWord(event.target.value);
   }
 
-  if (loading === true ) {
-    return <div>LOADING...</div>
+  if (loading === true) {
+    return (
+      <div
+        className="w-100 d-flex justify-content-center align-items-center"
+        style={{ minHeight: "25rem" }}
+      >
+        <div class="spinner-border spinner-border-sm h1" role="status"></div>
+        <span className="sr-only mx-5">Loading...</span>
+      </div>
+    );
   }
 
   return (
@@ -63,17 +72,17 @@ function ListarFuncionarios() {
           value={searchWord}
         />
       </div>
-        {searchWord && filteredFuncionarios.map((funcionario, i) => (
-          <div className="d-flex justify-content-center"><CardFuncionario funcionarios={funcionario} id={i} /></div>
+      {searchWord &&
+        filteredFuncionarios.map((funcionario, i) => (
+          <div className="d-flex justify-content-center">
+            <CardFuncionario funcionarios={funcionario} id={i} />
+          </div>
         ))}
 
-
       {funcionarios &&
         funcionarios.map((funcionario, i) => (
           <CardFuncionario key={i} funcionarios={funcionario} />
         ))}
-
-
     </div>
   );
 }