feat: order creation animation (#77)

locales/en.json

@@ -39,6 +39,7 @@
   "dry-wash.order-create.car-body-select.options.sports-car" : "Sports-car",
   "dry-wash.order-create.car-body-select.options.other": "Other",
   "dry-wash.order-create.form.submit-button.label": "Submit",
+  "dry-wash.order-create.order-creation-title": "Creating order ...",
   "dry-wash.order-create.create-order-query.success.title": "The order is successfully created",
   "dry-wash.order-create.create-order-query.error.title": "Failed to create an order",
   "dry-wash.order-view.title": "Your order",

locales/ru.json

@@ -88,6 +88,7 @@
   "dry-wash.order-create.car-body-select.options.sports-car": "Спорткар",
   "dry-wash.order-create.car-body-select.options.other": "Другой",
   "dry-wash.order-create.form.submit-button.label": "Отправить",
+  "dry-wash.order-create.order-creation-title": "Создаем заказ ...",
   "dry-wash.order-create.create-order-query.success.title": "Заказ успешно создан",
   "dry-wash.order-create.create-order-query.error.title": "Не удалось создать заказ",
   "dry-wash.order-view.title": "Ваш заказ",

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,6 +36,8 @@ const Page: FC = () => {
       centerContent
     >
       <VStack w='full' h='full' alignItems='stretch' flexGrow={1}>
+        {createOrderMutation.isUninitialized ? (
+          <>
             <Heading textAlign='center' mt={4}>
               {t('title')}
             </Heading>
@@ -41,6 +45,15 @@ const Page: FC = () => {
               onSubmit={onOrderFormSubmit}
               loading={createOrderMutation.isLoading}
             />
+          </>
+        ) : (
+          <>
+            <LottiePlayer autoplay loop src={OrderCreationAnimation} />
+            <Heading textAlign='center' mt={4}>
+              {t('order-creation-title')}
+            </Heading>
+          </>
+        )}
       </VStack>
     </Container>
   );