From e2d0ed18d725b8d2013d5e6ce56cf14fdb916634 Mon Sep 17 00:00:00 2001 From: Ebin Bellini Date: Fri, 15 May 2026 12:54:58 +0200 Subject: [PATCH 1/4] WIP loading bock --- .../src/app/components/LoadingRam.module.css | 109 ++++++++++++++++++ .../apply/src/app/components/LoadingRam.tsx | 50 ++++++++ frontend/apply/src/app/page.tsx | 6 +- 3 files changed, 163 insertions(+), 2 deletions(-) create mode 100644 frontend/apply/src/app/components/LoadingRam.module.css create mode 100644 frontend/apply/src/app/components/LoadingRam.tsx 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..172ebcb --- /dev/null +++ b/frontend/apply/src/app/components/LoadingRam.module.css @@ -0,0 +1,109 @@ +.container { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + min-height: 50vh; +} + +.svg { + width: 200px; + height: auto; + color: #1d6fe8; +} + +.ram { + animation: ram-sway 0.6s ease-in-out infinite; + transform-origin: center; + transform-box: fill-box; +} + +.head { + animation: head-nod 0.6s ease-in-out infinite; + transform-origin: 20% 50%; + transform-box: fill-box; +} + +.legFront { + animation: leg-front 0.6s ease-in-out infinite; + transform-origin: 50% 0%; + transform-box: fill-box; +} + +.legBack { + animation: leg-back 0.6s ease-in-out infinite; + transform-origin: 50% 0%; + transform-box: fill-box; +} + +.tail { + animation: tail-wag 0.6s ease-in-out infinite; + transform-origin: 100% 0%; + transform-box: fill-box; +} + +@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: rotate(0deg); + } + 50% { + transform: rotate(-4deg); + } +} + +@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..f87733e --- /dev/null +++ b/frontend/apply/src/app/components/LoadingRam.tsx @@ -0,0 +1,50 @@ +import styles from "./LoadingRam.module.css"; +import { useTranslation } from "react-i18next"; + +export default function LoadingRam() { + const { t, i18n } = useTranslation(); + + return ( +
+ + Loading + + + + + + + + +
{/* TODO "Loading..." */}
+
+ ); +} diff --git a/frontend/apply/src/app/page.tsx b/frontend/apply/src/app/page.tsx index 48b6863..0a0065d 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"; @@ -67,7 +68,8 @@ export default function Home() { setApplicationsError("homePage.failedToLoadApplications"); } } finally { - setLoading(false); + setTimeout(() => setLoading(false), 5000); // JUST TESTING + //setLoading(false); } }; @@ -105,7 +107,7 @@ export default function Home() { )} - {loading &&

{t("common.loading")}

} + {loading && } {activeTab === "My Applications" && !loading && ( <> From e97ab5f4f1cf135560b330de7940b5ca15397a7b Mon Sep 17 00:00:00 2001 From: Ebin Bellini Date: Wed, 20 May 2026 20:40:08 +0200 Subject: [PATCH 2/4] Improved bocken loading animation Also fixed sv.json merge error --- .../src/app/components/LoadingRam.module.css | 46 +++++++++++++++---- frontend/apply/src/app/i18n/locales/sv.json | 2 +- frontend/apply/src/app/page.tsx | 2 +- 3 files changed, 40 insertions(+), 10 deletions(-) diff --git a/frontend/apply/src/app/components/LoadingRam.module.css b/frontend/apply/src/app/components/LoadingRam.module.css index 172ebcb..b17b655 100644 --- a/frontend/apply/src/app/components/LoadingRam.module.css +++ b/frontend/apply/src/app/components/LoadingRam.module.css @@ -4,44 +4,74 @@ justify-content: center; width: 100%; min-height: 50vh; + --bocken-loading-animation-duration: 0.5s; } .svg { width: 200px; height: auto; - color: #1d6fe8; + 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: ram-sway 0.6s ease-in-out infinite; + 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: head-nod 0.6s ease-in-out infinite; + 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: leg-front 0.6s ease-in-out infinite; + 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: leg-back 0.6s ease-in-out infinite; + 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: tail-wag 0.6s ease-in-out infinite; + 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% { @@ -61,10 +91,10 @@ @keyframes head-nod { 0%, 100% { - transform: rotate(0deg); + transform: translateX(-3px, 3px) rotate(0deg); } 50% { - transform: rotate(-4deg); + transform: translate(-3px, 3px) rotate(-12deg); } } 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 0a0065d..773535d 100644 --- a/frontend/apply/src/app/page.tsx +++ b/frontend/apply/src/app/page.tsx @@ -68,7 +68,7 @@ export default function Home() { setApplicationsError("homePage.failedToLoadApplications"); } } finally { - setTimeout(() => setLoading(false), 5000); // JUST TESTING + setTimeout(() => setLoading(false), 50000); // JUST TESTING //setLoading(false); } }; From 92abe3238a37debbbd9238b7d94352ece0eda3eb Mon Sep 17 00:00:00 2001 From: Ebin Bellini Date: Wed, 20 May 2026 20:48:26 +0200 Subject: [PATCH 3/4] Removed forced loading time --- frontend/apply/src/app/page.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/frontend/apply/src/app/page.tsx b/frontend/apply/src/app/page.tsx index 773535d..1464a1c 100644 --- a/frontend/apply/src/app/page.tsx +++ b/frontend/apply/src/app/page.tsx @@ -68,8 +68,7 @@ export default function Home() { setApplicationsError("homePage.failedToLoadApplications"); } } finally { - setTimeout(() => setLoading(false), 50000); // JUST TESTING - //setLoading(false); + setLoading(false); } }; From 5005646dfe9faac50ef7f1c7a878ef0263cdc1ab Mon Sep 17 00:00:00 2001 From: Ebin Bellini Date: Wed, 20 May 2026 20:52:44 +0200 Subject: [PATCH 4/4] Remove unused import --- frontend/apply/src/app/components/LoadingRam.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/frontend/apply/src/app/components/LoadingRam.tsx b/frontend/apply/src/app/components/LoadingRam.tsx index f87733e..b90244d 100644 --- a/frontend/apply/src/app/components/LoadingRam.tsx +++ b/frontend/apply/src/app/components/LoadingRam.tsx @@ -1,9 +1,6 @@ import styles from "./LoadingRam.module.css"; -import { useTranslation } from "react-i18next"; export default function LoadingRam() { - const { t, i18n } = useTranslation(); - return (