Long lag in ESRI leaflet featurelayer rendering

Question

I'm rendering flowlines from the following web server on leaflet:

"https://watersgeo.epa.gov/arcgis/rest/services/NHDPlus_NP21/NHDSnapshot_NP21/MapServer/0";

It is a complicated layer and I only turn rendering on when the zoom level is greater than 9.

95% of the time it works fine, but occasionally there are extreme lags after zooming. For example, the interface recently lagged for 21 seconds.

        const FLOWLINES_LAYER = L.esri.featureLayer({
            url: URL_NP21_FLOWLINES,
            onEachFeature: FLonEachFeature,
        });

I was profiling with performance in the DevTools and it shows a 21 second task under XHR Ready State Change-- the time traces down to arcgisToGeoJSON and convertRingstoGeoJSON.

I'm using the latest version of ESRI leaflet (3.0.12).

Two questions -- can this lag be reduced or removed?

Perhaps more importantly, how can I catch when this lag is occurring and alert the user with a "wait" mouse cursor. I would think an application that froze for 20 seconds was done. I actually don't mind the rare lag as we're asking a lot of leaflet and web services sometimes are slow. But I would strongly prefer to be able to catch this lag and alert the user to keep the faith.

Thanks

Answer 1

With respect to the second question, adding event listeners for starting loading and finishing loading will provide the application with the wait cursor.

        // Event listener for when layer starts loading
        FLOWLINES_LAYER.on('loading', function () {
            // Change cursor to 'wait' when loading starts
            document.getElementById('map').style.cursor = 'wait';
        });

        // Event listener for when layer finishes loading
        FLOWLINES_LAYER.on('load', function () {
            // Revert cursor back to default when loading finishes
            document.getElementById('map').style.cursor = '';
        });