componentOnReady() of Legend map componenet was not observed in v4.33 and 4.34

[AllenHuang]

For JS API 4.33 and 4.34

I have notice that the componentOnReady() function for map legend component was not observed during runtime. 

 let arcgisMap = document.querySelector('arcgis-map');
 let widget = document.createElement('arcgis-legend');

 arcgisMap.appendChild(widget);
 await widget.componentOnReady();

 console.log(arcgisMap.querySelector('.arcgis-legend'));

`.arcgis-legend` class is one of the style class names used for the rendered legend component element structure.

When monitoring code executing in the web browser's dev console, if you set breakpoints on lines 5 and 7, you will see that when execution is halted on line 7, the legend component has not yet been constructed, even though the component has supposedly reached ready state according to line 5. Is this a bug?

[ReneRubalcava]

In 4.33, the selector is still `.esri-legend`. And in this case, `componentOnReady` only means the component code has loaded and properties/methods of the component are available to access. It doesn't mean that the data for the legend to get created is loaded. You can use the `arcgisReady` event of the legend if you want to do this in 4.33.

In 4.34 there is a `arcgis-legend` class, but it's in the shadowRoot and can't be queried via conventional means. So that won't work.

[AllenHuang]

Hello @ReneRubalcava 

Thanks for responding so quickly. Thank you for correcting me on the class name. I am aware that the rendered component uses .esri-legend. I've been working with other components some of them uses .arcgis-<component_name> naming scheme, I got them mix up in this post.

However, to your point, where `componentOnReady` validates the component code and properties have been loaded, that doesn't seem to be the case.

The image above shows the real time capture where I stopped the map rendering after execution waited for componentOnReady() to complete. As you can see, at this point, the component should have been loaded and I should be able to capture an element with the .esri-legend class name. But only null value returned in this case.

The other component I've been working with and uses this exact code is the arcig-print component.

As you can see here, after componentOnReady() has finished executing, while there is no data as mentioned, the component DOM element of arcgis-print has been loaded into the map in this case. 

I have also tried event listening with the arcgisReady event. Same issue here. It would seem that in both componentOnReady () and arcgisReady, arcgis-legend only loads after map itself has completely rendered.

[ReneRubalcava]

Ah, I see. Yeah, the legend needs to wait for the map to load before it hydrates all children components.

In this case, it's more appropriate to wait for mapElement.viewOnReady() or listen for the map elements arcgisViewReadyChange  event.

The components arcgisReady event just let's you know it now has a view, not that the view is ready.