Layers mount on map in unpredictable manner

[IlyaIzr]

The issue is: some layers sometimes doesn't load on map. See this test stage case I've caught

This error happends 'cause we were trying to add source to map that wasn't done loading.
We've fixed that in willMount lifecycle hook for both generic and bivariate layers. But here it was caused by willSourceUpdate hook.

So the natural solution for me was to move fix one step higher, something like that

  private async _updateMap(
    map: ApplicationMap,
    layerData: LayerSource,
    legend: LayerLegend | null,
    isVisible: boolean,
  ) {
    if (layerData == null) return;
// adding this chunk
    if (!map.loaded()) {
      (await waitMapEvent(map, 'load'));
    }
// the wait here can become infinite
    if (this.isGeoJSONLayer(layerData)) {
      this.mountGeoJSONLayer(map, layerData, legend);
    } else {
      this.mountTileLayer(map, layerData, legend);
    }

But that wouldn't work - map won't mount layers. Now the interesting part - let's log our waitMapEvent helper

export const waitMapEvent = <T extends keyof MapEventType>(
  map: ApplicationMap,
  event: T,
) =>
  new Promise<MapEventType[T] & EventData | void>((res, rej) => {
    try {
      console.log('%c⧭ is map loaded already?', 'color: #735656', map._loaded, map.loaded());
      map.on(event, res);
    } catch (error) {
      rej(error);
    }
  });

When mounting fails following console logs can be seen

This matters hugely, because map.on('load', callback) will not run, if it was setted after the map was actually loaded.
And if we need to rely on map readyness (and we do) we need to rely on map._loaded property

In other words example above could be working with on line fix

  private async _updateMap(
    map: ApplicationMap,
    layerData: LayerSource,
    legend: LayerLegend | null,
    isVisible: boolean,
  ) {
    if (layerData == null) return;
// adding this chunk
    if (!map._loaded) {
      (await waitMapEvent(map, 'load'));
    }
// the wait here can become infinite
    if (this.isGeoJSONLayer(layerData)) {
      this.mountGeoJSONLayer(map, layerData, legend);
    } else {
      this.mountTileLayer(map, layerData, legend);
    }

[Akiyamka]

Underscore in property name means that it only for internal use of mapbox itself, and we shouldn't relay on this.
From that point of view it's ok that mapbox in first report that it ready for internal staff, then expose readyness to outside (i expect that .ready() have more checks)

[Akiyamka]

This matters hugely, because map.on('load', callback) will not run, if it was setted after the map was actually loaded.

If that was the case, the callback would never have been triggered, app will never load layers that waits until map load, right?
But and the console error says the opposite - that we started something before the map was ready

[IlyaIzr]

(i expect that .ready() have more checks)

I don't know such method for maplibre map, what am I missing?

I know that we shouldn't rely on underscore props, that's why I'm describing the problem so thoroughly:)

But and the console error says the opposite - that we started something before the map was ready

Console says we registred\assigned callback for map 'load' event and indeed it never happend. But map.loaded() said that map wasn't ready yet, so we would expect map to fire 'load' event callback.

[Akiyamka]

I don't know such method for maplibre map

Sorry i mean .loaded() of course