fix: reverts spinner to original

frontend/src/app/components/spinner/Spinner.tsx

@@ -1,5 +1,5 @@
 import "./spinner.scss";
 
 export default function Spinner() {
-  return <div className="spinner"></div>;
+  return <span className="spinner"></span>;
 }

frontend/src/app/components/spinner/spinner.scss

@@ -1,19 +1,41 @@
-.spinner {
-  width: 2rem;
-  height: 2rem;
-  border: 0.25rem solid get-color(primary, dark);
-  border-bottom-color: transparent;
-  border-radius: 50%;
-  display: inline-block;
-  box-sizing: border-box;
-  animation: rotation 800ms linear infinite;
-}
-
-@keyframes rotation {
+@keyframes spinner-rotate {
   0% {
+    width: 64px;
+    height: 64px;
     transform: rotate(0deg);
   }
+
+  50% {
+    width: 30px;
+    height: 30px;
+    transform: rotate(180deg);
+  }
+
   100% {
+    width: 64px;
+    height: 64px;
     transform: rotate(360deg);
   }
 }
+
+.spinner {
+  width: 64px;
+  height: 64px;
+  display: block;
+  position: relative;
+  background-image: linear-gradient(
+      get-color(primary, dark) 16px,
+      transparent 0
+    ),
+    linear-gradient(get-color(primary, main) 16px, transparent 0),
+    linear-gradient(get-color(primary, main) 16px, transparent 0),
+    linear-gradient(get-color(primary, dark) 16px, transparent 0);
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
+  background-position:
+    left top,
+    left bottom,
+    right top,
+    right bottom;
+  animation: spinner-rotate 1s linear infinite;
+}

frontend/src/app/pages/uikit/UiKit.tsx

@@ -145,7 +145,10 @@ export default function UiKit() {
         </UikitBlock>
 
         <UikitBlock title="Spinner.tsx" codeBlock="<Spinner />">
-          <Spinner />
+          {/* styling inline like this to prevent the spinner from changing the height of the page while spinning */}
+          <div style={{ height: "64px" }}>
+            <Spinner />
+          </div>
         </UikitBlock>
 
         <UikitBlock title="Loading.tsx" codeBlock="<Loading />">