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 && }
{!timedOut && urisLength === 0 && !loading &&
{empty || noResultMsg}
}
{timedOut && timedOutMessage && {timedOutMessage}
}
@@ -289,6 +292,11 @@ export default function ClaimList(props: Props) {
{!timedOut && urisLength === 0 && !loading && {empty || noResultMsg}
}
{!loading && timedOut && timedOutMessage && {timedOutMessage}
}
+ {loading && useLoadingSpinner && (
+
+
+
+ )}
);
}
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) {