feat: init modal loader components

src/component/Modal/ModalLoader.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import {Modal, Spin} from "antd";
+import {observer} from 'mobx-react-lite';
+
+export const ModalLoader = observer(({isOpen, text}) => {
+    return <Modal
+        title={null}
+        footer={null}
+        visible={isOpen}
+        closable={false}
+        centered
+        style={{zIndex: 9999999999}}
+    >
+        <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column'}}>
+            <Spin size={'large'}/>
+            <span style={{marginTop: 5}}>{text || 'Loading ...'}</span>
+        </div>
+    </Modal>
+});

src/pages/App/App.js

@@ -1,12 +1,11 @@
-import React, {useEffect} from "react";
+import React, {useEffect, useState} from "react";
 import {DesktopLayout} from "./DesktopLayout";
 import {useMediaQuery} from 'react-responsive';
 import {useStore} from "../../utils/useStore";
-import {useHistory} from "react-router-dom";
-
+import {ModalLoader} from "../../component/Modal/ModalLoader";
+import {ModalLoaderContext} from "../../utils/modal";
 
 export const App = () => {
-  // TODO: add mobile layout
   const store = useStore();
   const mediaQuery = {
     isDesktop: useMediaQuery({minWidth: 1024}),
@@ -15,11 +14,23 @@ export const App = () => {
     isNotMobile: useMediaQuery({minWidth: 768}),
   };
 
+  const [modalLoading, setModalLoading] = useState(false);
+  const [modalText, setModalText] = useState(undefined);
+  const modalContextValue = {
+    setLoading: setModalLoading,
+    setText: setModalText,
+  };
+
   useEffect(() => {
     store.ui.setMediaQuery(mediaQuery);
   });
-//   const isMobileDevice = useMediaQuery({
-//     query: "(min-device-width: 480px)",
-//   });
-  return <DesktopLayout/>;
+
+  return (
+      <>
+        <ModalLoader isOpen={modalLoading} text={modalText}/>
+        <ModalLoaderContext.Provider value={modalContextValue}>
+          <DesktopLayout/>
+        </ModalLoaderContext.Provider>
+      </>
+  );
 };

src/pages/Product/Product.js

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from "react";
+import React, {useContext, useEffect, useState} from "react";
 import {Button, Card, Col, Input, Row, Select, Tabs, Upload} from "antd";
 import {FilterOutlined, PlusSquareOutlined, UploadOutlined,} from "@ant-design/icons";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
@@ -6,6 +6,7 @@ import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
 import {ProductComponent} from "../../component/ProductComponent";
 import {LINKS} from "../../routes/app";
+import {ModalLoaderContext} from "../../utils/modal";
 
 const {TabPane} = Tabs;
 const {Search} = Input;
@@ -14,11 +15,13 @@ const {Option} = Select;
 export const Product = observer(() => {
   const [isLoading, setIsLoading] = useState(false);
   const store = useStore();
+  const modalLoader = useContext(ModalLoaderContext);
 
   useEffect(() => {
     const init = async () => {
       try {
         setIsLoading(true);
+        modalLoader.setLoading(true);
         await Promise.allSettled([
           store.supplier.getData(),
           store.product.getDataCategories(),
@@ -26,6 +29,7 @@ export const Product = observer(() => {
         ]);
         await store.product.getData();
         setIsLoading(false);
+        modalLoader.setLoading(false);
       } catch (e) {
         setIsLoading(false);
       }

src/utils/modal.js

@@ -0,0 +1,3 @@
+import React from "react";
+
+export const ModalLoaderContext = React.createContext(null);