I'm trying to display a loading spinner over my map by watching the updating status on the view. Sometimes this value is stuck on true, so the loading spinner never goes away. I've also noticed that when this happens the loading bar in the layer list widget never goes away either. The network tab in Chrome doesn't show any pending requests.
I am using version 4.13 of the JavaScript API and the feature layers are on version 10.51.
Below is some pseudo code. I've looked at the updating status of each layer view in the group layer and it is random as to which one gets stuck on true (sometimes it's more than one that gets stuck on true).
const pointsLayer = new FeatureLayer({
url: waterbodyService.points,
definitionExpression: filter,
outFields: ['*'],
renderer: pointsRenderer,
popupTemplate,
});
const linesLayer = new FeatureLayer({
url: waterbodyService.lines,
definitionExpression: filter,
outFields: ['*'],
renderer: linesRenderer,
popupTemplate,
});
const areasLayer = new FeatureLayer({
url: waterbodyService.areas,
definitionExpression: filter,
outFields: ['*'],
renderer: areasRenderer,
popupTemplate,
});
const waterbodyLayer = new GroupLayer({
id: 'waterbodyLayer',
title: 'Waterbodies',
listMode: 'hide',
visible: false,
});
waterbodyLayer.addMany([areasLayer, linesLayer, pointsLayer]);
var map = new Map({
basemap: "gray"
layers: [waterbodyLayer],
});
var mapView = new MapView({
container: "viewDiv",
map: map,
center: [-117.98118, 34.00679],
zoom: 10
});
watchUtils.whenTrue(mapView , 'updating', (updating) => {
console.log('whenTrue: ', updating);
if (!mapView .interacting) setMapLoading(true); // turn off loading spinner
});
watchUtils.whenFalse(mapView , 'updating', (updating) => {
console.log('whenFalse: ', updating);
setMapLoading(false); // turn off loading spinner
});
