feat: show gif when form building

opengovsg · Jan 30, 2024 · 0d94479 · 0d94479
1 parent a3a296d
commit 0d94479
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
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
@@ -0,0 +1,11 @@
+import { ModalBody } from '@chakra-ui/react'
+
+export const MagicFormBuilderGifLoadingScreen = (): JSX.Element => {
+  return (
+    <>
+      <ModalBody whiteSpace="pre-wrap">
+        <img src="/magicBuilderLoading.gif" alt="loading gif" />
+      </ModalBody>
+    </>
+  )
+}
diff --git a/...esign/MagicFormBuilderModal/MagicFormBuilderModalContent/MagicFormBuilderModalContent.tsx b/...esign/MagicFormBuilderModal/MagicFormBuilderModalContent/MagicFormBuilderModalContent.tsx
@@ -5,6 +5,7 @@ import {
   useMagicFormBuilderWizard,
 } from '../MagicFormBuilderWizardContext'
 
+import { MagicFormBuilderGifLoadingScreen } from './GifLoadingScreen'
 import { MagicFormBuilderLandingScreen } from './LandingScreen'
 import { MagicFormBuilderPdfDetailsScreen } from './PdfDetailsScreen'
 import { MagicFormBuilderPromptDetailsScreen } from './PromptDetailsScreen'
@@ -18,9 +19,11 @@ export const MagicFormBuilderModalContent = ({
 }: {
   onClose: () => void
 }) => {
-  const { direction, currentStep } = useMagicFormBuilderWizard()
+  const { direction, currentStep, isLoading } = useMagicFormBuilderWizard()
 
-  return (
+  return isLoading ? (
+    <MagicFormBuilderGifLoadingScreen />
+  ) : (
     <XMotionBox keyProp={currentStep} custom={direction}>
       {currentStep === MagicFormBuilderFlowStates.Landing && (
         <MagicFormBuilderLandingScreen onClose={onClose} />