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
});
Hi Caleb, sorry to hear about the trouble. I tried to make a similar app, but could not reproduce the issue. Is there any commonality, like it only happens at home or at work, or on a certain wifi network, that makes it easier to reproduce? And if you remove the spinner part, do the console.log statements still follow the same pattern?
test app to repro
Hi Noah,
The console.log statements do follow the same pattern. I will get a true saying the layers are loading, but I never get the false saying the layers finished loading.
I modified your codepen to use feature layers, 4.13 API and added logic for zooming into the extent of the features. It looks like my zoom logic is what is causing the infinite loading spinner issue. This issue is intermittent, so you may need to refresh the page a few times. Is there a better way of zooming to the extent of all of the features that doesn't have this issue?
Looking at the codepen, I see that when the app hangs, there are some requests pending to the firestore.googleapis.com, which may or may not be related to codepen itself.
One idea is to wait for the layer to be ready instead of waiting for the view to be ready, like in this example:
ArcGIS API for JavaScript Sandbox
featureLayer.when(function() {
featureLayer.definitionExpression = createDefinitionExpression("");
zoomToLayer(featureLayer);
});
I updated my codepen (https://codepen.io/cschwind/pen/LYYQrmE ) to check the layers prior to zooming and I'm still seeing the same issue.
I tried your latest codepen a bunch of times, and it worked fine for me every time. Sorry, not sure what else to suggest. If you have the ability, I would recommend contacting Esri Support and see if they are better able to reproduce the issue.