[DataTable] [LazyDataSource]: DataTable with LazyDataSource does not load items on scroll in certain cases. The component crashes when presets panels is present.

[siarheiyelin]

Description

It seems this bug is reproduced on any DataTable with LazyDataSource. E.g. here: https://uui.epam.com/sandbox?id=productsTableDemo

Prerequisites

Make sure the amount of rows fit on the screen is more or less big (like 30 rows or more). To achieve this, you can use browser zoom or chrome dev tools features to make logical screen height 1200px or more.

Steps to Reproduce

Use case 1

1. Open https://uui.epam.com/sandbox?id=productsTableDemo
2. Start scrolling table to the bottom really fast, without waiting until next chunk of data is fully loaded. It is better reproduced using touch pad. But it is also possible by dragging vertical scroll bar to the very bottom several times. See also the screen recording.

Actual result: Table stops requesting data from server. The placeholders are displayed forever.

Note: the component would crash in this specific scenario if the presets panel was present. To reproduce this crash, please follow use case 2 below.

Use case 2

1. Open Data Table example with Presets panel: https://uui.epam.com/docExample?theme=loveship&examplePath=tables%2FPresetsPanelBasic
2. Make sure screen heigh is big enough or use zoom out features of browser to achive this.
3. Open dev tools and set height: 100% style to the .uui-panel element to make sure it occupies all available height.

Actual result: The component crashes with the following error: https://react.dev/errors/185?invariant=185

Environment

Reproduced on any relevant example on https://uui.epam.com site

[AlekseyManetov]

First case released in 5.9.2

[NatalliaAlieva]

Case 2 moved to ticket 2510