Loading animation

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;
+  }
+}
+

frontend/apply/src/app/components/LoadingRam.tsx

@@ -0,0 +1,47 @@
+import styles from "./LoadingRam.module.css";
+
+export default function LoadingRam() {
+  return (
+    <div className={styles.container} aria-live="polite" aria-busy="true">
+      <svg
+        className={styles.svg}
+        viewBox="304 83 167 132"
+        role="img"
+        aria-label="Loading"
+      >
+        <title>Loading</title>
+        <g className={styles.ram}>
+          <path
+            className={styles.legFront}
+            fill="currentColor"
+            strokeWidth="0.264583"
+            d="M 397.4191,156.76134 C 398.35464,156.79439 399.30166,156.90655 400.23495,157.10914 406.26856,158.41874 407.65154,164.7376 408.57758,169.30167 409.47397,173.71952 405.06921,176.32537 404.78608,176.48778 L 404.78711,176.50484 C 404.61389,176.58377 404.49607,176.64409 404.45072,176.67846 404.27903,176.80864 403.9065,177.60075 403.62337,178.43908 L 403.10867,179.96353 404.40524,191.98244 C 405.51762,202.29455 405.06476,200.95181 405.1739,202.17916 405.2985,203.58053 409.64862,205.97974 409.47899,209.37556 409.40451,210.86686 402.29749,209.65195 400.86797,209.95241 399.24872,210.29274 396.48266,210.0207 395.17789,209.39276 393.82534,208.74181 392.91748,207.71268 392.35635,206.19397 392.12574,205.56977 390.54716,197.79636 388.84805,188.91959 L 385.75883,172.78001 386.44095,165.77578 C 387.06998,159.31693 387.16814,158.73513 387.70392,158.3013 388.02345,158.04256 388.56908,157.83105 388.91677,157.83105 389.2779,157.83105 389.65646,158.00827 389.96372,158.27547 391.90603,157.2727 394.61243,156.66218 397.4191,156.76134 Z"
+          />
+          <path
+            className={styles.legBack}
+            fill="currentColor"
+            strokeWidth="0.264583"
+            d="M 348.25518,144.5441 C 349.43858,144.59061 350.64987,144.91719 351.95625,145.66133 357.18177,148.63789 357.71094,149.56393 358.76927,151.41602 358.7997,151.46928 358.82618,151.53302 358.84936,151.6062 358.94863,151.78897 359.05182,151.9872 359.15942,152.20202 360.09917,154.0782 360.64376,156.53227 360.64202,158.88483 360.63979,161.89391 359.58061,166.56363 358.18327,169.72706 L 357.76727,170.66861 357.77449,170.6712 356.03766,173.4457 C 356.03411,173.44708 356.03112,173.44893 356.02887,173.45139 355.9804,173.50436 354.69813,175.45251 353.17944,177.78085 347.12845,187.05777 347.32781,186.35978 347.45161,197.85399 L 347.36282,203.82622 C 349.63292,204.90797 352.48896,206.68459 352.37315,209.99352 351.66306,211.08594 344.60401,209.99977 343.56298,210.26462 342.5574,210.52044 339.27678,210.45218 338.39119,210.15712 337.21208,209.76429 335.64823,208.25436 335.02241,206.90462 334.47586,205.7259 334.40495,204.57827 333.92945,189.1579 333.76802,183.92304 333.76834,180.16615 333.93048,178.77303 334.07018,177.57249 334.30468,175.60796 334.45139,174.40741 334.74045,172.04217 334.59654,170.12825 334.0271,168.76536 333.98575,168.66637 333.91153,168.53093 333.8111,168.36798 V 168.36745 L 333.81213,168.36488 C 333.62036,168.1556 331.77833,166.07073 331.71562,163.12386 331.64948,160.015 330.06198,149.56393 336.54427,147.97643 341.40599,146.78581 344.70502,144.40456 348.25518,144.5441 Z"
+          />
+          <path
+            className={styles.head}
+            fill="currentColor"
+            strokeWidth="0.562803"
+            d="M 392.59006,90.604367 V 91.167189 C 405.46704,89.539763 419.43968,90.694061 431.42338,95.908417 435.41554,97.645512 442.95524,102.05746 441.04225,107.48843 438.51125,114.67399 422.27956,119.69964 415.68032,121.0274 401.43521,123.8935 415.61267,143.04328 415.61267,143.04328 423.91664,135.82333 436.19765,130.37495 452.24706,132.34943 458.36187,133.00644 462.14206,137.20922 467.44272,139.56816 467.36176,110.22637 440.96645,89.120399 413.41374,87.27792 406.31807,86.803443 399.40146,89.04285 392.59006,90.604367 Z"
+          />
+          <path
+            fill="currentColor"
+            strokeWidth="0.264583"
+            d="M 408.54986,121.69495 C 403.16273,122.90243 397.87715,124.34433 393.52753,125.62131 393.51157,125.61681 393.50324,125.61459 393.50324,125.61459 L 393.45157,125.64354 C 393.41265,125.65497 393.37354,125.66677 393.33478,125.67817 392.79836,125.69807 392.04388,125.93839 390.90961,126.40318 388.25838,127.20823 386.11618,127.8989 384.74201,128.35192 381.96376,129.0174 380.84997,129.21295 376.2428,129.87687 370.58932,130.6916 361.82537,129.78363 355.78874,127.75764 354.44667,127.30718 350.16954,126.9052 348.17525,127.04191 345.50346,127.22503 340.75773,128.4114 338.63218,129.42782 334.02358,131.63156 330.09039,135.80658 327.35688,141.39606 325.06135,146.09001 324.28607,150.23926 324.94928,154.28365 325.60049,158.25481 326.82131,160.65262 330.21872,164.63394 335.39976,170.70541 344.3707,166.75532 355.12728,172.70217 355.88126,173.29526 358.19904,174.10727 360.68353,174.64882 364.11438,175.39666 379.23871,174.84638 381.97061,173.92484 H 381.97114 L 393.66448,173.49386 406.4797,172.83912 406.99389,172.42777 407.0099,172.63759 C 407.49232,172.41777 408.40325,172.05312 409.36686,171.69861 412.68693,170.47721 414.11912,169.71616 415.51327,168.43317 417.21001,166.87173 417.49391,166.3604 422.04104,156.67525 L 426.10901,148.01065 427.33374,142.4544 C 427.93802,139.71297 428.28984,137.13278 428.46544,136.42065 428.48203,136.39321 428.49841,136.36628 428.51505,136.33953 428.51746,136.31096 428.51333,136.28738 428.51558,136.25891 428.51656,136.25685 428.51769,136.25404 428.51867,136.25219 428.5187,136.25214 428.51605,136.25121 428.51608,136.25116 429.17936,127.82495 423.50556,124.34986 417.84443,122.86869 414.15497,121.90341 410.47092,121.78501 408.54986,121.69495 Z"
+          />
+          <path
+            className={styles.tail}
+            fill="currentColor"
+            d="M 337.50746,139.14131 C 337.50746,139.14131 329.31575,143.31747 327.38828,144.52214 325.46082,145.72679 322.9712,149.26046 322.32871,150.38483 319.92793,154.20655 317.64003,158.49042 318.15253,163.15426 318.55408,165.88481 318.55408,168.29413 317.10848,168.61539 315.6629,168.93662 313.97637,166.5273 313.73544,164.51953 311.61959,153.59118 319.31944,140.58763 328.67326,135.20608 333.97376,132.3952 336.03328,133.18427 336.03328,133.18427 Z"
+          />
+        </g>
+      </svg>
+      <div className={styles.text}>{/* TODO "Loading..." */}</div>
+    </div>
+  );
+}

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.",

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() {
         </div>
       )}
 
-      {loading && <p>{t("common.loading")}</p>}
+      {loading && <LoadingRam />}
 
       {activeTab === "My Applications" && !loading && (
         <>