LayerList indicates it is ready for display when in reality it is not

[RyanTaylor]

I am attempting to show a loading indicator in my React application while the LayerList is loading. Once loaded and ready to be displayed I want to show the LayerList. However, it seems the LayerList.viewModel.state property is changed to "ready" before the LayerList is ready to be displayed.

I can confirm this with this scenario.

1. Set up an application with the following code 

const map = new WebMap({
  portalItem: {
    id: "ef2644781da844648e8bb30ab52a02bc",
  },
});

const view = new MapView({
  container: "viewDiv",
  map: map,
});

const layerList = new LayerList({
  view,
  visibilityAppearance: "checkbox",
});

reactiveUtils.watch(
  () => layerList.viewModel.state,
  (newState, oldState) => console.log(`OldState: ${oldState} NewState: ${newState}`)
);
view.ui.add(layerList, "top-right");
​

1. In the browser, filter Network so you only see request to "/assets/panel/t9n/messages_en.json"
2. Run the application
3. Note that "ready" is established before the that aforementioned asset is loaded
4. Now block access to that resource
5. Run the application
6. Note that the LayerList will not load at all

It appears LayerList depends on (and other assets) to render. However, if this asset is not loaded the LayerList will not render at all. On slow networks such as mine, this can be a substantial (many second delay) resulting in my loading indicator (not shown in the code about) disappearing before the LayerList is ready, leaving an unsightly blank area until all the assets load.

Is there another way to determine when the LayerList is truly ready to be rendered?

[Sage_Wall]

Hi @RyanTaylor 

The LayerListViewModel can be used independently from the LayerList widget.  The view model contains all the logic but is independent of the UI of the widget itself and its LayerListViewModel.state is expected to become ready before the user interface is applied to the view model by the widget.  The widget loads its assets after the view model is ready because you might only be using the view model and not need those assets. There currently is not a state or similar property on the widget itself to know if all its assets have loaded. We are working on improving the performance of the LayerList widget and the new component

[RyanTaylor]

@Sage_Wall, thank you for the info. I suspected as much with the LayerListViewModel. It would be really helpful if the LayerList itself had a state property that indicated whether or not it was actually ready for display. Are you aware of any workarounds that would allow us to determine when the LayerList is ready to be displayed?

[Sage_Wall]

I'm not aware of any reliable workarounds.  You might be able to hack something together with request interceptors or something but it would be supper hacky and subject to break if the requests change. If you can please submit an Enhancement request thru tech support and we take take a closer look at if we can support these types of workflows.  If you don't have access you could also submit an idea here on the community site.

[RyanTaylor]

For future readers (e.g., me), I've implemented a workaround. I render my own loading spinner and the div for the LayerList at the same time in a parent div. I've set the loading spinner's z-index to -1 so it render underneath the LayerList. The spinner is there indefinitely, but when the LayerList loads it covers up the spinner, effectively looking like loading has completed.