Cancel unloaded tile request on zooming in across multiple zoom

CHANGELOG.md

@@ -18,6 +18,7 @@
 - Adding a `warnonce` when terrain and hillshade source are the same ([#2298](https://github.com/maplibre/maplibre-gl-js/pull/2298))
 - Remove a deprecation warning by removing an empty texture that is no longer being used in the codebase ([#2299](https://github.com/maplibre/maplibre-gl-js/pull/2299))
 - Improve initial loading performance by lazy serializing layers only when needed. ([#2306](https://github.com/maplibre/maplibre-gl-js/pull/2306))
+- Cancel unloaded tile request on zooming in across multiple zoom. ([#2377](https://github.com/maplibre/maplibre-gl-js/pull/2377))
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes

src/source/source_cache.test.ts

@@ -1237,7 +1237,85 @@ describe('SourceCache#_updateRetainedTiles', () => {
 
     });
 
-    test('adds correct leaded parent tiles for overzoomed tiles', () => {
+    test('Only retain loaded parent tile when zooming in', () => {
+        const sourceCache = createSourceCache({
+            loadTile(tile, callback) {
+                tile.state = 'loading';
+                callback();
+            }
+        });
+
+        let idealTiles = [new OverscaledTileID(9, 0, 9, 0, 0), new OverscaledTileID(9, 0, 9, 1, 0)];
+        let retained = sourceCache._updateRetainedTiles(idealTiles, 9);
+        // Parent loading tiles from z=8 not retained
+        expect(Object.keys(retained).sort()).toEqual(
+            idealTiles.map((tile) => tile.key).sort()
+        );
+
+        idealTiles = [new OverscaledTileID(10, 0, 10, 0, 0), new OverscaledTileID(10, 0, 10, 1, 0)];
+        retained = sourceCache._updateRetainedTiles(idealTiles, 10);
+        // Parent loading tiles from z=9 not retained
+        expect(Object.keys(retained).sort()).toEqual(
+            idealTiles.map((tile) => tile.key).sort()
+        );
+
+        const loadedTiles = idealTiles;
+        loadedTiles.forEach(t => {
+            sourceCache._tiles[t.key] = new Tile(t, undefined);
+            sourceCache._tiles[t.key].state = 'loaded';
+        });
+
+        idealTiles = [new OverscaledTileID(11, 0, 11, 0, 0), new OverscaledTileID(11, 0, 11, 1, 0)];
+        retained = sourceCache._updateRetainedTiles(idealTiles, 11);
+        // Parent loaded tile in the view port from z=10 was retained
+        expect(Object.keys(retained).sort()).toEqual([
+            new OverscaledTileID(10, 0, 10, 0, 0).key, // Parent loaded tile
+            new OverscaledTileID(11, 0, 11, 0, 0).key,
+            new OverscaledTileID(11, 0, 11, 1, 0).key
+        ].sort());
+
+    });
+
+    test('Only retain loaded child tile when zooming out', () => {
+        const sourceCache = createSourceCache({
+            loadTile(tile, callback) {
+                tile.state = 'loading';
+                callback();
+            }
+        });
+
+        let idealTiles = [new OverscaledTileID(7, 0, 7, 0, 0), new OverscaledTileID(7, 0, 7, 1, 0)];
+        let retained = sourceCache._updateRetainedTiles(idealTiles, 7);
+        // Client tiles from z=6 not retained
+        expect(Object.keys(retained).sort()).toEqual(
+            idealTiles.map((tile) => tile.key).sort()
+        );
+
+        idealTiles = [new OverscaledTileID(6, 0, 6, 0, 0), new OverscaledTileID(6, 0, 6, 1, 0)];
+        retained = sourceCache._updateRetainedTiles(idealTiles, 6);
+        // Client tiles from z=6 not retained
+        expect(Object.keys(retained).sort()).toEqual(
+            idealTiles.map((tile) => tile.key).sort()
+        );
+
+        const loadedTiles = idealTiles;
+        loadedTiles.forEach(t => {
+            sourceCache._tiles[t.key] = new Tile(t, undefined);
+            sourceCache._tiles[t.key].state = 'loaded';
+        });
+
+        idealTiles = [new OverscaledTileID(5, 0, 5, 0, 0), new OverscaledTileID(5, 0, 5, 1, 0)];
+        retained = sourceCache._updateRetainedTiles(idealTiles, 5);
+        // Child loaded tile in the view port from z=6 was retained
+        expect(Object.keys(retained).sort()).toEqual([
+            new OverscaledTileID(6, 0, 6, 0, 0).key,
+            new OverscaledTileID(6, 0, 6, 1, 0).key,
+            new OverscaledTileID(5, 0, 5, 0, 0).key,
+            new OverscaledTileID(5, 0, 5, 1, 0).key
+        ].sort());
+    });
+
+    test('adds correct loaded parent tiles for overzoomed tiles', () => {
         const sourceCache = createSourceCache({
             loadTile(tile, callback) {
                 tile.state = 'loading';

src/source/source_cache.ts

@@ -717,11 +717,14 @@ class SourceCache extends Evented {
                     tile = this._addTile(parentId);
                 }
                 if (tile) {
-                    retain[parentId.key] = parentId;
+                    const hasData = tile.hasData();
+                    if (parentWasRequested || hasData) {
+                        retain[parentId.key] = parentId;
+                    }
                     // Save the current values, since they're the parent of the next iteration
                     // of the parent tile ascent loop.
                     parentWasRequested = tile.wasRequested();
-                    if (tile.hasData()) break;
+                    if (hasData) break;
                 }
             }
         }