Keep prev/next enabled while pages load
Right, cool, yes, this is the thing about partial data; you need to define the loading condition as "relevant data is missing, _and_ loading is still happening".
This commit is contained in:
parent
c2ef164ff2
commit
47c40eaf03
1 changed files with 9 additions and 2 deletions
|
@ -19,13 +19,20 @@ function PaginationToolbar({ isLoading, totalCount, ...props }) {
|
||||||
const prevPageOffset = currentOffset - PER_PAGE;
|
const prevPageOffset = currentOffset - PER_PAGE;
|
||||||
prevPageSearchParams.set("offset", prevPageOffset);
|
prevPageSearchParams.set("offset", prevPageOffset);
|
||||||
const prevPageUrl = "?" + prevPageSearchParams.toString();
|
const prevPageUrl = "?" + prevPageSearchParams.toString();
|
||||||
const prevPageIsDisabled = isLoading || prevPageOffset < 0;
|
|
||||||
|
|
||||||
const nextPageSearchParams = new URLSearchParams(search);
|
const nextPageSearchParams = new URLSearchParams(search);
|
||||||
const nextPageOffset = currentOffset + PER_PAGE;
|
const nextPageOffset = currentOffset + PER_PAGE;
|
||||||
nextPageSearchParams.set("offset", nextPageOffset);
|
nextPageSearchParams.set("offset", nextPageOffset);
|
||||||
const nextPageUrl = "?" + nextPageSearchParams.toString();
|
const nextPageUrl = "?" + nextPageSearchParams.toString();
|
||||||
const nextPageIsDisabled = isLoading || nextPageOffset >= totalCount;
|
|
||||||
|
// We disable the buttons if we don't know how many total items there are,
|
||||||
|
// and therefore don't know how far navigation can go. We'll additionally
|
||||||
|
// show a loading spinner if `isLoading` is true. (But it's possible the
|
||||||
|
// buttons might be enabled, even if `isLoading` is true, because maybe
|
||||||
|
// something _else_ is loading. `isLoading` is designed to tell us whether
|
||||||
|
// waiting _might_ give us the data we need!)
|
||||||
|
const prevPageIsDisabled = totalCount == null || prevPageOffset < 0;
|
||||||
|
const nextPageIsDisabled = totalCount == null || nextPageOffset >= totalCount;
|
||||||
|
|
||||||
const goToPageNumber = React.useCallback(
|
const goToPageNumber = React.useCallback(
|
||||||
(newPageNumber) => {
|
(newPageNumber) => {
|
||||||
|
|
Loading…
Reference in a new issue