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) {