[BUG] UI Datatable Indicator Huge Table

[jolevesq]

Is there an existing issue for this?

• [X] I have searched the existing issues

Current Behavior

When there is a huge table and the table is very slow to respond, there is no loading indicator on the layer (green and spinning). The layer is not selected before download is completed. We do not even see the skeleton.

Expected Behavior

Before downloading data, the layer selector should be in proper state (loading if needed) and the skeleton should be shown.

Steps To Reproduce

1. https://canadian-geospatial-platform.github.io/geoview/public/outlier-ESRI-maxRecordCount.html
2. Wait for "Advance Polling District Boundaries of 2019"to finish loading
3. Go to Data Table tabs
4. Click "Advance Polling District Boundaries of 2019"

Anything else?

May want to try

Performance monitoring: You can wrap your component with React.Profiler to measure rendering performance:

import React, { Profiler } from 'react';

const onRender = (id, phase, actualDuration, baseDuration, startTime, commitTime) => {
  console.log(`${id} ${phase} render at ${startTime}`);
};

const App = () => (
  <Profiler id="TABLE" onRender={onRender}>
    <TABLE />
  </Profiler>

[kaminderpal]

Issues found while working on this ticket...

When we click on layer, features are fetched and icons are created from map canvas in the file packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts and function formatFeatureInfoResult, In this function when we build promisedAllCanvasFound array, it run's the forEach loop at line#1320.

While executing this step of creating promise and looping, it hangs the UI aka unresponsive or sometime page is crashed.

To resolve this we might need to paginate the data, instead of pulling all icons at single shot.

[kaminderpal]

I tried to implement the web worker api, while implementing i found that web-worker has limitation where web-workers has no access to DOM elements.

[kaminderpal]

When i comment out the building canvas icons for each feature, building and rendering data table is fast.