From f839e0c35dfad66f72f5703bf7b870122e7c1612 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Wed, 2 Mar 2022 21:07:35 +0800
Subject: [PATCH] ClaimList: add default page-load indicator | Apply for Search
 and Following-Manage

Clients can still choose to roll their own way of showing "is fetching", like how ClaimListDiscover displays a whole bunch of placeholder tiles. This just serves as a default.
---
 ui/component/claimList/view.jsx          | 8 ++++++++
 ui/page/channelsFollowingManage/view.jsx | 9 ++++++++-
 ui/page/search/view.jsx                  | 1 +
 ui/scss/component/_spinner.scss          | 4 ++++
 4 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/ui/component/claimList/view.jsx b/ui/component/claimList/view.jsx
index 3e98b18ce..840f5067f 100644
--- a/ui/component/claimList/view.jsx
+++ b/ui/component/claimList/view.jsx
@@ -25,6 +25,7 @@ type Props = {
   header: Node | boolean,
   headerAltControls: Node,
   loading: boolean,
+  useLoadingSpinner?: boolean, // use built-in spinner when 'loading' is true. Else, roll your own at client-side.
   type: string,
   activeUri?: string,
   empty?: string,
@@ -65,6 +66,7 @@ export default function ClaimList(props: Props) {
     prefixUris,
     headerAltControls,
     loading,
+    useLoadingSpinner,
     persistedStorageKey,
     empty,
     defaultSort,
@@ -200,6 +202,7 @@ export default function ClaimList(props: Props) {
             swipeLayout={swipeLayout}
           />
         ))}
+      {loading && useLoadingSpinner && <ClaimPreviewTile placeholder="loading" swipeLayout={swipeLayout} />}
       {!timedOut && urisLength === 0 && !loading && <div className="empty main--empty">{empty || noResultMsg}</div>}
       {timedOut && timedOutMessage && <div className="empty main--empty">{timedOutMessage}</div>}
     </section>
@@ -289,6 +292,11 @@ export default function ClaimList(props: Props) {
 
       {!timedOut && urisLength === 0 && !loading && <div className="empty empty--centered">{empty || noResultMsg}</div>}
       {!loading && timedOut && timedOutMessage && <div className="empty empty--centered">{timedOutMessage}</div>}
+      {loading && useLoadingSpinner && (
+        <div className="spinnerArea--centered">
+          <Spinner type="small" />
+        </div>
+      )}
     </section>
   );
 }
diff --git a/ui/page/channelsFollowingManage/view.jsx b/ui/page/channelsFollowingManage/view.jsx
index 68600a223..399f50474 100644
--- a/ui/page/channelsFollowingManage/view.jsx
+++ b/ui/page/channelsFollowingManage/view.jsx
@@ -39,6 +39,7 @@ export default function ChannelsFollowingManage(props: Props) {
   // Infinite-scroll handling. 'page' is 0-indexed.
   const [page, setPage] = React.useState(-1);
   const lastPage = Math.max(0, Math.ceil(uris.length / FOLLOW_PAGE_SIZE) - 1);
+  const [loadingPage, setLoadingPage] = React.useState(false);
 
   async function resolveUris(uris) {
     return doResolveUris(uris, true, false);
@@ -52,7 +53,11 @@ export default function ChannelsFollowingManage(props: Props) {
 
   function bumpPage() {
     if (page < lastPage) {
-      resolveNextPage(uris, page).finally(() => setPage(page + 1));
+      setLoadingPage(true);
+      resolveNextPage(uris, page).finally(() => {
+        setLoadingPage(false);
+        setPage(page + 1);
+      });
     }
   }
 
@@ -96,6 +101,8 @@ export default function ChannelsFollowingManage(props: Props) {
               onScrollBottom={bumpPage}
               page={page + 1}
               pageSize={FOLLOW_PAGE_SIZE}
+              loading={loadingPage}
+              useLoadingSpinner
             />
           )}
         </>
diff --git a/ui/page/search/view.jsx b/ui/page/search/view.jsx
index 47630df8f..60292697f 100644
--- a/ui/page/search/view.jsx
+++ b/ui/page/search/view.jsx
@@ -90,6 +90,7 @@ export default function SearchPage(props: Props) {
             <ClaimList
               uris={uris}
               loading={isSearching}
+              useLoadingSpinner
               onScrollBottom={loadMore}
               // 'page' is 1-indexed; It's not the same as 'from', but it just
               // needs to be unique to indicate when a fetch is needed.
diff --git a/ui/scss/component/_spinner.scss b/ui/scss/component/_spinner.scss
index bdddce7d1..6b8a22bb9 100644
--- a/ui/scss/component/_spinner.scss
+++ b/ui/scss/component/_spinner.scss
@@ -52,3 +52,7 @@
     width: 3px;
   }
 }
+
+.spinnerArea--centered {
+  text-align: center;
+}