loader переделан на loaderPortal для отображения поверх обновляемого компонента

src/App.js

@@ -1,5 +1,4 @@
 import './styles/App.less'
-import React /*, { useContext, createContext, useState }*/ from "react"
 import {
   BrowserRouter as Router,
   Switch,

src/components/LoaderPortal.jsx

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

src/pages/Archive.jsx

@@ -13,6 +13,7 @@ import {generateUUID} from '../services/UidGenerator'
 import { ArchiveColumn } from '../components/ArchiveColumn'
 import moment from 'moment'
 import notify from '../components/notify'
+import LoaderPortal from '../components/LoaderPortal'
 
 const { RangePicker } = DatePicker;
 
@@ -32,6 +33,7 @@ export default function Archive() {
   const [chartsCfgs, setChartsCfgs] = useState([])
   const [rangeDate, setRangeDate] = useState([moment().subtract(3,'hours'), moment()])
   const [geometry, setGeometry] = useState({ratioRest:1, ratio1st:1, wRest:.5, w1st:.5})  
+  const [loader, setLoader] = useState(false)
   const chartsCfgsKey = 'chartsCfgs'
   const chartsContainerRef = useRef();
 
@@ -95,12 +97,14 @@ export default function Archive() {
     let interval = (rangeDate[1] - rangeDate[0]) / 1000
     let startDate = rangeDate[0].toISOString()
     
+    setLoader(true)
     DataService.getData(id, startDate, interval, 2048)
       .then(handleReceiveDataSaub)
       .catch(error => {
         notify(`Не удалось загрузить данные по скважине (${id}) c ${rangeDate[0]} по ${rangeDate[1]}`, 'error')
         console.error(error)
       })
+      .finally(()=>setLoader(false))
   }, [id, rangeDate]);
 
   let charts = null
@@ -137,8 +141,10 @@ export default function Archive() {
         value = {rangeDate}
         />
     </ConfigProvider>
+    <LoaderPortal show={loader}>
       <Row ref={chartsContainerRef}>
           {charts}
       </Row>
+    </LoaderPortal>
   </>)
 }

src/pages/LayoutPortal.jsx

@@ -1,32 +1,9 @@
 import {Layout} from 'antd'
 import PageHeader from './Header'
-// import { useState, useEffect, createContext} from 'react'
-// import { useParams } from 'react-router-dom'
 
 const {Content} = Layout
 
 export default function LayoutPortal({title, children}) {
-  // const [wells, setWells] = useState([])
-  // let { id } = useParams();
-
-  // let updateWellsList = async () => {
-  //   setLoader(true)
-  //   try {
-  //     let newWells = (await WellService.getWells()).map(w => { return { key: w.id, ...w } })
-  //     setWells(newWells)
-  //   }
-  //   catch (e) {
-  //     console.error(`${e.message}`);
-  //   }
-  //   setLoader(false)
-  // }
-
-  // useEffect(() => {
-  //   updateWellsList()
-  // }, [])
-  
-  // const WellsContext = createContext({wells});
-
   return (     
       <Content>
         <PageHeader title={title}/>

src/pages/Messages.jsx

@@ -2,7 +2,7 @@ import {Table, Select, DatePicker, ConfigProvider} from 'antd';
 import {MessageService} from '../services/api'
 import {useState, useEffect} from 'react'
 import {useParams} from 'react-router-dom'
-import Loader from '../components/Loader'
+import LoaderPortal from '../components/LoaderPortal'
 import '../styles/message.css'
 import notify from '../components/notify'
 import locale from "antd/lib/locale/ru_RU";
@@ -63,13 +63,13 @@ export default function Messages() {
 
   const [loader, setLoader] = useState(false)
 
-
   const children = filterOptions.map((line) => <Option key={line.value}>{line.label}</Option>)
 
   const onChangeRange = (range) => {
     setRange(range)
   }
   
+  useEffect(() => {
     const GetMessages = async () => {
       setLoader(true)
       try {
@@ -103,10 +103,8 @@ export default function Messages() {
       }
       setLoader(false)
     }
-
-  useEffect(() => {
     GetMessages()
-  }, [page, categories, range])
+  }, [id, page, categories, range])
 
   return (
     <>
@@ -129,6 +127,7 @@ export default function Messages() {
           />
         </ConfigProvider>
       </div>
+      <LoaderPortal show={loader}>
         <Table
           columns={columns}
           dataSource={messages}
@@ -143,7 +142,7 @@ export default function Messages() {
           }}
           rowKey={(record) => record.id}
         />
-      {loader && <Loader/>}
+      </LoaderPortal>
     </>
   )
 }

src/pages/TelemetryView.jsx

@@ -2,7 +2,7 @@ import {useState, useEffect} from 'react'
 import {useParams} from 'react-router-dom'
 import {Row, Col, Select, Table} from 'antd'
 import {ChartTimeOnline} from '../components/charts/ChartTimeOnline'
-import Loader from '../components/Loader'
+import LoaderPortal from '../components/LoaderPortal'
 import {ChartTimeOnlineFooter} from '../components/ChartTimeOnlineFooter'
 import {CustomColumn} from '../components/CustomColumn'
 import {UserOfWells} from '../components/UserOfWells'
@@ -189,7 +189,7 @@ export default function TelemetryView(props) {
   const [chartInterval, setChartInterval] = useState(600)
   const [messages, setMessages] = useState([])
 
-  const [loader] = useState(false)  // , setLoader
+  const [loader, setLoader] = useState(false)  // , setLoader
 
   const handleReceiveDataSaub = (data) => {
     if (data) {
@@ -204,20 +204,23 @@ export default function TelemetryView(props) {
   }
 
   useEffect(() => {
-    DataService.getData(id)
+    setLoader(true)
+    let promiseData = DataService.getData(id)
       .then(handleReceiveDataSaub)
       .catch((ex) => {
         notify(`Не удалось загрузить данные по скважине "${id}"`, 'error')
         console.log(ex)
       })
 
-    MessageService.getMessage(id)
+    let promiseMessages = MessageService.getMessage(id)
       .then(handleReceiveMessages)
       .catch((ex) => {
         notify(`Не удалось загрузить сообщения по скважине "${id}"`, 'error')
         console.log(ex)
       })
 
+    Promise.all([promiseData, promiseMessages]).then(()=>setLoader(false))
+
     let unSubscribeDataSaubHub = Subscribe('ReceiveDataSaub', `well_${id}`, handleReceiveDataSaub)
     let unSubscribeMessagesHub = Subscribe('ReceiveMessages', `well_${id}`, handleReceiveMessages)
     return () => {
@@ -227,14 +230,16 @@ export default function TelemetryView(props) {
   }, [id]);
 
   useEffect(() => {
+    setLoader(true)
     DataService.getData(id, null, chartInterval)
       .then(handleReceiveDataSaub)
       .catch(error => console.error(error))
+      .finally(()=>setLoader(false))
   }, [id, chartInterval]);
 
   const colSpan = 24 / (paramsGroups.length)
 
-  return (<div>
+  return (<LoaderPortal show={loader}>
     <Row style={{marginBottom: '1rem'}}>
       <Col>
         <ModeDisplay data={saubData}/>
@@ -278,6 +283,5 @@ export default function TelemetryView(props) {
       pagination={false}
       rowKey={(record) => record.id}
     />
-    {loader && <Loader/>}
+  </LoaderPortal>)
-  </div>)
 }

src/pages/Wells.jsx

@@ -44,7 +44,7 @@ export default function Wells(props){
       notify('Не удалось загрузить список скважин', 'error')
       console.error(`${e}`);
     }
-    //setLoader(false)
+    setLoader(false)
   }
 
   useEffect(()=>updateWellsList(), [])

src/styles/loader.css

@@ -1,6 +1,3 @@
-:root {
-  --columns: 12;
-}
 /* original from https://loading.io/css/ */
 
 .lds-ripple {
@@ -36,20 +33,37 @@
   }
 }
 
-
-
 .loader-container{
   display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
 }
 
 .loader-content{
-  grid-area: 1 / 1;
+  grid-column-start: 1;
+  grid-column-end: span 3;
+  grid-row-start: 1;
 }
 
 .loader-overlay{
-  grid-area: 1 / 1;
+  grid-column-start: 1;
-  /* background-color: rgba(127, 127, 127, 0.5);
+  grid-column-end: span 3;
-  border: 10px solid red; */
+  grid-row-start: 1;
-  /* justify-self: stretch;
+  place-self: center;
-  align-self: stretch; */
+  align-self: center;
+  justify-self: center;
+  z-index: 1; 
+  height: 80px;
+  width: 80px;  
+  border-radius: 40px;
+}
+
+.loader-fade{
+  grid-column-start: 1;
+  grid-column-end: span 3;
+  grid-row-start: 1;
+  background-color: rgba(255, 255, 255, 0.4);
+  align-self: stretch;
+  justify-self: stretch;
+  z-index: 1;  
+  box-shadow: 0px 0px 6px 5px rgba(255, 254, 254, 0.4);
 }