From 83210411d385d71f42b3a4e9c5e164a2215ac862 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=92=D0=BB=D0=B0=D0=B4=D0=B8=D1=81=D0=BB=D0=B0=D0=B2=20?=
 =?UTF-8?q?=D0=A7=D0=B8=D0=BA=D0=B0=D0=BB=D0=BA=D0=B8=D0=BD?=
 <vchikalkin@evoleasing.ru>
Date: Thu, 24 Sep 2020 12:20:47 +0300
Subject: [PATCH] add loading spinner

---
 src/client/Containers/Calculation/index.jsx | 45 ++++++++++++---------
 1 file changed, 27 insertions(+), 18 deletions(-)

diff --git a/src/client/Containers/Calculation/index.jsx b/src/client/Containers/Calculation/index.jsx
index 7c4cc2b..f5d13da 100644
--- a/src/client/Containers/Calculation/index.jsx
+++ b/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">