feat(v2): add loading screens for logic tab and results page

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(),
+  ],
+}

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),
@@ -183,3 +186,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'),
+}

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' }}

frontend/src/features/admin-form/create/logic/components/EmptyLogic.tsx

@@ -1,6 +1,15 @@
 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,
+  Spacer,
+  Stack,
+  Text,
+} from '@chakra-ui/react'
 
 import { GUIDE_FORM_LOGIC } from '~constants/links'
 import Button from '~components/Button'
@@ -11,7 +20,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 +37,31 @@ 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" />}
+      {isLoaded ? <Divider my="2.5rem" /> : <Skeleton h="2.5rem" />}
       <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 +72,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>

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">

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) {

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>
+)

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) => {