diff --git a/frontend/apply/src/app/components/LoadingRam.module.css b/frontend/apply/src/app/components/LoadingRam.module.css new file mode 100644 index 0000000..b17b655 --- /dev/null +++ b/frontend/apply/src/app/components/LoadingRam.module.css @@ -0,0 +1,139 @@ +.container { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + min-height: 50vh; + --bocken-loading-animation-duration: 0.5s; +} + +.svg { + width: 200px; + height: auto; + color: #034c97; + animation-name: ram-jump; + animation-duration: var(--bocken-loading-animation-duration); + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; +} + +.ram { + animation-name: ram-sway; + animation-duration: var(--bocken-loading-animation-duration); + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + transform-origin: center; + transform-box: fill-box; +} + +.head { + animation-name: head-nod; + animation-duration: var(--bocken-loading-animation-duration); + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + transform-origin: 20% 50%; + transform-box: fill-box; +} + +.legFront { + animation-name: leg-front; + animation-duration: var(--bocken-loading-animation-duration); + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + transform-origin: 50% 0%; + transform-box: fill-box; +} + +.legBack { + animation-name: leg-back; + animation-duration: var(--bocken-loading-animation-duration); + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + transform-origin: 50% 0%; + transform-box: fill-box; +} + +.tail { + animation-name: tail-wag; + animation-duration: var(--bocken-loading-animation-duration); + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + transform-origin: 100% 0%; + transform-box: fill-box; +} + +@keyframes ram-jump { + 0%, + 100% { + transform: translateY(-14px); + } + 50% { + transform: translateY(0); + } +} + +@keyframes ram-sway { + 0%, + 100% { + transform: translateY(0) rotateZ(-2deg); + } + 25% { + transform: translateY(-2px) rotateZ(-1deg); + } + 50% { + transform: translateY(-3px) rotateZ(2deg); + } + 75% { + transform: translateY(-2px) rotateZ(1deg); + } +} + +@keyframes head-nod { + 0%, + 100% { + transform: translateX(-3px, 3px) rotate(0deg); + } + 50% { + transform: translate(-3px, 3px) rotate(-12deg); + } +} + +@keyframes leg-front { + 0%, + 100% { + transform: rotate(12deg) translate(5px, -2px); + } + 50% { + transform: rotate(-12deg) translate(5px, -2px); + } +} + +@keyframes leg-back { + 0%, + 100% { + transform: rotate(-12deg); + } + 50% { + transform: rotate(12deg); + } +} + +@keyframes tail-wag { + 0%, + 100% { + transform: rotate(5deg); + } + 50% { + transform: rotate(-15deg); + } +} + +@media (prefers-reduced-motion: reduce) { + .ram, + .head, + .legFront, + .legBack { + animation: none; + } +} + diff --git a/frontend/apply/src/app/components/LoadingRam.tsx b/frontend/apply/src/app/components/LoadingRam.tsx new file mode 100644 index 0000000..b90244d --- /dev/null +++ b/frontend/apply/src/app/components/LoadingRam.tsx @@ -0,0 +1,47 @@ +import styles from "./LoadingRam.module.css"; + +export default function LoadingRam() { + return ( +
+ + Loading + + + + + + + + +
{/* TODO "Loading..." */}
+
+ ); +} diff --git a/frontend/apply/src/app/i18n/locales/sv.json b/frontend/apply/src/app/i18n/locales/sv.json index 9645719..36d0393 100644 --- a/frontend/apply/src/app/i18n/locales/sv.json +++ b/frontend/apply/src/app/i18n/locales/sv.json @@ -210,7 +210,7 @@ "phoneNumberInvalid": "Ange ett giltigt telefonnummer", "registerAccount": "Skapa konto", "passwordsDoNotMatch": "Lösenorden stämmer inte överens" - + }, "forgotPasswordPage": { "title": "Glömt lösenord", "description": "Skriv din mejl så skickar vi en återställningslänk.", diff --git a/frontend/apply/src/app/page.tsx b/frontend/apply/src/app/page.tsx index 48b6863..1464a1c 100644 --- a/frontend/apply/src/app/page.tsx +++ b/frontend/apply/src/app/page.tsx @@ -2,6 +2,7 @@ import { useState, useEffect } from "react"; import styles from "./page.module.css"; import ApplicationCard from "./components/ApplicationCard"; +import LoadingRam from "./components/LoadingRam"; import MyPositionCard from "./components/MyPositionCard"; import OpenPositionCard from "./components/OpenPositionCard"; import { positionAPI, applicationAPI } from "@/utils/api"; @@ -105,7 +106,7 @@ export default function Home() { )} - {loading &&

{t("common.loading")}

} + {loading && } {activeTab === "My Applications" && !loading && ( <>