feat: add layer loading indicator to tree

terrestris · Jan 4, 2023 · aafd8e1 · aafd8e1
1 parent 3e071e3
commit aafd8e1
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 4 deletions.
diff --git a/src/components/ToolMenu/LayerTree/index.less b/src/components/ToolMenu/LayerTree/index.less
@@ -19,11 +19,16 @@
       .tree-node-header {
         display: flex;
 
-        :first-child {
+        .loading-indicator {
           flex: 1;
         }
 
+        span {
+          flex: 10;
+        }
+
         .ant-dropdown-trigger {
+          flex: 1;
           align-self: center;
           // creates clickable area around svg
           padding-left: 5px;
@@ -35,7 +40,7 @@
 
       .ant-slider {
         flex: 1;
-        padding-left: 5px;
+        margin-left: 8px;
       }
 
       .layer-transparency {
@@ -44,5 +49,4 @@
       }
     }
   }
-
 }
diff --git a/src/components/ToolMenu/LayerTree/index.tsx b/src/components/ToolMenu/LayerTree/index.tsx
@@ -1,7 +1,10 @@
 import React, {
-  useState
+  useState,
+  useEffect
 } from 'react';
 
+import { Progress } from 'antd';
+
 import {
   getUid
 } from 'ol';
@@ -55,6 +58,59 @@ export const LayerTree: React.FC<LayerTreeProps> = ({
   } = useTranslation();
 
   const [visibleLegendsIds, setVisibleLegendsIds] = useState<string[]>([]);
+  const [layerTileLoadCounter, setLayerTileLoadCounter] = useState<any>({});
+
+  useEffect(() => {
+    if (!map) {
+      return;
+    }
+    const allLayers = MapUtil.getAllLayers(map);
+    allLayers.forEach(layer => {
+      if (layer instanceof OlLayer) {
+        const source = layer.getSource();
+        if (!source.hasListener('tileloadstart')) {
+          source.on('tileloadstart', () => {
+            setLayerTileLoadCounter((counter: any) => {
+              const uid = parseInt(getUid(source), 10);
+              const update = {...counter};
+              // reset when load was finished
+              if (update[uid] && update[uid].loaded >= update[uid].loading) {
+                update[uid].loading = 1;
+                update[uid].loaded = 0;
+                update[uid].percent = 0;
+                return update;
+              }
+              if (!update[uid]) {
+                update[uid] = {};
+              }
+              update[uid].loading = Number.isInteger(update[uid].loading) ?
+                update[uid].loading + 1 : 1;
+              return update;
+            });
+          });
+        }
+
+        if (!source.hasListener('tileloadend') && !source.hasListener('tileloaderror')) {
+          source.on(['tileloadend', 'tileloaderror'], () => {
+            setLayerTileLoadCounter((counter: any) => {
+              const uid = parseInt(getUid(source), 10);
+              const update = {...counter};
+              if (!update[uid]) {
+                update[uid] = {};
+              }
+              update[uid].loaded = Number.isInteger(update[uid].loaded) ?
+                update[uid].loaded + 1 : 1;
+              const percent = Math.round(update[uid].loaded / update[uid].loading * 100);
+              if (percent > update[uid].percent) {
+                update[uid].percent = percent;
+              }
+              return update;
+            });
+          });
+        }
+      }
+    });
+  });
 
   const treeFilterFunction = (layer: OlLayer<OlSource> | OlLayerGroup) => {
 
@@ -77,6 +133,8 @@ export const LayerTree: React.FC<LayerTreeProps> = ({
     const unit = mapView.getProjection().getUnits() || 'm';
     const resolution = mapView.getResolution();
     const scale = resolution ? MapUtil.getScaleForResolution(resolution, unit) : undefined;
+    const percent = layer instanceof OlLayer && getUid(layer.getSource()) ?
+      layerTileLoadCounter[getUid(layer.getSource())]?.percent : 100;
 
     if (layer instanceof OlLayerGroup) {
       return (
@@ -88,6 +146,18 @@ export const LayerTree: React.FC<LayerTreeProps> = ({
       return (
         <>
           <div className="tree-node-header">
+            <Progress
+              className='loading-indicator'
+              type="circle"
+              percent={percent}
+              format={() => ''}
+              width={16}
+              strokeWidth={20}
+              strokeColor={{
+                '0%': '#108ee9',
+                '100%': '#87d068'
+              }}
+            />
             <span>{layer.get('name')}</span>
             {
               (layer instanceof OlLayerTile || layer instanceof OlLayerImage) && (