fix forms stale (#419)

* feat: create loader component * fix: prevent stale data in forms
2026-08-16 12:53:32 +00:00 · 2023-05-28 22:21:31 +02:00
parent f6e524e865
commit c075f73752
19 changed files with 189 additions and 26 deletions
@@ -0,0 +1,46 @@
+@use '../../../theme/ontimeColours' as *;
+
+.screenLoader {
+  position: absolute;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-content: center;
+  top: 0;
+  background-color: $white-60;
+}
+
+$loader-size: 48px;
+
+.loader {
+  width: $loader-size;
+  height: $loader-size;
+  background: $blue-500;
+  display: inline-block;
+  border-radius: 50%;
+  box-sizing: border-box;
+  animation: animloader 1s ease-in infinite;
+}
+
+@keyframes animloader {
+  0% {
+    transform: scale(0);
+    opacity: 0.6;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+
+@keyframes animloader {
+  0% {
+    transform: scale(0);
+    opacity: 0.6;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
@@ -0,0 +1,9 @@
+import style from './ModalLoader.module.scss';
+
+export default function ModalLoader() {
+  return (
+    <div className={style.screenLoader}>
+      <span className={style.loader} />
+    </div>
+  );
+}