feat(frontend): add loading animation

frontend/src/app/page.module.css

@@ -182,3 +182,30 @@ a.secondary {
     filter: invert();
   }
 } */
+
+/* HTML: <div class="loader"></div> */
+.loader {
+    width: 65px;
+    height: 30px;
+    position: relative;
+    display: none;
+    margin: 25px auto;
+}
+.loader:before {
+    content: "";
+    position: absolute;
+    border-radius: 50px;
+    box-shadow: 0 0 0 3px inset #fff;
+    animation: l3 0.75s infinite alternate;
+}
+@keyframes l3 {
+    0% {
+        inset: 0 35px 0 0;
+    }
+    50% {
+        inset: 0 0 0 0;
+    }
+    100% {
+        inset: 0 0 0 35px;
+    }
+}

frontend/src/app/ui/forms/simCurrentGear.tsx

@@ -6,6 +6,7 @@ import styles from "../../page.module.css";
 export function SimCurrentGear() {
   const [isFetched, setIsFetched] = useState(false);
   const [fetchedData, setFetchedData] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
 
   async function fetchSimResult(formData: FormData) {
     try {
@@ -35,6 +36,12 @@ export function SimCurrentGear() {
 
   return (
     <div>
+      <div
+        className={styles.loader}
+        style={{
+          display: `${isLoading && !isFetched ? "block" : "none"}`,
+        }}
+      ></div>
       <iframe
         id="renderframe"
         style={{
@@ -53,12 +60,16 @@ export function SimCurrentGear() {
             id="simcprofile"
             name="simcprofile"
             style={{
-              display: `${isFetched ? "none" : "block"}`,
+              display: `${isLoading ? "none" : "block"}`,
             }}
           />
         </div>
         <div className={styles.ctas}>
-          <button className={styles.primary} type="submit">
+          <button
+            className={styles.primary}
+            type="submit"
+            onClick={() => setIsLoading(true)}
+          >
             Run Sim
           </button>
           <a