Feature/lazy loading

[TobiasSodertalje]

Fixes #2321

Legend images are lazy-loaded by initially rendering them with data-legend-src instead of src. When a user interacts with the legend (hover/click/focus), we convert data-legend-src to src, which triggers the actual image request. This avoids loading all legend images up front and improves initial render performance.

[Grammostola]

Appears to work rather well, for mobile users at least with the simulated touch input mode. Legends are gotten when groups are expanded then, else as soon as the cursor hovers over them.

I encountered issues with WMS layers (which is what I've tested so far):

1. If assigned to group: root the legend is never fetched
2. When using "visibleLayersControl": true with the legend control if a layer with a functioning legend is activated and then the visibleLayersControl is, the legend for the layer disappears while the visibleLayersControl is active

[steff-o]

To fix the missing root-group symbols the addLayer() function in overlays.js must be changed.
Either by forcing the lazy load src exchange when overlay is created:

const addLayer = function addLayer(layer, {
    position
  } = {}) {
    const styleName = layer.get('styleName') || null;
    const layerStyle = styleName ? viewer.getStyle(styleName) : undefined;
    const overlay = Overlay({
      layer, style: layerStyle, position, viewer, localization
    });
    const groupName = layer.get('group');
    if (rootGroupNames.includes(groupName)) {
      rootGroup.addOverlay(overlay);
      // Make sure remote symbols are loaded as root group is
      // visible from start
      activateLazyLegendImages(document.getElementById(overlay.getId()));
    } else if (!(nonGroupNames.includes(groupName))) {
      const groupCmp = groupCmps.find((cmp) => cmp.name === groupName);
      if (groupCmp) {
        groupCmp.addOverlay(overlay);
        document.getElementById(groupCmp.getId()).classList.remove('hidden');

        if (groupCmp.parent) {
          updateLegend(groupCmp);
        }
      } else {
        console.warn(`${localize('addLayerWarningGroup')} ${groupName} ${localize('addLayerWarningDNE')}`);
      }
    }
  };

or by passing lazy = false to Overlay(), which requires some refactoring to determine if it should be lazy or not before calling and passing along the lazy-flag all the way down to the function that actually cares about it.