chore: use lottie for loading animation

opengovsg · Jan 31, 2024 · e1585ac · e1585ac
1 parent b67261e
commit e1585ac
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 1 deletion.
diff --git a/frontend/public/magicBuilderLoading.gif b/frontend/public/magicBuilderLoading.gif
diff --git a/...uilder-and-design/MagicFormBuilderModal/MagicFormBuilderModalContent/GifLoadingScreen.tsx b/...uilder-and-design/MagicFormBuilderModal/MagicFormBuilderModalContent/GifLoadingScreen.tsx
@@ -1,10 +1,14 @@
 import { ModalBody } from '@chakra-ui/react'
 
+import { LottieAnimation } from '~templates/LottieAnimation'
+
+import loadingAnimation from './assets/loadingAnimation.json'
+
 export const MagicFormBuilderGifLoadingScreen = (): JSX.Element => {
   return (
     <>
       <ModalBody whiteSpace="pre-wrap">
-        <img src="/magicBuilderLoading.gif" alt="loading gif" />
+        <LottieAnimation animationData={loadingAnimation}></LottieAnimation>
       </ModalBody>
     </>
   )

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