feat: update loading animation

opengovsg · Mar 19, 2024 · f10100f · f10100f
1 parent 84df0f0
commit f10100f
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/...uilder-and-design/MagicFormBuilderModal/MagicFormBuilderModalContent/GifLoadingScreen.tsx b/...uilder-and-design/MagicFormBuilderModal/MagicFormBuilderModalContent/GifLoadingScreen.tsx
@@ -1,14 +1,28 @@
-import { ModalBody } from '@chakra-ui/react'
+import { Box, ModalBody } from '@chakra-ui/react'
 
 import { LottieAnimation } from '~templates/LottieAnimation'
 
-import loadingAnimation from './assets/loadingAnimation.json'
+import updatedLoadingAnimation from './assets/updatedLoadingAnimation.json'
 
 export const MagicFormBuilderGifLoadingScreen = (): JSX.Element => {
   return (
     <>
-      <ModalBody whiteSpace="pre-wrap">
-        <LottieAnimation animationData={loadingAnimation}></LottieAnimation>
+      <ModalBody>
+        <Box display="flex" justifyContent="center">
+          <LottieAnimation
+            animationData={updatedLoadingAnimation}
+            width="47.4rem"
+            height="22rem"
+          ></LottieAnimation>
+        </Box>
+        <Box
+          textAlign="center"
+          fontSize="1.25rem"
+          mt="2.25rem"
+          fontWeight="600"
+        >
+          Building your form... Check back later!
+        </Box>
       </ModalBody>
     </>
   )

diff --git a/...nd-design/MagicFormBuilderModal/MagicFormBuilderModalContent/assets/loadingAnimation.json b/...nd-design/MagicFormBuilderModal/MagicFormBuilderModalContent/assets/loadingAnimation.json
diff --git a/...gn/MagicFormBuilderModal/MagicFormBuilderModalContent/assets/updatedLoadingAnimation.json b/...gn/MagicFormBuilderModal/MagicFormBuilderModalContent/assets/updatedLoadingAnimation.json