[8.11] [maps] fix vector tile layer with joins stuck in loading state when not visible (#170984) (#171031)

# Backport

This will backport the following commits from `main` to `8.11`:
- [[maps] fix vector tile layer with joins stuck in loading state when
not visible (#170984)](https://github.com/elastic/kibana/pull/170984)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Nathan
Reese","email":"reese.nathan@elastic.co"},"sourceCommit":{"committedDate":"2023-11-10T15:20:25Z","message":"[maps]
fix vector tile layer with joins stuck in loading state when not visible
(#170984)\n\nCloses
https://github.com/elastic/kibana/issues/170983\r\n\r\n### Test
instructions\r\n1. Download world countries geojson
from\r\nhttps://maps.elastic.co/v8.12/index.html?locale=en#file/world_countries\r\n2.
upload downloaded world countries\r\n3. create new map\r\n4. add
\"Choropleth\" layer\r\n5. Set boundaries source to \"Points, lines, and
polygons from\r\nelasticsearch\". Select world countries data view. Set
join field to\r\n\"iso2\"\r\n6. Set statistics view to kibana sample web
logs. Set join field to\r\n\"geo.src\"\r\n7. minimize layer TOC\r\n8.
save map and re-open.\r\n9. Minimized layer legend icon should stop
showing loading state once\r\nEMS base map is
loaded\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"3c0ba20369d9582e9fcff69e27d6932a0d991646","branchLabelMapping":{"^v8.12.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Presentation","Feature:Maps","v8.12.0","v8.11.1"],"number":170984,"url":"https://github.com/elastic/kibana/pull/170984","mergeCommit":{"message":"[maps]
fix vector tile layer with joins stuck in loading state when not visible
(#170984)\n\nCloses
https://github.com/elastic/kibana/issues/170983\r\n\r\n### Test
instructions\r\n1. Download world countries geojson
from\r\nhttps://maps.elastic.co/v8.12/index.html?locale=en#file/world_countries\r\n2.
upload downloaded world countries\r\n3. create new map\r\n4. add
\"Choropleth\" layer\r\n5. Set boundaries source to \"Points, lines, and
polygons from\r\nelasticsearch\". Select world countries data view. Set
join field to\r\n\"iso2\"\r\n6. Set statistics view to kibana sample web
logs. Set join field to\r\n\"geo.src\"\r\n7. minimize layer TOC\r\n8.
save map and re-open.\r\n9. Minimized layer legend icon should stop
showing loading state once\r\nEMS base map is
loaded\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"3c0ba20369d9582e9fcff69e27d6932a0d991646"}},"sourceBranch":"main","suggestedTargetBranches":["8.11"],"targetPullRequestStates":[{"branch":"main","label":"v8.12.0","labelRegex":"^v8.12.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/170984","number":170984,"mergeCommit":{"message":"[maps]
fix vector tile layer with joins stuck in loading state when not visible
(#170984)\n\nCloses
https://github.com/elastic/kibana/issues/170983\r\n\r\n### Test
instructions\r\n1. Download world countries geojson
from\r\nhttps://maps.elastic.co/v8.12/index.html?locale=en#file/world_countries\r\n2.
upload downloaded world countries\r\n3. create new map\r\n4. add
\"Choropleth\" layer\r\n5. Set boundaries source to \"Points, lines, and
polygons from\r\nelasticsearch\". Select world countries data view. Set
join field to\r\n\"iso2\"\r\n6. Set statistics view to kibana sample web
logs. Set join field to\r\n\"geo.src\"\r\n7. minimize layer TOC\r\n8.
save map and re-open.\r\n9. Minimized layer legend icon should stop
showing loading state once\r\nEMS base map is
loaded\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"3c0ba20369d9582e9fcff69e27d6932a0d991646"}},{"branch":"8.11","label":"v8.11.1","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Nathan Reese <reese.nathan@elastic.co>

x-pack/plugins/maps/public/classes/layers/layer_group/layer_group.tsx

@@ -284,6 +284,10 @@ export class LayerGroup implements ILayer {
   }
 
   isLayerLoading(zoom: number): boolean {
+    if (!this.isVisible()) {
+      return false;
+    }
+
     return this._children.some((child) => {
       return child.isLayerLoading(zoom);
     });

x-pack/plugins/maps/public/classes/layers/vector_layer/geojson_vector_layer/geojson_vector_layer.test.ts

@@ -75,6 +75,18 @@ describe('isLayerLoading', () => {
   });
 
   describe('joins', () => {
+    test('should return false when layer is not visible', () => {
+      const layer = new GeoJsonVectorLayer({
+        customIcons: [],
+        joins: [mockJoin],
+        layerDescriptor: {
+          visible: false,
+        } as unknown as VectorLayerDescriptor,
+        source: {} as unknown as IVectorSource,
+      });
+      expect(layer.isLayerLoading(1)).toBe(false);
+    });
+
     describe('source data loaded with no features', () => {
       test('should return false when join loading has not started', () => {
         const layer = new GeoJsonVectorLayer({

x-pack/plugins/maps/public/classes/layers/vector_layer/geojson_vector_layer/geojson_vector_layer.tsx

@@ -61,6 +61,10 @@ export class GeoJsonVectorLayer extends AbstractVectorLayer {
   }
 
   isLayerLoading(zoom: number) {
+    if (!this.isVisible() || !this.showAtZoomLevel(zoom)) {
+      return false;
+    }
+
     const isSourceLoading = super.isLayerLoading(zoom);
     if (isSourceLoading) {
       return true;

x-pack/plugins/maps/public/classes/layers/vector_layer/mvt_vector_layer/mvt_vector_layer.test.tsx

@@ -110,139 +110,118 @@ describe('isLayerLoading', () => {
     dataRequestMetaAtStart: undefined,
     dataRequestToken: undefined,
   };
-  test('should be true when tile loading has not started', () => {
-    const layer = new MvtVectorLayer({
-      customIcons: [],
-      layerDescriptor: {
-        __dataRequests: [sourceDataRequestDescriptor],
-      } as unknown as VectorLayerDescriptor,
-      source: {
-        getMaxZoom: () => {
-          return 24;
-        },
-        getMinZoom: () => {
-          return 0;
-        },
-      } as unknown as IVectorSource,
+  const mockSource = {
+    getMaxZoom: () => {
+      return 24;
+    },
+    getMinZoom: () => {
+      return 0;
+    },
+  } as unknown as IVectorSource;
+
+  describe('no joins', () => {
+    test('should be true when tile loading has not started', () => {
+      const layer = new MvtVectorLayer({
+        customIcons: [],
+        layerDescriptor: {
+          __dataRequests: [sourceDataRequestDescriptor],
+        } as unknown as VectorLayerDescriptor,
+        source: mockSource,
+      });
+      expect(layer.isLayerLoading(1)).toBe(true);
+    });
+
+    test('should be true when tiles are loading', () => {
+      const layer = new MvtVectorLayer({
+        customIcons: [],
+        layerDescriptor: {
+          __areTilesLoaded: false,
+          __dataRequests: [sourceDataRequestDescriptor],
+        } as unknown as VectorLayerDescriptor,
+        source: mockSource,
+      });
+      expect(layer.isLayerLoading(1)).toBe(true);
+    });
+
+    test('should be false when tiles are loaded', () => {
+      const layer = new MvtVectorLayer({
+        customIcons: [],
+        layerDescriptor: {
+          __areTilesLoaded: true,
+          __dataRequests: [sourceDataRequestDescriptor],
+        } as unknown as VectorLayerDescriptor,
+        source: mockSource,
+      });
+      expect(layer.isLayerLoading(1)).toBe(false);
     });
-    expect(layer.isLayerLoading(1)).toBe(true);
   });
 
-  test('should be true when tiles are loading', () => {
-    const layer = new MvtVectorLayer({
-      customIcons: [],
-      layerDescriptor: {
-        __areTilesLoaded: false,
-        __dataRequests: [sourceDataRequestDescriptor],
-      } as unknown as VectorLayerDescriptor,
-      source: {
-        getMaxZoom: () => {
-          return 24;
-        },
-        getMinZoom: () => {
-          return 0;
-        },
-      } as unknown as IVectorSource,
-    });
-    expect(layer.isLayerLoading(1)).toBe(true);
-  });
+  describe('joins', () => {
+    const joinDataRequestId = 'join_source_a0b0da65-5e1a-4967-9dbe-74f24391afe2';
+    const mockJoin = {
+      hasCompleteConfig: () => {
+        return true;
+      },
+      getSourceDataRequestId: () => {
+        return joinDataRequestId;
+      },
+      getRightJoinSource: () => {
+        return {} as unknown as IJoinSource;
+      },
+    } as unknown as InnerJoin;
 
-  test('should be false when tiles are loaded', () => {
-    const layer = new MvtVectorLayer({
-      customIcons: [],
-      layerDescriptor: {
-        __areTilesLoaded: true,
-        __dataRequests: [sourceDataRequestDescriptor],
-      } as unknown as VectorLayerDescriptor,
-      source: {
-        getMaxZoom: () => {
-          return 24;
-        },
-        getMinZoom: () => {
-          return 0;
-        },
-      } as unknown as IVectorSource,
+    test('should be false when layer is not visible', () => {
+      const layer = new MvtVectorLayer({
+        customIcons: [],
+        joins: [mockJoin],
+        layerDescriptor: {
+          visible: false,
+        } as unknown as VectorLayerDescriptor,
+        source: mockSource,
+      });
+      expect(layer.isLayerLoading(1)).toBe(false);
     });
-    expect(layer.isLayerLoading(1)).toBe(false);
-  });
 
-  test('should be true when tiles are loaded but join is loading', () => {
-    const layer = new MvtVectorLayer({
-      customIcons: [],
-      joins: [
-        {
-          hasCompleteConfig: () => {
-            return true;
-          },
-          getSourceDataRequestId: () => {
-            return 'join_source_a0b0da65-5e1a-4967-9dbe-74f24391afe2';
-          },
-          getRightJoinSource: () => {
-            return {} as unknown as IJoinSource;
-          },
-        } as unknown as InnerJoin,
-      ],
-      layerDescriptor: {
-        __areTilesLoaded: true,
-        __dataRequests: [
-          sourceDataRequestDescriptor,
-          {
-            dataId: 'join_source_a0b0da65-5e1a-4967-9dbe-74f24391afe2',
-            dataRequestMetaAtStart: {},
-            dataRequestToken: Symbol('join request'),
-          },
-        ],
-      } as unknown as VectorLayerDescriptor,
-      source: {
-        getMaxZoom: () => {
-          return 24;
-        },
-        getMinZoom: () => {
-          return 0;
-        },
-      } as unknown as IVectorSource,
+    test('should be true when tiles are loaded but join is loading', () => {
+      const layer = new MvtVectorLayer({
+        customIcons: [],
+        joins: [mockJoin],
+        layerDescriptor: {
+          __areTilesLoaded: true,
+          __dataRequests: [
+            sourceDataRequestDescriptor,
+            {
+              dataId: joinDataRequestId,
+              dataRequestMetaAtStart: {},
+              dataRequestToken: Symbol('join request'),
+            },
+          ],
+        } as unknown as VectorLayerDescriptor,
+        source: mockSource,
+      });
+      expect(layer.isLayerLoading(1)).toBe(true);
     });
-    expect(layer.isLayerLoading(1)).toBe(true);
-  });
 
-  test('should be false when tiles are loaded and joins are loaded', () => {
-    const layer = new MvtVectorLayer({
-      customIcons: [],
-      joins: [
-        {
-          hasCompleteConfig: () => {
-            return true;
-          },
-          getSourceDataRequestId: () => {
-            return 'join_source_a0b0da65-5e1a-4967-9dbe-74f24391afe2';
-          },
-          getRightJoinSource: () => {
-            return {} as unknown as IJoinSource;
-          },
-        } as unknown as InnerJoin,
-      ],
-      layerDescriptor: {
-        __areTilesLoaded: true,
-        __dataRequests: [
-          sourceDataRequestDescriptor,
-          {
-            data: {},
-            dataId: 'join_source_a0b0da65-5e1a-4967-9dbe-74f24391afe2',
-            dataRequestMeta: {},
-            dataRequestMetaAtStart: undefined,
-            dataRequestToken: undefined,
-          },
-        ],
-      } as unknown as VectorLayerDescriptor,
-      source: {
-        getMaxZoom: () => {
-          return 24;
-        },
-        getMinZoom: () => {
-          return 0;
-        },
-      } as unknown as IVectorSource,
+    test('should be false when tiles are loaded and joins are loaded', () => {
+      const layer = new MvtVectorLayer({
+        customIcons: [],
+        joins: [mockJoin],
+        layerDescriptor: {
+          __areTilesLoaded: true,
+          __dataRequests: [
+            sourceDataRequestDescriptor,
+            {
+              data: {},
+              dataId: joinDataRequestId,
+              dataRequestMeta: {},
+              dataRequestMetaAtStart: undefined,
+              dataRequestToken: undefined,
+            },
+          ],
+        } as unknown as VectorLayerDescriptor,
+        source: mockSource,
+      });
+      expect(layer.isLayerLoading(1)).toBe(false);
     });
-    expect(layer.isLayerLoading(1)).toBe(false);
   });
 });

x-pack/plugins/maps/public/classes/layers/vector_layer/mvt_vector_layer/mvt_vector_layer.tsx

@@ -75,6 +75,10 @@ export class MvtVectorLayer extends AbstractVectorLayer {
   }
 
   isLayerLoading(zoom: number) {
+    if (!this.isVisible() || !this.showAtZoomLevel(zoom)) {
+      return false;
+    }
+
     const isSourceLoading = super.isLayerLoading(zoom);
     return isSourceLoading ? true : this._isLoadingJoins();
   }