add loading spinner

src/client/Containers/Calculation/index.jsx

@@ -1,37 +1,46 @@
+import { Spin } from 'antd';
 import { useStores } from 'client/hooks/useStores';
 import CalculationService from 'client/services/CalculationService';
 import { Box, Flex } from 'client/UIKit/grid';
-import React, { useEffect } from 'react';
+import initialOptionsMap from 'core/Data/initialOptionsMap';
+import React, { useEffect, useState } from 'react';
 import Results from './Results';
 import Sections from './Sections';
-import initialOptionsMap from 'core/Data/initialOptionsMap';
 
 const Calculation = () => {
+  const [ready, setReady] = useState(false);
   const { calculationStore } = useStores();
   useEffect(() => {
-    CalculationService.getInitialOptions({
-      elementsList: initialOptionsMap,
-    })
-      .then(options => {
-        calculationStore.applyOptions({ ...options });
-      })
-      .catch(err => {
-        throw err;
-      });
-
-    CalculationService.getEntityOptions({
-      entityName: 'lead',
-      fields: undefined,
-      where: undefined,
-    })
-      .then(leadOptions => {
+    Promise.all([
+      CalculationService.getInitialOptions({
+        elementsList: initialOptionsMap,
+      }),
+      CalculationService.getEntityOptions({
+        entityName: 'lead',
+        fields: undefined,
+        where: undefined,
+      }),
+    ])
+      .then(([initialOptions, leadOptions]) => {
+        calculationStore.applyOptions({ ...initialOptions });
         calculationStore.applyOptions({ selectLead: leadOptions });
+        setReady(true);
       })
       .catch(err => {
         throw err;
       });
   }, []);
 
+  if (!ready) {
+    return (
+      <Box height="100%" py="10px">
+        <Flex justifyContent="center" alignItems="center">
+          <Spin />
+        </Flex>
+      </Box>
+    );
+  }
+
   return (
     <Box mx={['0', '1%', '1%', '1.5%', '2%', '10%']}>
       <Flex flexWrap="wrap" mb="50px">