new LoadPortal component

src/components/LoaderPortal.jsx

@@ -0,0 +1,13 @@
+import Loader from './Loader'
+
+export default function LoaderPortal({show, children}){
+  return(
+    <div className='loader-container'>
+      <div className='loader-content'>
+        123456{/* {children} */}
+      </div>
+      {/* {show && <div className='loader-overlay'><Loader/></div>} */}
+      <div className='loader-overlay'>qqqq</div>
+      {/* {show && <Loader className='loader-overlay'/>} */}
+    </div>)
+}

src/pages/Wells.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import { WellService } from '../services/api'
-import Loader from '../components/Loader'
+import LoaderPortal from '../components/LoaderPortal'
 import { Table } from 'antd' // TreeSelect 
 import { useHistory } from 'react-router-dom'
 import notify from '../components/notify'
@@ -44,14 +44,15 @@ export default function Wells(props){
       notify('Не удалось загрузить список скважин', 'error')
       console.error(`${e}`);
     }
-    setLoader(false)
+    //setLoader(false)
   }
 
   useEffect(()=>updateWellsList(), [])
 
   return(<>
       <h2>Скважины</h2>
-      <Table 
+      <LoaderPortal show={loader}>
+        <Table 
         dataSource={wells} 
         columns={columns}
         onRow={(record) => {
@@ -59,6 +60,6 @@ export default function Wells(props){
             onClick: event => {history.push(`/well/${record.id}/`)},
           };
         }}/>
-      {loader&&<Loader/>}
+      </LoaderPortal>
     </>)
 }