Added loading, favicon, and fixed images

components/pixels.js

@@ -1,7 +1,12 @@
 import Card from "./card";
 import styles from "../styles/everything.module.css";
 
-export default function Pixels({ pixels, image = true, uid = false }) {
+export default function Pixels({
+  pixels,
+  image = true,
+  uid = false,
+  loading = false,
+}) {
   /*
   Example pixels:
   {
@@ -27,7 +32,7 @@ export default function Pixels({ pixels, image = true, uid = false }) {
 
   // The current pixel being displayed
   // const [current, setCurrent] = useState(0);
-  if (pixels && pixels.count !== 0) {
+  if (pixels && pixels.count !== 0 && !loading) {
     // 220px because that is 200px + 10px*2 padding
     return (
       <div
@@ -46,11 +51,20 @@ export default function Pixels({ pixels, image = true, uid = false }) {
                 style={{
                   height: "300px",
                   width: "300px",
-                  backgroundImage:
-                    'url("https://i.redd.it/jsj75rmzelr81.png")',
+                  backgroundImage: 'url("final_place_3x.png")',
                   backgroundPosition: `${
-                    px.x * -3 + 100 <= 0 ? px.x * -3 + 100 : 0
-                  }px ${px.y * -3 + 100 <= 0 ? px.y * -3 + 100 : 0}px`,
+                    px.x * -3 + 100 <= 0
+                      ? px.x * -3 - 100 >= -3 * 2000
+                        ? px.x * -3 + 100
+                        : -3 * 2000
+                      : 0
+                  }px ${
+                    px.y * -3 + 100 <= 0
+                      ? px.y * -3 - 100 >= -3 * 2000
+                        ? px.y * -3 + 100
+                        : -3 * 2000
+                      : 0
+                  }px`,
                   borderRadius: "5% 5% 0% 0%",
                 }}
               />
@@ -92,6 +106,17 @@ export default function Pixels({ pixels, image = true, uid = false }) {
         ))}
       </div>
     );
+  } else if (loading) {
+    return (
+      <div style={{ textAlign: "center" }}>
+        <div className={styles["lds-ring"]}>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+    );
   } else if (pixels && pixels.count === 0) {
     return (
       <p className={`${styles.error} ${styles.active}`}>No results found</p>

pages/remaining.js

@@ -7,12 +7,14 @@ import Pixels from "../components/pixels";
 
 export default function Home() {
   const [isError, setIsError] = useState(false);
+  const [loading, setLoading] = useState(false);
   const [errText, setErrText] = useState("");
   const [remaining, setRemaining] = useState();
   const remainingOnSubmit = async (e) => {
     e.preventDefault();
     const uid = e.target.uid.value;
     setIsError(false);
+    setLoading(true);
     const t = await fetch(
       `${process.env.API_URL}/pixels/remaining?uid=${encodeURIComponent(uid)}`
     )
@@ -30,6 +32,7 @@ export default function Home() {
         setIsError(true);
         setErrText(error.message);
       });
+    setLoading(false);
     if (t) {
       setRemaining(t);
     }
@@ -64,7 +67,7 @@ export default function Home() {
         <h4 className={`${styles.error} ${isError ? styles.active : ""}`}>
           {errText}
         </h4>
-        <Pixels pixels={remaining} />
+        <Pixels pixels={remaining} loading={loading} />
       </div>
     </div>
   );

pages/search.js

@@ -8,6 +8,7 @@ import "react-datepicker/dist/react-datepicker.css";
 
 export default function Home() {
   const [isError, setIsError] = useState(false);
+  const [loading, setLoading] = useState(false);
   const [errText, setErrText] = useState("");
   const [remaining, setRemaining] = useState();
   const [startDate, setStartDate] = useState(new Date("2022-04-01"));
@@ -21,11 +22,13 @@ export default function Home() {
     if (!/^[0-9]+,[0-9]+$/.test(c1)) {
       setIsError(true);
       setErrText("Coordinate 1 does not fit correct format of x,y.");
+      return;
     }
     const c2 = e.target.c2.value.split(" ").join("");
     if (!/^[0-9]+,[0-9]+$/.test(c2)) {
       setIsError(true);
       setErrText("Coordinate 2 does not fit correct format of x,y.");
+      return;
     }
     params.x1 = c1.split(",")[0];
     params.y1 = c1.split(",")[1];
@@ -41,6 +44,7 @@ export default function Home() {
     if (uid && uid !== "") {
       params.uid = uid;
     }
+    setLoading(true);
     const t = await fetch(
       `${process.env.API_URL}/search?${new URLSearchParams(params)}`
     )
@@ -58,6 +62,7 @@ export default function Home() {
         setIsError(true);
         setErrText(error.message);
       });
+    setLoading(false);
     if (t) {
       setRemaining(t);
     }
@@ -127,7 +132,7 @@ export default function Home() {
           {errText}
         </h4>
         {/*TODO: Make a component for search. tbh the Pixels could probably be reutilized but with an option to not load the image (the area won't be the same then and now)*/}
-        <Pixels image={false} uid={true} pixels={remaining} />
+        <Pixels image={false} uid={true} loading={loading} pixels={remaining} />
       </div>
     </div>
   );

styles/everything.module.css

@@ -134,3 +134,39 @@
     display: block;
   }
 }
+
+.lds-ring {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 64px;
+  height: 64px;
+  margin: 8px;
+  border: 8px solid #fff;
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: #fff transparent transparent transparent;
+}
+.lds-ring div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+.lds-ring div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+.lds-ring div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}