feat: order creation animation (#77)

src/assets/animation/index.ts

@@ -0,0 +1 @@
+export { default as OrderCreationAnimation } from './order-creation.json';

src/pages/order-create/index.tsx

@@ -1,10 +1,12 @@
 import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Container, Heading, VStack } from '@chakra-ui/react';
+import { Player as LottiePlayer } from '@lottiefiles/react-lottie-player';
 
 import { withLandingThemeProvider } from '../../containers';
 import { OrderForm, OrderFormProps } from '../../components/order-form';
 import { landingApi } from '../../__data__/service/landing.api';
+import { OrderCreationAnimation } from '../../assets/animation';
 
 import {
   formatFormValues,
@@ -34,13 +36,24 @@ const Page: FC = () => {
       centerContent
     >
       <VStack w='full' h='full' alignItems='stretch' flexGrow={1}>
-        <Heading textAlign='center' mt={4}>
-          {t('title')}
-        </Heading>
-        <OrderForm
-          onSubmit={onOrderFormSubmit}
-          loading={createOrderMutation.isLoading}
-        />
+        {createOrderMutation.isUninitialized ? (
+          <>
+            <Heading textAlign='center' mt={4}>
+              {t('title')}
+            </Heading>
+            <OrderForm
+              onSubmit={onOrderFormSubmit}
+              loading={createOrderMutation.isLoading}
+            />
+          </>
+        ) : (
+          <>
+            <LottiePlayer autoplay loop src={OrderCreationAnimation} />
+            <Heading textAlign='center' mt={4}>
+              {t('order-creation-title')}
+            </Heading>
+          </>
+        )}
       </VStack>
     </Container>
   );