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;
 
@@ -31,7 +32,8 @@ export default function Archive() {
   const [saubData, setSaubData] = useState([])
   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 [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>
-    <Row ref={chartsContainerRef}>
+    <LoaderPortal show={loader}>
-        {charts}
+      <Row ref={chartsContainerRef}>
-    </Row>
+          {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,50 +63,48 @@ 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)
   }
-
+  
-  const GetMessages = async () => {
-    setLoader(true)
-    try {
-      let begin = null
-      let end = null
-      if (range?.length > 1) {
-        begin = range[0].toISOString()
-        end = range[1].toISOString()
-      }
-      let paginatedMessages = await MessageService.getMessage(`${id}`,
-        (page - 1) * pageSize,
-        pageSize,
-        categories,
-        begin,
-        end)
-      setMessages(paginatedMessages.items.map(m => {
-        return {
-          key: m.id,
-          categoryids: categoryDictionary[m.categoryId],
-          begin: m.date,
-          ...m
-        }
-      }))
-      setPagination({
-        total: paginatedMessages.count,
-        current: Math.floor(paginatedMessages.skip / pageSize),
-      })
-    } catch (ex) {
-      notify(`Не удалось загрузить сообщения по скважине "${id}"`, 'error')
-      console.log(ex)
-    }
-    setLoader(false)
-  }
-
   useEffect(() => {
+    const GetMessages = async () => {
+      setLoader(true)
+      try {
+        let begin = null
+        let end = null
+        if (range?.length > 1) {
+          begin = range[0].toISOString()
+          end = range[1].toISOString()
+        }
+        let paginatedMessages = await MessageService.getMessage(`${id}`,
+          (page - 1) * pageSize,
+          pageSize,
+          categories,
+          begin,
+          end)
+        setMessages(paginatedMessages.items.map(m => {
+          return {
+            key: m.id,
+            categoryids: categoryDictionary[m.categoryId],
+            begin: m.date,
+            ...m
+          }
+        }))
+        setPagination({
+          total: paginatedMessages.count,
+          current: Math.floor(paginatedMessages.skip / pageSize),
+        })
+      } catch (ex) {
+        notify(`Не удалось загрузить сообщения по скважине "${id}"`, 'error')
+        console.log(ex)
+      }
+      setLoader(false)
+    }
     GetMessages()
-  }, [page, categories, range])
+  }, [id, page, categories, range])
 
   return (
     <>
@@ -129,21 +127,22 @@ export default function Messages() {
           />
         </ConfigProvider>
       </div>
-      <Table
+      <LoaderPortal show={loader}>
-        columns={columns}
+        <Table
-        dataSource={messages}
+          columns={columns}
-        rowClassName={(record) => `event_message_${record.categoryId} event_message`}
+          dataSource={messages}
-        size={'small'}
+          rowClassName={(record) => `event_message_${record.categoryId} event_message`}
-        pagination={{
+          size={'small'}
-          pageSize: pageSize,
+          pagination={{
-          showSizeChanger: false,
+            pageSize: pageSize,
-          total: pagination?.total,
+            showSizeChanger: false,
-          current: page,
+            total: pagination?.total,
-          onChange: (page) => setPage(page)
+            current: page,
-        }}
+            onChange: (page) => setPage(page)
-        rowKey={(record) => record.id}
+          }}
-      />
+          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);
 }