From f59486df754e4939cf1af5e2d2f0ff3930147dcc Mon Sep 17 00:00:00 2001
From: Isadora Soares <isadoragalvaoss@gmail.com>
Date: Mon, 13 Sep 2021 17:15:32 -0300
Subject: [PATCH] Add loading style

---
 src/components/getCharacters.tsx | 273 +++++++++++++++++--------------
 1 file changed, 151 insertions(+), 122 deletions(-)

diff --git a/src/components/getCharacters.tsx b/src/components/getCharacters.tsx
index 09e0d4f..5e40ba8 100644
--- a/src/components/getCharacters.tsx
+++ b/src/components/getCharacters.tsx
@@ -9,6 +9,7 @@ const GetCharacter: React.FC = () => {
   const [searchName, setSearchName] = useState<string>("");
 
   const [search, setSearch] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(true);
 
   const onChangeSearchName = (e: ChangeEvent<HTMLInputElement>) => {
     const searchName = e.target.value;
@@ -20,21 +21,31 @@ const GetCharacter: React.FC = () => {
   }, []);
 
   const retrieveCharacter = () => {
-    Service.getAll().then((response) => {
-      setCharacter(response.data.results);
-    });
+    setLoading(true);
+    setTimeout(() => {
+      Service.getAll().then((response) => {
+        setCharacter(response.data.results);
+        setLoading(false);
+      });
+    }, 400);
   };
 
   useEffect(() => {
     retriCharacter();
+
     // eslint-disable-next-line
   }, [searchName]);
 
   const retriCharacter = () => {
-    Service.get(searchName).then((response) => {
-      setCharacter(response.data.results);
-      setSearch(false);
-    });
+    Service.get(searchName)
+      .then((response) => {
+        setCharacter(response.data.results);
+        setSearch(false);
+      })
+      .catch((e) => {
+        setLoading(false);
+        setSearch(true);
+      });
   };
 
   return (
@@ -51,134 +62,152 @@ const GetCharacter: React.FC = () => {
         </div>
       </div>
 
-      <div className="row" style={{ width: "50%" }}>
-        {character &&
-          character
-            //eslint-disable-next-line
-            .filter((characte, index) => {
-              if (searchName === "") {
-                return characte;
-              } else if (
-                characte.name.toLowerCase().includes(searchName.toLowerCase())
-              ) {
-                return characte;
-              }
-            })
-
-            .map((characte, index) => (
-              <div style={{}} key={index}>
-                <div
-                  className="card"
-                  style={{
-                    width: 250,
-                    height: 470,
-                    margin: 50,
-                    borderRadius: 5,
-                    backgroundColor: "rgb(0, 180, 191)",
-                  }}
-                >
-                  <img
-                    className="card-img-top"
-                    src={characte.image}
-                    alt="imag"
-                    style={{}}
-                  />
+      {loading ? (
+        <div>
+          <h3 style={{ color: "white" }}>
+            Loading...
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="50"
+              height="50"
+              fill="currentColor"
+              className="bi bi-hourglass"
+              viewBox="0 0 16 16"
+            >
+              <path d="M2 1.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1-.5-.5zm2.5.5v1a3.5 3.5 0 0 0 1.989 3.158c.533.256 1.011.791 1.011 1.491v.702c0 .7-.478 1.235-1.011 1.491A3.5 3.5 0 0 0 4.5 13v1h7v-1a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351v-.702c0-.7.478-1.235 1.011-1.491A3.5 3.5 0 0 0 11.5 3V2h-7z" />
+            </svg>
+          </h3>
+        </div>
+      ) : (
+        <div className="row">
+          {character &&
+            character
+              //eslint-disable-next-line
+              .filter((characte, index) => {
+                if (searchName === "") {
+                  return characte;
+                } else if (
+                  characte.name.toLowerCase().includes(searchName.toLowerCase())
+                ) {
+                  return characte;
+                }
+              })
 
-                  <button
+              .map((characte, index) => (
+                <div style={{}} key={index}>
+                  <div
+                    className="card"
                     style={{
-                      width: 50,
-                      border: "white",
-                      borderRadius: 10,
-                      marginTop: -15,
-                      marginLeft: 10,
+                      width: 250,
+                      height: 470,
+                      margin: 50,
+                      borderRadius: 5,
+                      backgroundColor: "rgb(0, 180, 191)",
                     }}
                   >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="16"
-                      height="16"
-                      fill="currentColor"
-                      className="bi bi-bookmark-heart"
-                      viewBox="0 0 16 16"
-                    >
-                      <path
-                        fillRule="evenodd"
-                        d="M8 4.41c1.387-1.425 4.854 1.07 0 4.277C3.146 5.48 6.613 2.986 8 4.412z"
-                      />
-                      <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z" />
-                    </svg>
-                  </button>
+                    <img
+                      className="card-img-top"
+                      src={characte.image}
+                      alt="imag"
+                      style={{}}
+                    />
 
-                  <div className="card-body" style={{}}>
-                    <div
-                      className="card-title"
+                    <button
                       style={{
-                        fontWeight: "bold",
-                        fontFamily: "OCR A Std, monospace",
+                        width: 50,
+                        border: "white",
+                        borderRadius: 10,
+                        marginTop: -15,
+                        marginLeft: 10,
                       }}
                     >
-                      <h4>
-                        <div
-                          style={{
-                            color: "green",
-                            fontWeight: "bold",
-                            fontFamily: "OCR A Std, monospace",
-                          }}
-                        >
-                          {characte.name}
-                        </div>
-                      </h4>
-                      <h5>
-                        <div
-                          style={{
-                            margin: 20,
-                          }}
-                        >
-                          {characte.status}
-                        </div>
-                        <div
-                          style={{
-                            margin: 20,
-                          }}
-                        >
-                          {characte.species}
-                        </div>
-                      </h5>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        fill="currentColor"
+                        className="bi bi-bookmark-heart"
+                        viewBox="0 0 16 16"
+                      >
+                        <path
+                          fillRule="evenodd"
+                          d="M8 4.41c1.387-1.425 4.854 1.07 0 4.277C3.146 5.48 6.613 2.986 8 4.412z"
+                        />
+                        <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z" />
+                      </svg>
+                    </button>
+
+                    <div className="card-body" style={{}}>
+                      <div
+                        className="card-title"
+                        style={{
+                          fontWeight: "bold",
+                          fontFamily: "OCR A Std, monospace",
+                        }}
+                      >
+                        <h4>
+                          <div
+                            style={{
+                              color: "green",
+                              fontWeight: "bold",
+                              fontFamily: "OCR A Std, monospace",
+                            }}
+                          >
+                            {characte.name}
+                          </div>
+                        </h4>
+                        <h5>
+                          <div
+                            style={{
+                              margin: 20,
+                            }}
+                          >
+                            {characte.status}
+                          </div>
+                          <div
+                            style={{
+                              margin: 20,
+                            }}
+                          >
+                            {characte.species}
+                          </div>
+                        </h5>
+                      </div>
                     </div>
                   </div>
                 </div>
+              ))}
+          {search ? (
+            <div>
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <img
+                  className="card-img-top"
+                  src={notfound}
+                  alt="notfound"
+                  style={{ width: "100%" }}
+                />
               </div>
-            ))}
-      </div>
-      {search ? (
-        <div>
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-          >
-            <img
-              className="card-img-top"
-              src={notfound}
-              alt="notfound"
-              style={{ width: "60%" }}
-            />
-          </div>
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              marginTop: "5%",
-            }}
-          >
-            <h4 style={{ color: "white" }}>Não foi encontrado</h4>
-          </div>
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  marginTop: "5%",
+                }}
+              >
+                <h4 style={{ color: "white" }}>Não foi encontrado</h4>
+              </div>
+            </div>
+          ) : (
+            <div></div>
+          )}
         </div>
-      ) : (
-        <div></div>
       )}
     </div>
   );