Исправлено наложение телеметрий при смене скважины

* Добавлено отображение загрузки графика

src/components/factory.tsx

@@ -53,7 +53,7 @@ export const copyToClipboard = (value: string, successText?: string, errorText?:
   }
 }
 
-type asyncFunction = (...args: any) => Promise<any|void>
+type asyncFunction = (signal: AbortSignal, ...args: any) => Promise<any|void>
 
 type InvokeOptions = {
   actionName?: string,
@@ -75,23 +75,30 @@ const parseApiEror = (err: unknown, options?: InvokeOptions) => {
   }
 }
 
-export const invokeWebApiWrapperAsync = async (
+export const invokeWebApiWrapperAsync = (
   funcAsync: asyncFunction,
   setShowLoader?: Dispatch<SetStateAction<boolean>>,
   errorNotifyText?: FunctionalValue<(err: unknown) => ReactNode>,
   options?: InvokeOptions,
 ) => {
+  const controller = new AbortController()
+  const signal = controller.signal
+
   setShowLoader?.(true)
-  try{
-    await funcAsync()
-  } catch (ex) {
-    if(isDev())
-      console.error(ex)
-    if (!parseApiEror(ex, options))
+  funcAsync(signal)
+    .then((data) => {
+      if (data !== false)
+        setShowLoader?.(false)
+    })
+    .catch((ex) => {
+      setShowLoader?.(false)
+      if(isDev())
+        console.error(ex)
+      if (parseApiEror(ex, options)) return
       notify(getFunctionalValue(errorNotifyText)(ex), 'error', options?.well)
-  } finally {
-    setShowLoader?.(false)
-  }
+    })
+
+  return () => controller.abort()
 }
 
 export const download = async (url: string, fileName?: string) => {

src/pages/Telemetry/TelemetryView/index.jsx

@@ -143,6 +143,7 @@ const TelemetryView = memo(() => {
   const [dataSpin, setDataSpin] = useState([])
   const [chartInterval, setChartInterval] = useState(defaultPeriod)
   const [showLoader, setShowLoader] = useState(false)
+  const [isDataLoading, setIsDataLoading] = useState(false)
   const [flowChartData, setFlowChartData] = useState([])
   const [rop, setRop] = useState(null)
   const [domain, setDomain] = useState({})
@@ -183,19 +184,23 @@ const TelemetryView = memo(() => {
   }, [spinSubject$])
 
   useEffect(() => {
-    invokeWebApiWrapperAsync(
-      async () => {
+    const cancel = invokeWebApiWrapperAsync(
+      async (signal) => {
+        if (signal.aborted) return false
         const flowChart = await DrillFlowChartService.getByIdWell(well.id)
         const dataSaub = await TelemetryDataSaubService.getData(well.id, null, chartInterval)
         const dataSpin = await TelemetryDataSpinService.getData(well.id, null, chartInterval)
+        if (signal.aborted) return false
         setFlowChartData(flowChart ?? [])
         handleDataSaub(dataSaub)
         handleDataSpin(dataSpin)
       },
-      null,
+      setIsDataLoading,
       `Не удалось получить данные`,
       { actionName: 'Получение данных по скважине', well }
     )
+
+    return () => cancel()
   }, [well, chartInterval, handleDataSpin, handleDataSaub])
 
   useEffect(() => {
@@ -282,6 +287,7 @@ const TelemetryView = memo(() => {
         </GridItem>
         <GridItem col={2} row={2} colSpan={8} rowSpan={2}>
           <D3MonitoringCharts
+            loading={!showLoader && isDataLoading}
             methods={setChartMethods}
             chartName={'monitoring'}
             datasetGroups={chartGroups}

src/pages/Well.jsx

@@ -57,6 +57,8 @@ const Well = memo(() => {
       { actionName: 'Изменение данных скважины', well }
   ), [well])
 
+  const wellContext = useMemo(() => [well, updateWell], [well, updateWell])
+
   return (
     <LayoutPortal>
       <RootPathContext.Provider value={rootPath}>
@@ -70,7 +72,7 @@ const Well = memo(() => {
           <PrivateMenu.Link content={DrillingProgram} icon={<FolderOutlined />} />
         </PrivateMenu>
 
-        <WellContext.Provider value={[well, updateWell]}>
+        <WellContext.Provider value={wellContext}>
           <Layout>
             <Content className={'site-layout-background'}>
               <Routes>