Table intermittently shows loading state when scrolling to the end of the list

[DannyWheeler]

• [x] I have searched this repository's issues and believe that this is not a duplicate.

I'm using ...

• [x] React Grid
• [ ] React Chart
• [ ] React Scheduler

Current Behaviour

When using VirtualTable with infinite scrolling and remote data I am intermittently seeing the last results remain in the loading state (showing the placeholder background image) when scrolling to the end of the list.

It seems to happen more frequently when I have developer tools open and am inspecting one of the table elements.

Expected Behaviour

The data for the last rows are shown.

Steps to Reproduce

Link to the example that reproduces the issue: https://codesandbox.io/s/vigorous-carson-90luq (forked from the example here: https://codesandbox.io/s/r92eo)

As this is intermittent it is difficult to produce exact steps to reproduce. However it is basically a case of scrolling from the top of the list to the end, sometimes repeatedly, to see the issue.

I am testing without the codesandbox editor inline (e.g. https://90luq.csb.app/) with developer tools open.

Please note that the only changes to the example I have made are to set MAX_ROWS to 252 and add a console.log in the reducer to see the actions.

You can see from the screenshot below that the last UPDATE_QUERY action has a payload with skip=200&take=50 even though I am scrolled to the end of the list, where I would expect to have another UPDATE_QUERY with skip=250&take=2.

Screenshots

Environment

The example I've provided is forked from the offical demo here: https://codesandbox.io/s/r92eo

I can reproduce the issue here: https://90luq.csb.app/

I have a hunch that having developer tools open makes the issue more frequent.

    "react-dom": "latest",
    "react": "^16.14.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/core": "^4.11.0",
    "@devexpress/dx-react-grid-material-ui": "2.7.3",
    "@devexpress/dx-react-grid": "2.7.3",
    "@devexpress/dx-react-core": "2.7.3"

• devextreme-reactive: xxx
• react: xxx
• browser: xxx
• bootstrap: none
• react-bootstrap: none
• material-ui: none

[DannyWheeler]

I have also noticed that sometimes the loading placeholder is displayed for all rows, not just the last two:

This is with the codesandbox example provided above, same steps to reproduce.

[LazyLahtak]

Hi @DannyWheeler,

Thank you for your interest in our React Grid! I couldn't reproduce this issue. I set `MAX_ROWS' to 252 and tried to scroll the table with and without React DevTools. Sometimes I see the loading state, but in a couple of moments, rows are loaded. Is this the only change you have made?

Also, I couldn't open your example (https://90luq.csb.app/). Could you fork my example to reproduce the issue? If so, could you describe the order of your actions?

[DannyWheeler]

Hi @LazyLahtak, thanks for your response.

I've forked your example as suggested and was able to reproduce the issue again. I'm not sure what happened to my original example but here is the latest: https://codesandbox.io/s/hungry-ptolemy-1jwmm

And here is a screenshot of the reproduced issue in the above fork:

My exact steps were:

1. Open the demo in full screen mode (e.g. without the CodeSandbox inline editor - https://1jwmm.csb.app/)
2. After page is loaded and developer tools is open, scroll all the way to the end of the list - see all rows up to 252 as expected.
3. Use inspect element in developer tools to inspect the first tr element in the tbody containing the data - see multiple tr's associated with each row in the viewport as expected.
4. Scroll to the top of the grid, and back down to the end (quickly - while loading state is still visible in the grid). This is where the issue occurs intermittently so you may have to try a few times. When reaching the end of the list, the loading state shows and remains.

As you can see from the console in the screenshot, the last action was UPDATE_ROWS with a payload containing skip 150 and rows having an array of 50 elements. At the point of scrolling to the end of the grid I would have expected another START_LOADING action to be fired to get the last remaining 2 elements.

[LazyLahtak]

Thank you for the clarification. I reproduced the issue.