Fix MRT tiles loaded state (internal-2321)

Author: stepankuzmin

debug/render-test.html

@@ -131,7 +131,15 @@
         if (options.fadeDuration) map._isInitialLoad = false;
 
         map.repaint = true;
-        await map.once('load');
+
+        const event = await Promise.race([
+            map.once('load'),
+            new Promise((resolve) => setTimeout(resolve, 1000, {type: 'timeout'}))
+        ]);
+
+        if (event.type === 'timeout') {
+            console.error('Map load timed out after 1 second');
+        }
 
         await applyOperations(map, style.metadata.test);
 

src/source/raster_array_tile_source.ts

@@ -113,6 +113,9 @@ class RasterArrayTileSource extends RasterTileSource<'raster-array'> implements
             if (this.partial) {
                 tile.state = 'empty';
             } else {
+                if (!data) return callback(null);
+
+                tile.state = 'loaded';
                 tile._isHeaderLoaded = true;
                 tile._mrt = data;
 

src/source/source_cache.ts

@@ -131,8 +131,7 @@ class SourceCache extends Evented {
         if (!this._source.loaded()) { return false; }
         for (const t in this._tiles) {
             const tile = this._tiles[t];
-            if (tile.state !== 'loaded' && tile.state !== 'errored')
-                return false;
+            if (!tile.loaded()) return false;
         }
         return true;
     }

src/source/tile.ts

@@ -57,14 +57,14 @@ import type {VectorTileLayer} from '@mapbox/vector-tile';
 import type {ImageId, StringifiedImageId} from '../style-spec/expression/types/image_id';
 
 const CLOCK_SKEW_RETRY_TIMEOUT = 30000;
-export type TileState = // Tile data is in the process of loading.
-'loading' | // Tile data has been loaded. Tile can be rendered.
-'loaded' | // Tile data has been loaded but has no content for rendering.
-'empty' | // Tile data has been loaded and is being updated. Tile can be rendered.
-'reloading' | // Tile data has been deleted.
-'unloaded' | // Tile data was not loaded because of an error.
-'errored' | 'expired';/* Tile data was previously loaded, but has expired per its
- * HTTP headers and is in the process of refreshing. */
+export type TileState =
+    | 'loading'   // Tile data is in the process of loading.
+    | 'loaded'    // Tile data has been loaded. Tile can be rendered.
+    | 'empty'     // Tile data has been loaded but has no content for rendering.
+    | 'reloading' // Tile data has been loaded and is being updated. Tile can be rendered.
+    | 'unloaded'  // Tile data has been deleted.
+    | 'errored'   // Tile data was not loaded because of an error.
+    | 'expired';  // Tile data was previously loaded, but has expired per its HTTP headers and is in the process of refreshing.
 
 export type ExpiryData = {
     cacheControl?: string;
@@ -543,6 +543,10 @@ class Tile {
         }
     }
 
+    loaded(): boolean {
+        return this.state === 'loaded' || this.state === 'errored';
+    }
+
     hasData(): boolean {
         return this.state === 'loaded' || this.state === 'reloading' || this.state === 'expired';
     }

test/ignores/all.js

@@ -331,10 +331,7 @@ const skip = [
     "render-tests/3d-intersections/road-islands",
     "render-tests/3d-intersections/road-markups-clipping-underground",
     // Time out after 30s
-    "render-tests/3d-intersections/max-zoom-mismatch",
-
-    // https://mapbox.atlassian.net/browse/GLJS-1184
-    "render-tests/raster-array/semi-transparent-icon"
+    "render-tests/3d-intersections/max-zoom-mismatch"
 ];
 
 export default {todo, skip};