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