Fires multiple requests
grabbou opened this issue · comments
In my case it fires from 3 to 4 requests one after another, even with distanceToLoadMore set to 0. Adding InteractionManager.runAfterInteractions to finally in _loadMoreAsync seems to solve it, but I am not sure if that's the source of the problem.
My async handler returns promise and actually all bits are working pretty nice apart from the issue above.
Ah, okey, I am just being dumb.
When you load more content in an infinite ListView, the ListView by default will render only one row per frame. This means that for a short amount of time after loading new content, the user could still be very close to the bottom of the scroll view and may trigger a second load.
Isn't the above InteractionManager a good solution to that problems?
It could be, but I don't want to bake it in. better to leave those decisions up to the user.
Cool, so I am gonna play around with custom handler and in component state to prevent that, thanks for answer and another commit to other issue :)
@grabbou I have the same problem, and I do the same as you, use InteractionManager, but I still have the problem... Can you show me how you implement your _loadMoreAsync function and how you call it from the InfiniteListView. Thanks!
Hey, ping me on Discord tomorrow (grabbou), I need to check as it's been a while, but I definitely solved it!
@ide maybe worth demoing somewhere? I could PR that where appropriate (or maybe as an exponent demo?)
@SudoPlz In my case, by only using InteractionManager, it was not enough so I did something like that:
_onLoadMore() {
InteractionManager.runAfterInteractions(() => {
const { store, fetch } = this.props;
const { offset } = this.state.paginate;
if (store.getStatusLoadingFor('done') &&
offset === store.getOffset() &&
store.getCanLoadMore()) {
this.setState({
paginate: {
offset: store.getOffset() + store.getLimit(),
limit: store.getLimit(),
},
});
fetch && fetch(this.state.paginate, false);
}
});
}