yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Loading state interrupts infinite scrolling

Browse Source
This commit is contained in:
Tom Moor
2019-08-28 21:01:35 -07:00
parent abf5b79de6
commit 79f8a41b5b
1 changed files with 6 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/components/PaginatedDocumentList.js
View File

@@ -21,6 +21,7 @@ type Props = {
class PaginatedDocumentList extends React.Component<Props> { class PaginatedDocumentList extends React.Component<Props> {
isInitiallyLoaded: boolean = false; isInitiallyLoaded: boolean = false;
@observable isLoaded: boolean = false; @observable isLoaded: boolean = false;
@observable isFetchingMore: boolean = false;
@observable isFetching: boolean = false; @observable isFetching: boolean = false;
@observable offset: number = 0; @observable offset: number = 0;
@observable allowLoadMore: boolean = true; @observable allowLoadMore: boolean = true;
@@ -57,18 +58,22 @@ class PaginatedDocumentList extends React.Component<Props> {
this.isLoaded = true; this.isLoaded = true;
this.isFetching = false; this.isFetching = false;
this.isFetchingMore = false;
}; };
@action @action
loadMoreResults = async () => { loadMoreResults = async () => {
// Don't paginate if there aren't more results or we’re in the middle of fetching // Don't paginate if there aren't more results or we’re in the middle of fetching
if (!this.allowLoadMore || this.isFetching) return; if (!this.allowLoadMore || this.isFetching) return;
this.isFetchingMore = true;
await this.fetchResults(); await this.fetchResults();
}; };
render() { render() {
const { empty, heading, documents, fetch, options, ...rest } = this.props; const { empty, heading, documents, fetch, options, ...rest } = this.props;
const showLoading = this.isFetching && !this.isInitiallyLoaded; const showLoading =
this.isFetching && !this.isFetchingMore && !this.isInitiallyLoaded;
const showEmpty = !documents.length || showLoading; const showEmpty = !documents.length || showLoading;
const showList = (this.isLoaded || this.isInitiallyLoaded) && !showLoading; const showList = (this.isLoaded || this.isInitiallyLoaded) && !showLoading;