diff --git a/frontend/src/app/page.module.css b/frontend/src/app/page.module.css index 5ab3595..349fe06 100644 --- a/frontend/src/app/page.module.css +++ b/frontend/src/app/page.module.css @@ -182,3 +182,30 @@ a.secondary { filter: invert(); } } */ + +/* HTML:
*/ +.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; + } +} diff --git a/frontend/src/app/ui/forms/simCurrentGear.tsx b/frontend/src/app/ui/forms/simCurrentGear.tsx index 1ba27b2..55b66d0 100644 --- a/frontend/src/app/ui/forms/simCurrentGear.tsx +++ b/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 (