From c89a213247f50acb85a346e74dd2b021479f10f2 Mon Sep 17 00:00:00 2001
From: Justyn Oh <justynoh@gmail.com>
Date: Mon, 15 Aug 2022 15:14:40 +0800
Subject: [PATCH 1/7] feat: add loading state for builder logic page

---
 .../create/logic/CreatePageLogicTab.tsx       | 19 +++--
 .../create/logic/components/EmptyLogic.tsx    | 72 ++++++++++++-------
 .../components/LogicContent/LogicContent.tsx  |  6 +-
 3 files changed, 57 insertions(+), 40 deletions(-)

diff --git a/frontend/src/features/admin-form/create/logic/CreatePageLogicTab.tsx b/frontend/src/features/admin-form/create/logic/CreatePageLogicTab.tsx
index c5f5d35d37..389c32f70c 100644
--- a/frontend/src/features/admin-form/create/logic/CreatePageLogicTab.tsx
+++ b/frontend/src/features/admin-form/create/logic/CreatePageLogicTab.tsx
@@ -21,9 +21,9 @@ export const CreatePageLogicTab = (): JSX.Element => {
   )
   const { isLoading, formLogics } = useAdminFormLogic()
 
-  const isEmptyLogic = useMemo(
-    () => formLogics?.length === 0 && !createOrEditData,
-    [createOrEditData, formLogics?.length],
+  const isLoadingOrEmptyLogic = useMemo(
+    () => isLoading || (formLogics?.length === 0 && !createOrEditData),
+    [createOrEditData, formLogics?.length, isLoading],
   )
 
   useEffect(() => {
@@ -32,11 +32,6 @@ export const CreatePageLogicTab = (): JSX.Element => {
     }
   }, [reset])
 
-  if (isLoading) {
-    // TODO: Some loading skeleton
-    return <div>Loading...</div>
-  }
-
   return (
     <Box flex={1} overflow="auto" bg="neutral.100">
       <Flex
@@ -45,10 +40,14 @@ export const CreatePageLogicTab = (): JSX.Element => {
       >
         <Spacer />
         <Container p={0} maxW="42.5rem">
-          {isEmptyLogic ? <EmptyLogic /> : <LogicContent />}
+          {isLoadingOrEmptyLogic ? (
+            <EmptyLogic isLoaded={!isLoading} />
+          ) : (
+            <LogicContent />
+          )}
         </Container>
         <Flex flex={1} pos="relative">
-          {!isEmptyLogic && (
+          {!isLoadingOrEmptyLogic && (
             <IconButton
               zIndex="docked"
               pos={{ base: 'fixed', md: 'sticky' }}
diff --git a/frontend/src/features/admin-form/create/logic/components/EmptyLogic.tsx b/frontend/src/features/admin-form/create/logic/components/EmptyLogic.tsx
index f211a46832..f63944a5aa 100644
--- a/frontend/src/features/admin-form/create/logic/components/EmptyLogic.tsx
+++ b/frontend/src/features/admin-form/create/logic/components/EmptyLogic.tsx
@@ -1,6 +1,14 @@
 import { useCallback } from 'react'
 import { BiPlus } from 'react-icons/bi'
-import { Divider, Flex, Grid, Icon, Stack, Text } from '@chakra-ui/react'
+import {
+  Divider,
+  Flex,
+  Grid,
+  Icon,
+  Skeleton,
+  Stack,
+  Text,
+} from '@chakra-ui/react'
 
 import { GUIDE_FORM_LOGIC } from '~constants/links'
 import Button from '~components/Button'
@@ -11,7 +19,11 @@ import { ALLOWED_FIELDS_META } from '../constants'
 
 import { LogicSvgr } from './LogicSvgr'
 
-export const EmptyLogic = (): JSX.Element => {
+interface EmptyLogicProps {
+  isLoaded: boolean
+}
+
+export const EmptyLogic = ({ isLoaded }: EmptyLogicProps): JSX.Element => {
   const setToCreating = useAdminLogicStore(
     useCallback((state) => state.setToCreating, []),
   )
@@ -24,27 +36,33 @@ export const EmptyLogic = (): JSX.Element => {
       color="secondary.500"
       pt={{ base: '0.5rem', md: '2.75rem' }}
     >
-      <Text textStyle="h2" as="h2">
-        Start creating logic for your form
-      </Text>
-      <Text textStyle="body-1" mt="1rem">
-        Show or hide fields depending on user input, or disable form submission
-        for invalid answers.{' '}
-        <Link isExternal href={GUIDE_FORM_LOGIC}>
-          Learn to work with logic
-        </Link>
-      </Text>
-      <Button
-        my="2.5rem"
-        leftIcon={<BiPlus fontSize="1.5rem" />}
-        onClick={setToCreating}
-      >
-        Add logic
-      </Button>
-      <LogicSvgr maxW="292px" />
-      <Divider my="2.5rem" />
+      <Skeleton isLoaded={isLoaded}>
+        <Text textStyle="h2" as="h2">
+          Start creating logic for your form
+        </Text>
+      </Skeleton>
+      <Skeleton isLoaded={isLoaded}>
+        <Text textStyle="body-1" mt="1rem">
+          Show or hide fields depending on user input, or disable form
+          submission for invalid answers.{' '}
+          <Link isExternal href={GUIDE_FORM_LOGIC}>
+            Learn to work with logic
+          </Link>
+        </Text>
+      </Skeleton>
+      <Skeleton my="2.5rem" isLoaded={isLoaded}>
+        <Button leftIcon={<BiPlus fontSize="1.5rem" />} onClick={setToCreating}>
+          Add logic
+        </Button>
+      </Skeleton>
+      {isLoaded ? <LogicSvgr maxW="292px" /> : <Skeleton h="230px" w="292px" />}
+      <Skeleton my="2.5rem" isLoaded={isLoaded}>
+        <Divider />
+      </Skeleton>
       <Stack spacing="1.5rem" textAlign="center" maxW="28rem">
-        <Text textStyle="subhead-3">Allowed fields</Text>
+        <Skeleton isLoaded={isLoaded}>
+          <Text textStyle="subhead-3">Allowed fields</Text>
+        </Skeleton>
         <Flex>
           <Grid
             columnGap="3.5rem"
@@ -55,10 +73,12 @@ export const EmptyLogic = (): JSX.Element => {
             }}
           >
             {ALLOWED_FIELDS_META.map(({ icon, label }) => (
-              <Stack key={label} direction="row" align="center">
-                <Icon fontSize="1rem" as={icon} />
-                <Text textStyle="body-2">{label}</Text>
-              </Stack>
+              <Skeleton isLoaded={isLoaded}>
+                <Stack key={label} direction="row" align="center">
+                  <Icon fontSize="1rem" as={icon} />
+                  <Text textStyle="body-2">{label}</Text>
+                </Stack>
+              </Skeleton>
             ))}
           </Grid>
         </Flex>
diff --git a/frontend/src/features/admin-form/create/logic/components/LogicContent/LogicContent.tsx b/frontend/src/features/admin-form/create/logic/components/LogicContent/LogicContent.tsx
index 8a826ed35a..eaeedc7c9d 100644
--- a/frontend/src/features/admin-form/create/logic/components/LogicContent/LogicContent.tsx
+++ b/frontend/src/features/admin-form/create/logic/components/LogicContent/LogicContent.tsx
@@ -12,13 +12,11 @@ import { HeaderBlock } from './HeaderBlock'
 import { LogicBlockFactory } from './LogicBlockFactory'
 import { NewLogicBlock } from './NewLogicBlock'
 
-export const LogicContent = (): JSX.Element => {
+export const LogicContent = (): JSX.Element | null => {
   const isCreatingState = useAdminLogicStore(isCreatingStateSelector)
   const { formLogics, isLoading, hasError } = useAdminFormLogic()
 
-  if (isLoading) {
-    return <div>Loading...</div>
-  }
+  if (isLoading) return null
 
   return (
     <Stack color="secondary.500" spacing="1rem">

From ceee243f4239c5a270ea17422f6048d90d06258a Mon Sep 17 00:00:00 2001
From: Justyn Oh <justynoh@gmail.com>
Date: Mon, 15 Aug 2022 15:31:10 +0800
Subject: [PATCH 2/7] feat: add loading state for results page

---
 .../responses/ResponsesPage/ResponsesPage.tsx     | 15 +++++++++++----
 .../ResponsesPage/ResponsesPageSkeleton.tsx       | 15 +++++++++++++++
 2 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/features/admin-form/responses/ResponsesPage/ResponsesPageSkeleton.tsx

diff --git a/frontend/src/features/admin-form/responses/ResponsesPage/ResponsesPage.tsx b/frontend/src/features/admin-form/responses/ResponsesPage/ResponsesPage.tsx
index 9e54f74e5e..5c6f59243d 100644
--- a/frontend/src/features/admin-form/responses/ResponsesPage/ResponsesPage.tsx
+++ b/frontend/src/features/admin-form/responses/ResponsesPage/ResponsesPage.tsx
@@ -1,19 +1,26 @@
 import { FormResponseMode } from '~shared/types/form'
 
+import { useToast } from '~hooks/useToast'
+
 import { useAdminForm } from '~features/admin-form/common/queries'
 
 import { EmailResponsesTab } from './email'
+import { ResponsesPageSkeleton } from './ResponsesPageSkeleton'
 import { StorageResponsesTab } from './storage'
 
 export const ResponsesPage = (): JSX.Element => {
   const { data: form, isLoading } = useAdminForm()
 
-  if (isLoading) {
-    return <div>Loading...</div>
-  }
+  const toast = useToast({ status: 'danger' })
+
+  if (isLoading) return <ResponsesPageSkeleton />
 
   if (!form) {
-    return <div>Error retrieving form</div>
+    toast({
+      description:
+        'There was an error retrieving your form. Please try again later.',
+    })
+    return <ResponsesPageSkeleton />
   }
 
   if (form.responseMode === FormResponseMode.Encrypt) {
diff --git a/frontend/src/features/admin-form/responses/ResponsesPage/ResponsesPageSkeleton.tsx b/frontend/src/features/admin-form/responses/ResponsesPage/ResponsesPageSkeleton.tsx
new file mode 100644
index 0000000000..940a07032e
--- /dev/null
+++ b/frontend/src/features/admin-form/responses/ResponsesPage/ResponsesPageSkeleton.tsx
@@ -0,0 +1,15 @@
+import { Box, Container, Skeleton, Stack } from '@chakra-ui/react'
+
+export const ResponsesPageSkeleton = (): JSX.Element => (
+  <Container p={0} maxW="42.5rem">
+    <Stack spacing="2rem">
+      <Skeleton h="144px" w="144px" />
+      <Skeleton h="3rem" w="310px" />
+      <Box flex={1}>
+        <Skeleton h="1rem" mb="0.5rem" />
+        <Skeleton h="1rem" />
+      </Box>
+      <Skeleton h="3rem" />
+    </Stack>
+  </Container>
+)

From 60cb4cce099c2307612ac4764929ee29be971198 Mon Sep 17 00:00:00 2001
From: Justyn Oh <justynoh@gmail.com>
Date: Mon, 15 Aug 2022 15:38:02 +0800
Subject: [PATCH 3/7] feat: stories for loading screens

---
 .../AdminFormResultsResponsesPage.stories.tsx        | 12 ++++++++++--
 .../create/logic/CreatePageLogicTab.stories.tsx      |  5 +++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/frontend/src/features/admin-form/AdminFormResultsResponsesPage.stories.tsx b/frontend/src/features/admin-form/AdminFormResultsResponsesPage.stories.tsx
index 0f879b1ca7..d0dd3b2f25 100644
--- a/frontend/src/features/admin-form/AdminFormResultsResponsesPage.stories.tsx
+++ b/frontend/src/features/admin-form/AdminFormResultsResponsesPage.stories.tsx
@@ -74,7 +74,6 @@ const Template: Story = () => {
 export const EmailForm = Template.bind({})
 
 export const EmailFormLoading = Template.bind({})
-EmailFormLoading.parameters = EmailForm.parameters
 EmailFormLoading.parameters = {
   msw: [
     ...createFormBuilderMocks({}, 0),
@@ -180,7 +179,6 @@ StorageFormMobile.parameters = {
 }
 
 export const StorageFormLoading = Template.bind({})
-StorageFormLoading.parameters = StorageForm.parameters
 StorageFormLoading.parameters = {
   msw: [
     ...createFormBuilderMocks({ responseMode: FormResponseMode.Encrypt }, 0),
@@ -190,3 +188,13 @@ StorageFormLoading.parameters = {
     getAdminFormCollaborators(),
   ],
 }
+
+export const Loading = Template.bind({})
+Loading.parameters = {
+  msw: [
+    ...createFormBuilderMocks({ responseMode: undefined }, 'infinite'),
+    getAdminFormSubmissions({ delay: 'infinite' }),
+    getUser(),
+    getAdminFormCollaborators(),
+  ],
+}
diff --git a/frontend/src/features/admin-form/create/logic/CreatePageLogicTab.stories.tsx b/frontend/src/features/admin-form/create/logic/CreatePageLogicTab.stories.tsx
index 20853eedaf..003d6652fe 100644
--- a/frontend/src/features/admin-form/create/logic/CreatePageLogicTab.stories.tsx
+++ b/frontend/src/features/admin-form/create/logic/CreatePageLogicTab.stories.tsx
@@ -183,3 +183,8 @@ export const ErrorAllDeleted = Template.bind({})
 ErrorAllDeleted.parameters = {
   msw: buildMswRoutes({ form_logics: [if_12_show_34, if_12_preventsubmit] }),
 }
+
+export const Loading = Template.bind({})
+Loading.parameters = {
+  msw: buildMswRoutes({}, 'infinite'),
+}

From 1a337400b44cc276ce2a0f51df7ce1692296f277 Mon Sep 17 00:00:00 2001
From: Justyn Oh <justynoh@gmail.com>
Date: Mon, 15 Aug 2022 16:50:48 +0800
Subject: [PATCH 4/7] fix: add infinite to delay for stories

---
 .../admin-form/create/logic/CreatePageLogicTab.stories.tsx   | 5 ++++-
 frontend/src/mocks/msw/handlers/admin-form/form.ts           | 4 ++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/src/features/admin-form/create/logic/CreatePageLogicTab.stories.tsx b/frontend/src/features/admin-form/create/logic/CreatePageLogicTab.stories.tsx
index 003d6652fe..792b8175b2 100644
--- a/frontend/src/features/admin-form/create/logic/CreatePageLogicTab.stories.tsx
+++ b/frontend/src/features/admin-form/create/logic/CreatePageLogicTab.stories.tsx
@@ -19,7 +19,10 @@ import { StoryRouter, viewports } from '~utils/storybook'
 
 import { CreatePageLogicTab } from './CreatePageLogicTab'
 
-const buildMswRoutes = (overrides?: Partial<AdminFormDto>, delay = 0) => [
+const buildMswRoutes = (
+  overrides?: Partial<AdminFormDto>,
+  delay: number | 'infinite' = 0,
+) => [
   ...createFormBuilderMocks(overrides, delay),
   createLogic(delay),
   deleteLogic(delay),
diff --git a/frontend/src/mocks/msw/handlers/admin-form/form.ts b/frontend/src/mocks/msw/handlers/admin-form/form.ts
index b1940f99d8..1f6b927ab6 100644
--- a/frontend/src/mocks/msw/handlers/admin-form/form.ts
+++ b/frontend/src/mocks/msw/handlers/admin-form/form.ts
@@ -778,7 +778,7 @@ export const getStorageSubmissionMetadataResponse = (
   )
 }
 
-export const createLogic = (delay?: number) => {
+export const createLogic = (delay?: number | 'infinite') => {
   return rest.post<FormLogic>(
     '/api/v3/admin/forms/:formId/logic',
     (req, res, ctx) => {
@@ -791,7 +791,7 @@ export const createLogic = (delay?: number) => {
   )
 }
 
-export const deleteLogic = (delay?: number) => {
+export const deleteLogic = (delay?: number | 'infinite') => {
   return rest.delete(
     '/api/v3/admin/forms/:formId/logic/:logicId',
     (_req, res, ctx) => {

From de5123cf86b5fbeba65063088ae4ec22b3c53081 Mon Sep 17 00:00:00 2001
From: Justyn Oh <justynoh@gmail.com>
Date: Mon, 15 Aug 2022 18:07:02 +0800
Subject: [PATCH 5/7] fix: revert regression to empty logic page

---
 .../admin-form/create/logic/components/EmptyLogic.tsx        | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontend/src/features/admin-form/create/logic/components/EmptyLogic.tsx b/frontend/src/features/admin-form/create/logic/components/EmptyLogic.tsx
index f63944a5aa..a15f93d7c2 100644
--- a/frontend/src/features/admin-form/create/logic/components/EmptyLogic.tsx
+++ b/frontend/src/features/admin-form/create/logic/components/EmptyLogic.tsx
@@ -6,6 +6,7 @@ import {
   Grid,
   Icon,
   Skeleton,
+  Spacer,
   Stack,
   Text,
 } from '@chakra-ui/react'
@@ -56,9 +57,7 @@ export const EmptyLogic = ({ isLoaded }: EmptyLogicProps): JSX.Element => {
         </Button>
       </Skeleton>
       {isLoaded ? <LogicSvgr maxW="292px" /> : <Skeleton h="230px" w="292px" />}
-      <Skeleton my="2.5rem" isLoaded={isLoaded}>
-        <Divider />
-      </Skeleton>
+      {isLoaded ? <Divider my="2.5rem" /> : <Skeleton h="2.5rem" />}
       <Stack spacing="1.5rem" textAlign="center" maxW="28rem">
         <Skeleton isLoaded={isLoaded}>
           <Text textStyle="subhead-3">Allowed fields</Text>

From 182347ba3f7a849a8755e71643fff53c78382041 Mon Sep 17 00:00:00 2001
From: Justyn Oh <justynoh@gmail.com>
Date: Wed, 17 Aug 2022 11:29:04 +0800
Subject: [PATCH 6/7] fix: revert logic loading screen

---
 .../create/logic/CreatePageLogicTab.tsx       | 22 +++---
 .../create/logic/components/EmptyLogic.tsx    | 71 +++++++------------
 2 files changed, 34 insertions(+), 59 deletions(-)

diff --git a/frontend/src/features/admin-form/create/logic/CreatePageLogicTab.tsx b/frontend/src/features/admin-form/create/logic/CreatePageLogicTab.tsx
index 389c32f70c..40fcf43191 100644
--- a/frontend/src/features/admin-form/create/logic/CreatePageLogicTab.tsx
+++ b/frontend/src/features/admin-form/create/logic/CreatePageLogicTab.tsx
@@ -21,16 +21,14 @@ export const CreatePageLogicTab = (): JSX.Element => {
   )
   const { isLoading, formLogics } = useAdminFormLogic()
 
-  const isLoadingOrEmptyLogic = useMemo(
-    () => isLoading || (formLogics?.length === 0 && !createOrEditData),
-    [createOrEditData, formLogics?.length, isLoading],
+  const isEmptyLogic = useMemo(
+    () => formLogics?.length === 0 && !createOrEditData,
+    [createOrEditData, formLogics?.length],
   )
 
-  useEffect(() => {
-    return () => {
-      reset()
-    }
-  }, [reset])
+  useEffect(() => reset, [reset])
+
+  if (isLoading) return <>Loading...</>
 
   return (
     <Box flex={1} overflow="auto" bg="neutral.100">
@@ -40,14 +38,10 @@ export const CreatePageLogicTab = (): JSX.Element => {
       >
         <Spacer />
         <Container p={0} maxW="42.5rem">
-          {isLoadingOrEmptyLogic ? (
-            <EmptyLogic isLoaded={!isLoading} />
-          ) : (
-            <LogicContent />
-          )}
+          {isEmptyLogic ? <EmptyLogic /> : <LogicContent />}
         </Container>
         <Flex flex={1} pos="relative">
-          {!isLoadingOrEmptyLogic && (
+          {!isEmptyLogic && (
             <IconButton
               zIndex="docked"
               pos={{ base: 'fixed', md: 'sticky' }}
diff --git a/frontend/src/features/admin-form/create/logic/components/EmptyLogic.tsx b/frontend/src/features/admin-form/create/logic/components/EmptyLogic.tsx
index a15f93d7c2..f211a46832 100644
--- a/frontend/src/features/admin-form/create/logic/components/EmptyLogic.tsx
+++ b/frontend/src/features/admin-form/create/logic/components/EmptyLogic.tsx
@@ -1,15 +1,6 @@
 import { useCallback } from 'react'
 import { BiPlus } from 'react-icons/bi'
-import {
-  Divider,
-  Flex,
-  Grid,
-  Icon,
-  Skeleton,
-  Spacer,
-  Stack,
-  Text,
-} from '@chakra-ui/react'
+import { Divider, Flex, Grid, Icon, Stack, Text } from '@chakra-ui/react'
 
 import { GUIDE_FORM_LOGIC } from '~constants/links'
 import Button from '~components/Button'
@@ -20,11 +11,7 @@ import { ALLOWED_FIELDS_META } from '../constants'
 
 import { LogicSvgr } from './LogicSvgr'
 
-interface EmptyLogicProps {
-  isLoaded: boolean
-}
-
-export const EmptyLogic = ({ isLoaded }: EmptyLogicProps): JSX.Element => {
+export const EmptyLogic = (): JSX.Element => {
   const setToCreating = useAdminLogicStore(
     useCallback((state) => state.setToCreating, []),
   )
@@ -37,31 +24,27 @@ export const EmptyLogic = ({ isLoaded }: EmptyLogicProps): JSX.Element => {
       color="secondary.500"
       pt={{ base: '0.5rem', md: '2.75rem' }}
     >
-      <Skeleton isLoaded={isLoaded}>
-        <Text textStyle="h2" as="h2">
-          Start creating logic for your form
-        </Text>
-      </Skeleton>
-      <Skeleton isLoaded={isLoaded}>
-        <Text textStyle="body-1" mt="1rem">
-          Show or hide fields depending on user input, or disable form
-          submission for invalid answers.{' '}
-          <Link isExternal href={GUIDE_FORM_LOGIC}>
-            Learn to work with logic
-          </Link>
-        </Text>
-      </Skeleton>
-      <Skeleton my="2.5rem" isLoaded={isLoaded}>
-        <Button leftIcon={<BiPlus fontSize="1.5rem" />} onClick={setToCreating}>
-          Add logic
-        </Button>
-      </Skeleton>
-      {isLoaded ? <LogicSvgr maxW="292px" /> : <Skeleton h="230px" w="292px" />}
-      {isLoaded ? <Divider my="2.5rem" /> : <Skeleton h="2.5rem" />}
+      <Text textStyle="h2" as="h2">
+        Start creating logic for your form
+      </Text>
+      <Text textStyle="body-1" mt="1rem">
+        Show or hide fields depending on user input, or disable form submission
+        for invalid answers.{' '}
+        <Link isExternal href={GUIDE_FORM_LOGIC}>
+          Learn to work with logic
+        </Link>
+      </Text>
+      <Button
+        my="2.5rem"
+        leftIcon={<BiPlus fontSize="1.5rem" />}
+        onClick={setToCreating}
+      >
+        Add logic
+      </Button>
+      <LogicSvgr maxW="292px" />
+      <Divider my="2.5rem" />
       <Stack spacing="1.5rem" textAlign="center" maxW="28rem">
-        <Skeleton isLoaded={isLoaded}>
-          <Text textStyle="subhead-3">Allowed fields</Text>
-        </Skeleton>
+        <Text textStyle="subhead-3">Allowed fields</Text>
         <Flex>
           <Grid
             columnGap="3.5rem"
@@ -72,12 +55,10 @@ export const EmptyLogic = ({ isLoaded }: EmptyLogicProps): JSX.Element => {
             }}
           >
             {ALLOWED_FIELDS_META.map(({ icon, label }) => (
-              <Skeleton isLoaded={isLoaded}>
-                <Stack key={label} direction="row" align="center">
-                  <Icon fontSize="1rem" as={icon} />
-                  <Text textStyle="body-2">{label}</Text>
-                </Stack>
-              </Skeleton>
+              <Stack key={label} direction="row" align="center">
+                <Icon fontSize="1rem" as={icon} />
+                <Text textStyle="body-2">{label}</Text>
+              </Stack>
             ))}
           </Grid>
         </Flex>

From 195f1ca2809f7a8931ebd8254d4b1c0a4bfbe49b Mon Sep 17 00:00:00 2001
From: Justyn Oh <justynoh@gmail.com>
Date: Wed, 17 Aug 2022 14:06:06 +0800
Subject: [PATCH 7/7] feat: add new loading screen for logic

---
 .../create/logic/CreatePageLogicTab.tsx       |  3 ++-
 .../create/logic/components/LogicSkeleton.tsx | 23 +++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/features/admin-form/create/logic/components/LogicSkeleton.tsx

diff --git a/frontend/src/features/admin-form/create/logic/CreatePageLogicTab.tsx b/frontend/src/features/admin-form/create/logic/CreatePageLogicTab.tsx
index 40fcf43191..9706609927 100644
--- a/frontend/src/features/admin-form/create/logic/CreatePageLogicTab.tsx
+++ b/frontend/src/features/admin-form/create/logic/CreatePageLogicTab.tsx
@@ -6,6 +6,7 @@ import IconButton from '~components/IconButton'
 
 import { EmptyLogic } from './components/EmptyLogic'
 import { LogicContent } from './components/LogicContent'
+import { LogicSkeleton } from './components/LogicSkeleton'
 import { useAdminFormLogic } from './hooks/useAdminFormLogic'
 import { useAdminLogicStore } from './adminLogicStore'
 
@@ -28,7 +29,7 @@ export const CreatePageLogicTab = (): JSX.Element => {
 
   useEffect(() => reset, [reset])
 
-  if (isLoading) return <>Loading...</>
+  if (isLoading) return <LogicSkeleton />
 
   return (
     <Box flex={1} overflow="auto" bg="neutral.100">
diff --git a/frontend/src/features/admin-form/create/logic/components/LogicSkeleton.tsx b/frontend/src/features/admin-form/create/logic/components/LogicSkeleton.tsx
new file mode 100644
index 0000000000..30bc396b3d
--- /dev/null
+++ b/frontend/src/features/admin-form/create/logic/components/LogicSkeleton.tsx
@@ -0,0 +1,23 @@
+import { Box, Container, Flex, Skeleton } from '@chakra-ui/react'
+
+export const LogicSkeleton = (): JSX.Element => {
+  return (
+    <Box flex={1} overflow="auto" bg="neutral.100">
+      <Flex
+        py={{ base: '2rem', md: '4rem' }}
+        px={{ base: '1.5rem', md: '3.75rem' }}
+      >
+        <Container p={0} maxW="42.5rem">
+          <Skeleton h="3rem" mb="0.5rem" />
+          <Skeleton h="3rem" mb="1.5rem" />
+          <Skeleton h="3rem" mb="0.5rem" />
+          <Skeleton h="3rem" mb="4rem" />
+          <Skeleton h="3rem" mb="0.5rem" />
+          <Skeleton h="3rem" mb="1.5rem" />
+          <Skeleton h="3rem" mb="0.5rem" />
+          <Skeleton h="3rem" />
+        </Container>
+      </Flex>
+    </Box>
+  )
+}