setStyle(URL) is a race condition - subsequent addLayer() and addSource() possibly lost

mapbox-gl-js version: 1.13.0

Steps to Trigger Behavior

// first initialise map with say 5 layers
map.setStyle('mystyle.json'); // style containing 10 layers)
console.log(map.loaded(), map.isStyleLoaded(), map.getStyle().layers.length);
map.addLayer({ type: 'background', id: 'background' });

setTimeout(()=> console.log(map.getLayer('background')), 5000);

Expected Behavior

false, false, 10 (maybe - unclear what isStyleLoaded should do exactly)

Then print out the background layer we added

Actual Behavior

true, true, 5
undefined

Super frustrating, like #8691, #9779, #2268.

After calling setStyle() (with a JSON) it's difficult/impossible to know when the new style has actually taken effect. If you immediately add new layers, there is no error, but they apparently happen before the actual style change takes place, so they get removed.

Start by reproducing the issue with the provided setStyle(), addLayer(), and addSource() sequence, then trace the style-loading lifecycle and the loaded() and isStyleLoaded() entry points. Done means additions made after setStyle() are retained and the loading state accurately reflects when the new style is ready.