feat: init modal loader components

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);
       }