hoist-react icon indicating copy to clipboard operation
hoist-react copied to clipboard

`GridModel.selectFirstAsync` should respect intentionally not-mounted grid component

Open PeteDarinzo opened this issue 10 months ago • 1 comments

Issue Summary: Attempting the select the first row in an intentionally not-mounted grid will cause a three second mask. A grid may be intentionally not-mounted if something is chosen to render in its place if its store is empty, for example a placeholder component.

When calling selectFirstAsync on a GridModel, it first checks its isReady property, and waits for it to become true if it isn't already. The GridModel's isReady is a trampoline from its AgGridModel's property, which is evaluated based on whether the grid component is fully initialized and mounted.

The awaiting occurs when GridModel's selectFirstAsync calls its whenReadyAsync method, which waits for isReady true, for a default of three seconds. If after the timeout, the grid is still not ready, selectFirstAsync simply returns. The primary purpose of waiting for isReady is to allow a grid component time to mount, if it wasn't already.

In some cases, an app may choose to only mount a grid if it has rows, and display another component, e.g. a placeholder instead. If the app is selecting the first row after loading, then the following will happen after loading the GridModel with no records:

  1. Load the GridModel with no rows.
  2. The grid is not rendered, and another component displayed instead.
  3. Attempt to select the first row in the grid.
  4. Since the grid is not mounted, isReady never turns true.
  5. A three second (default) mask is displayed while the GridModel waits for the grid to mount (which never happens), after which it returns.

This results in what seems like a performance issue when loading an empty grid. A quick workaround is to return in the app's doLoadAsync method after loading the GridModel, and before attempting to select the first row, if no records where loaded. A more robust fix is for selectFirstAsync to know whether the grid component is intentionally not-mounted, return if so, and only await isReady otherwise.

PeteDarinzo avatar Apr 18 '24 14:04 PeteDarinzo