Fix/infinite scroll - Githubissues

Parent PR - PR-140

Add correct loading ui.
Implement logic in effect hook as observer ref was not attaching to the last table row correctly bacause of async API call.

Why break down the logic into two useEffects?

Initialising intersection observer and attaching it to last row are dependent on seperate dependencies (onLoadMore and isLoading). In the previous useCallback approach, the init was triggered multiple times even when isLoading changed.

First useEffect: Initialises the Intersection Observer (observerRef) when the onLoadMore function is passed in props. Threshold is set to 10% i.e. this will be triggered when 10% of the row has intersected.

Second useEffect: Attaches the observer to the last row of the table, triggered whenever isLoading changes.

Issues found: here the global loader is conflicting with the infinite scroll. Functionality working fine.

Testing: Manually tested with www/example and Frontier Admin UI

raystack / apsara

Fix/infinite scroll #141