From dc92290dd09c26003f57f59eac59b9136a7f28e2 Mon Sep 17 00:00:00 2001
From: Joel Davies <joel.davies@stfc.ac.uk>
Date: Fri, 16 Aug 2024 13:16:35 +0000
Subject: [PATCH] DSEGOG-341 Update preloader

---
 src/api/records.tsx                           |  1 -
 .../preloader.component.test.tsx.snap         | 13 +++----
 src/preloader/preloader.component.tsx         | 39 +++++++++----------
 3 files changed, 25 insertions(+), 28 deletions(-)

diff --git a/src/api/records.tsx b/src/api/records.tsx
index 23cc8123..0f833fba 100644
--- a/src/api/records.tsx
+++ b/src/api/records.tsx
@@ -230,7 +230,6 @@ export const fetchRangeRecordConverterQuery = (
         if (shotnumMin || shotnumMax) {
           inputRange = { min: shotnumMin, max: shotnumMax };
         }
-        console.log('RETURNING RESULT');
         return { ...inputRange, ...response.data };
       }
     });
diff --git a/src/preloader/__snapshots__/preloader.component.test.tsx.snap b/src/preloader/__snapshots__/preloader.component.test.tsx.snap
index 001ba7c3..3aa78845 100644
--- a/src/preloader/__snapshots__/preloader.component.test.tsx.snap
+++ b/src/preloader/__snapshots__/preloader.component.test.tsx.snap
@@ -17,26 +17,25 @@ exports[`Preloader component > renders when the site is loading 1`] = `
       class="MuiBox-root css-1axvgr5"
     >
       <div
-        role="progressbar"
         style="box-sizing: border-box; padding: 10px 0px;"
       >
         <div
-          style="display: block; margin: auto; width: 230px; height: 230px; animation: rotate 10s infinite linear;"
+          class="MuiBox-root css-i7r3q1"
         >
           <i
-            style="position: absolute; display: inline-block; top: 50%; left: 50%; border: 8px solid transparent; border-top-left-radius: 140px; border-top-right-radius: 140px; border-color: #8c4799; height: 70px; width: 140px; margin-top: -70px; margin-left: -70px; animation-name: rotate; animation-iteration-count: infinite; animation-duration: 3s; animation-timing-function: cubic-bezier(.09, 0, 0, .03); transform-origin: 50% 100% 0; box-sizing: border-box;"
+            class="css-1tf6jgt"
           />
           <i
-            style="position: absolute; display: inline-block; top: 50%; left: 50%; border: 8px solid transparent; border-top-left-radius: 148px; border-top-right-radius: 148px; border-color: #1d4f91; height: 79px; width: 158px; margin-top: -79px; margin-left: -79px; animation-name: rotate; animation-iteration-count: infinite; animation-duration: 3s; animation-timing-function: cubic-bezier(.09, 0.3, 0.12, .03); transform-origin: 50% 100% 0; box-sizing: border-box;"
+            class="css-18ek20h"
           />
           <i
-            style="position: absolute; display: inline-block; top: 50%; left: 50%; border: 8px solid transparent; border-top-left-radius: 156px; border-top-right-radius: 156px; border-color: #c34613; height: 88px; width: 176px; margin-top: -88px; margin-left: -88px; animation-name: rotate; animation-iteration-count: infinite; animation-duration: 3s; animation-timing-function: cubic-bezier(.09, 0.6, 0.24, .03); transform-origin: 50% 100% 0; box-sizing: border-box;"
+            class="css-xyx6js"
           />
           <i
-            style="position: absolute; display: inline-block; top: 50%; left: 50%; border: 8px solid transparent; border-top-left-radius: 164px; border-top-right-radius: 164px; border-color: #008275; height: 97px; width: 194px; margin-top: -97px; margin-left: -97px; animation-name: rotate; animation-iteration-count: infinite; animation-duration: 3s; animation-timing-function: cubic-bezier(.09, 0.8999999999999999, 0.36, .03); transform-origin: 50% 100% 0; box-sizing: border-box;"
+            class="css-vbspw4"
           />
           <i
-            style="position: absolute; display: inline-block; top: 50%; left: 50%; border: 8px solid transparent; border-top-left-radius: 172px; border-top-right-radius: 172px; border-color: #63666a; height: 106px; width: 212px; margin-top: -106px; margin-left: -106px; animation-name: rotate; animation-iteration-count: infinite; animation-duration: 3s; animation-timing-function: cubic-bezier(.09, 1.2, 0.48, .03); transform-origin: 50% 100% 0; box-sizing: border-box;"
+            class="css-1yp6vrb"
           />
         </div>
       </div>
diff --git a/src/preloader/preloader.component.tsx b/src/preloader/preloader.component.tsx
index 9d5f324b..5e87902c 100644
--- a/src/preloader/preloader.component.tsx
+++ b/src/preloader/preloader.component.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@mui/material';
+import { Box, keyframes, styled } from '@mui/material';
 import React from 'react';
 
 const colors = ['#8C4799', '#1D4F91', '#C34613', '#008275', '#63666A'];
@@ -11,11 +11,13 @@ interface PreloaderProps {
   children: React.ReactNode;
 }
 
-interface SpinnerStyle {
-  [id: string]: string | number;
-}
+const rotate = keyframes`
+  to {
+    transform: rotateZ(360deg);
+  }
+`;
 
-const spinnerStyle = (index: number): SpinnerStyle => {
+const StyledI = styled('i')(({ index }: { index: number }) => {
   const size = innerRadius + index * 2 * (border + spacing);
 
   return {
@@ -32,7 +34,7 @@ const spinnerStyle = (index: number): SpinnerStyle => {
     width: size,
     marginTop: -size / 2,
     marginLeft: -size / 2,
-    animationName: 'rotate',
+    animationName: `${rotate}`,
     animationIterationCount: 'infinite',
     animationDuration: '3s',
     animationTimingFunction: `cubic-bezier(.09, ${0.3 * index}, ${
@@ -41,7 +43,7 @@ const spinnerStyle = (index: number): SpinnerStyle => {
     transformOrigin: '50% 100% 0',
     boxSizing: 'border-box',
   };
-};
+});
 
 const Preloader: React.FC<PreloaderProps> = (props: PreloaderProps) => (
   <div>
@@ -58,25 +60,22 @@ const Preloader: React.FC<PreloaderProps> = (props: PreloaderProps) => (
           justifyContent: 'center',
         }}
       >
-        <div
-          role="progressbar"
-          style={{ boxSizing: 'border-box', padding: '10px 0' }}
-        >
-          <div
-            style={{
+        <div style={{ boxSizing: 'border-box', padding: '10px 0' }}>
+          <Box
+            sx={{
               display: 'block',
               margin: 'auto',
               width: innerRadius + colors.length * 2 * (border + spacing),
               height: innerRadius + colors.length * 2 * (border + spacing),
-              animation: 'rotate 10s infinite linear',
+              animation: `${rotate} 10s infinite linear`,
             }}
           >
-            <i style={spinnerStyle(0)} />
-            <i style={spinnerStyle(1)} />
-            <i style={spinnerStyle(2)} />
-            <i style={spinnerStyle(3)} />
-            <i style={spinnerStyle(4)} />
-          </div>
+            <StyledI index={0} />
+            <StyledI index={1} />
+            <StyledI index={2} />
+            <StyledI index={3} />
+            <StyledI index={4} />
+          </Box>
         </div>
         <Box sx={{ color: 'text.primary' }}>Loading...</Box>
       </Box>