From 47c40eaf03a55961a89b9f079a436bfee1121942 Mon Sep 17 00:00:00 2001 From: Matchu Date: Mon, 21 Jun 2021 13:50:49 -0700 Subject: [PATCH] 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". --- src/app/components/PaginationToolbar.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/app/components/PaginationToolbar.js b/src/app/components/PaginationToolbar.js index 37a0f14..0d5089d 100644 --- a/src/app/components/PaginationToolbar.js +++ b/src/app/components/PaginationToolbar.js @@ -19,13 +19,20 @@ function PaginationToolbar({ isLoading, totalCount, ...props }) { const prevPageOffset = currentOffset - PER_PAGE; prevPageSearchParams.set("offset", prevPageOffset); const prevPageUrl = "?" + prevPageSearchParams.toString(); - const prevPageIsDisabled = isLoading || prevPageOffset < 0; const nextPageSearchParams = new URLSearchParams(search); const nextPageOffset = currentOffset + PER_PAGE; nextPageSearchParams.set("offset", nextPageOffset); 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( (newPageNumber) => {