when is symbology visible and MapImageLayer ready

[GregoryBologna]

I am looking for a way to know when MapImageLayer symbology is visible and there's nothing pending. Adding a watch for reactiveUtils does show me that the MapImageLayer is loaded, but the symbology is still not visible for up to 5 seconds. (the view.when is also hit). I am trying to disable some widget buttons until after the map and symbology is fully loaded with nothing pending before I enable the buttons. I am also updating a few layers in listItemCreatedFunction and have a watch reactiveUtils there too, but still not helping. I'm thinking about just adding a 5 second timer if there's nothing else available.

🙄At this point my watch indicates the MapImageLayer is loaded, but there's no symbology yet.

😊At this point I can enable my widget buttons

        const mapLayerAndLabels = new MapImageLayer({
            url: mapLayerAndLabelsUrl,
            legendEnabled: true,
            visible: true,
            title: 'Map Layers & Labels',
        });
        map.add(mapLayerAndLabels);

This is in listItemCreatedFunction

        reactiveUtils.whenOnce(
            () => mapLayerAndLabels.loaded)
            .then(() => {
                console.log(`mapLayerAndLabels is loaded.`);
            });

[UndralBatsukh]

Hi there, 

You may find this blog by @ReneRubalcava useful: https://odoe.net/blog/when-are-layers-done. Use the reactiveUtils instead of watchUtils. 

[GregoryBologna]

I am.

[ReneRubalcava · Accepted solution]

You can try watching the layerView updating property.

https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html#whenOnce

view.when(async () => {
	const layerView = await view.whenLayerView(layer);
	await whenOnce(
		() => !layerView.updating
	);
	console.log("map image layer done drawing");
});

You could wait for view.updating too, it's based off the child layerviews updating property. 

[GregoryBologna]

Thank you, Rene. Your example helped. I put this together to show a loader during updating.

        view.watch('updating', async (state) => {

            let elm = document.querySelector('#pao-modal-loading');

            if (elm) elm.open = state;

        });