Custom alert based on the type of response

components/Icons/Spinner.jsx

@@ -0,0 +1,40 @@
+export default function Spinner() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="2em"
+      height="2em"
+      viewBox="0 0 32 32"
+    >
+      <rect width="6" height="16" x="1" y="6" fill="#00ace1">
+        <animate
+          id="svgSpinnersBarsFade0"
+          fill="freeze"
+          attributeName="opacity"
+          begin="0;svgSpinnersBarsFade1.end-0.25s"
+          dur="0.75s"
+          values="1;0.2"
+        />
+      </rect>
+      <rect width="6" height="16" x="9" y="6" fill="#00ace1" opacity="0.4">
+        <animate
+          fill="freeze"
+          attributeName="opacity"
+          begin="svgSpinnersBarsFade0.begin+0.15s"
+          dur="0.75s"
+          values="1;0.2"
+        />
+      </rect>
+      <rect width="6" height="16" x="17" y="6" fill="#00ace1" opacity="0.3">
+        <animate
+          id="svgSpinnersBarsFade1"
+          fill="freeze"
+          attributeName="opacity"
+          begin="svgSpinnersBarsFade0.begin+0.3s"
+          dur="0.75s"
+          values="1;0.2"
+        />
+      </rect>
+    </svg>
+  );
+}

components/UploadFile/UploadFile.jsx

@@ -1,18 +1,14 @@
 /* eslint-disable react/prop-types */
 import { useEffect, useState } from "react";
 import Close from "../Icons/Close";
+import Spinner from "../Icons/Spinner";
 
 // eslint-disable-next-line react/prop-types
-export default function UploadFile({
-  setImageData,
-
-  setType,
-  file,
-  setFile,
-}) {
+export default function UploadFile({ setImageData, setType, file, setFile }) {
   const fileQuery = `${import.meta.env.VITE_BaseURL}download?what=knnquery`;
 
   const [isNotRightFile, setIsNotRightFile] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     async function fetchDate() {
@@ -22,64 +18,71 @@ export default function UploadFile({
         method: "POST",
         body: formData,
       });
-      const img = await response.json();
-      setImageData(img);
-    }
+      if (response) setIsLoading(false);
 
-    if (file && file.type === "text/plain") {
-      fetchDate();
-      setIsNotRightFile(false);
+      if (file && !response.ok) {
+        setIsNotRightFile(true);
+      }
+
+      if (response.ok) {
+        setIsNotRightFile(false);
+        const img = await response.json();
+        setImageData(img);
+      }
     }
-    if (file && file.type !== "text/plain") {
-      // alert("Please upload a spectrum file");
-      setIsNotRightFile(true);
-      setFile(null);
+    if (file) {
+      fetchDate();
     }
-  }, [file, fileQuery, setFile, setImageData, setType]);
+  }, [file, fileQuery, isLoading, setFile, setImageData, setType]);
 
   return (
     <form>
       <div className="fileNameWrap">
         <div>
-          {file && (
+          {file && !isNotRightFile && !isLoading && (
             <div>
-              <span className="fileName">File Name</span>
-              <div
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                }}
-              >
-                <span className="fileNameStr">{file.name}</span>
-                {file && (
+              <>
+                <span className="fileName">File Name</span>
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                  }}
+                >
+                  <span className="fileNameStr">{file.name}</span>
+
                   <div className="closeBtn" onClick={() => setFile(null)}>
                     <Close />
                   </div>
-                )}
-              </div>
+                </div>
+              </>
             </div>
           )}
-          {/* {!file ||
-            (isNotRightFile && (
-              <span className="uploadPlaceholder">No file selected</span>
-            ))} */}
         </div>
+        {!file && <span className="uploadPlaceholder">No file selected</span>}
         {isNotRightFile && (
-          <div className="wrongFileAlert">Please upload a spectrum file</div>
+          <span className="uploadPlaceholder">
+            Please upload a spectrum file
+          </span>
         )}
+        {isLoading && <Spinner />}
       </div>
       <div className="uploadBtnsWrap">
         <label className="fileNameBtn">
           Choose a File
           <input
             type="file"
             id="file"
-            onChange={(e) => setFile(e.target.files[0])}
+            onChange={(e) => {
+              setFile(e.target.files[0]);
+              setIsLoading(true);
+              setIsNotRightFile(false);
+            }}
           />
         </label>
       </div>
-      {file && (
+      {file && !isNotRightFile && (
         <div className="searchOptions">
           <label
             onClick={() => setType("text")}

src/App.css

@@ -177,14 +177,13 @@ h1 {
 }
 
 .fileNameBtn {
-  font-size: 13px;
+  font-size: 14px;
   background-color: light-dark(#fff, #202020);
-  color: light-dark(#202020, #ccc);
+  color: light-dark(#00ace1, #ccc);
   border: 1px solid #00ace1;
   cursor: pointer;
   padding: 0.4rem 0.8rem;
   border-radius: 4px;
-  text-transform: uppercase;
   font-weight: 500;
   margin: 0.3rem 0;
   display: inline-block;
@@ -276,14 +275,12 @@ h1 {
 }
 
 .shareBtn {
-  /* background-color: #fff;
-  color: #00ace1; */
   background-color: light-dark(#fff, #202020);
-  color: light-dark(#202020, #ccc);
+  color: light-dark(#00ace1, #ccc);
   padding: 6px 12px 8px 12px;
-  /* text-transform: uppercase; */
-  font-size: 13px;
-  /* letter-spacing: 0.4px; */
+
+  font-size: 14px;
+
   border: 1px solid #00ace1;
   border-radius: 5px;
 }