fix(feed): clarify loading states

This commit is contained in:
Tommaso Casaburi
2026-05-24 16:25:02 +07:00
parent 0df81b598e
commit a6a1320381
4 changed files with 62 additions and 4 deletions
@@ -172,6 +172,30 @@ describe('use-state-string', () => {
expect(latestValue).toBe('Downloading board via IPFS');
});
it('formats single-board initializing feed states as board loading copy', () => {
testState.community = {
state: 'initializing',
};
act(() => {
root.render(createElement(FeedStateStringHarness, { addresses: ['music-posting.eth'] }));
});
expect(latestValue).toBe('Loading board');
});
it('keeps multi-board feeds on multi-board loading copy while the single community hook initializes', () => {
testState.community = {
state: 'initializing',
};
act(() => {
root.render(createElement(FeedStateStringHarness, { addresses: ['music-posting.eth', 'tech-posting.eth'] }));
});
expect(latestValue).toBe('Downloading 2 boards (music-posting.eth, tech-posting.eth)');
});
it('aggregates multi-board feed states across address resolution, threads, and pages', () => {
testState.communitiesStates = {
'fetching-ipfs': {
+4 -1
View File
@@ -67,6 +67,8 @@ const sanitizeSingleFeedLoadingState = (stateString?: string): string | undefine
}
return stateString
.replace(/\bInitializing\b/g, 'Loading board')
.replace(/\binitializing\b/g, 'loading board')
.replace(/\bDownloading thread\b/g, 'Downloading board')
.replace(/\bdownloading thread\b/g, 'downloading board')
.replace(/\bLoading thread\b/g, 'Loading board')
@@ -134,7 +136,8 @@ export const useFeedStateString = (communityAddresses?: string[]): string | unde
const communityAddress = communityAddresses?.length === 1 ? communityAddresses[0] : undefined;
const communityIdentifier = communityAddress ? communities[0] : undefined;
const community = useCommunity(communityIdentifier ? { community: communityIdentifier } : undefined);
const singleCommunityFeedStateString = sanitizeSingleFeedLoadingState(useStateString(community));
const rawSingleCommunityFeedStateString = useStateString(communityAddress ? community : undefined);
const singleCommunityFeedStateString = communityAddress ? sanitizeSingleFeedLoadingState(rawSingleCommunityFeedStateString) : undefined;
// multiple community feed state string
const { states } = useCommunitiesStates({ communities });
+28
View File
@@ -684,6 +684,34 @@ describe('Board', () => {
);
});
it('does not show no threads while an empty all feed is still loading', async () => {
testState.feedState = 'initializing';
testState.feedStateString = 'Downloading 1 board (music-posting.eth)';
testState.hasMore = true;
await renderBoard({
boardProps: { viewType: 'all' },
initialEntry: '/all',
routePath: '/all/*',
});
expect(container.textContent).not.toContain('no_threads');
expect(container.querySelector('[data-testid="loading-ellipsis"]')?.textContent).toBe('Downloading 1 board (music-posting.eth)');
});
it('shows no threads after an empty all feed finishes loading', async () => {
testState.feedStateString = undefined;
await renderBoard({
boardProps: { viewType: 'all' },
initialEntry: '/all',
routePath: '/all/*',
});
expect(container.textContent).toContain('no_threads');
expect(container.querySelector('[data-testid="loading-ellipsis"]')).toBeNull();
});
it('shows a wider multiboard time-filter suggestion when older threads exist', async () => {
const now = Math.floor(Date.now() / 1000);
localStorage.setItem(LAST_VISIT_STORAGE_KEY, String((now - 3 * 24 * 60 * 60) * 1000));
+6 -3
View File
@@ -92,8 +92,11 @@ const BoardFooter = ({
const loadingStateString = useFeedStateString(communityAddresses) || (combinedFeedLength === 0 ? t('downloading_board') : t('looking_for_more_posts'));
const isLoadedCommunityState = communityState === 'succeeded' || communityState === 'ready';
const canShowNoThreads = !isSingleCommunityBoard || (isLoadedCommunityState && feedState === 'succeeded');
const isEmptyBoardLoading = isSingleCommunityBoard && combinedFeedLength === 0 && !canShowNoThreads && communityState !== 'failed';
const isFeedSucceeded = feedState === 'succeeded';
const isFeedFailed = feedState === 'failed';
const canShowNoThreads = isSingleCommunityBoard ? isLoadedCommunityState && isFeedSucceeded : isFeedSucceeded && !hasMore;
const isEmptyFeedLoading = combinedFeedLength === 0 && !canShowNoThreads && (isSingleCommunityBoard ? communityState !== 'failed' : !isFeedFailed);
const showFooterLoading = showLoadingEllipsis && (hasMore || isEmptyFeedLoading);
let footerContent;
if (moreThreadsSuggestion && moreThreadsSuggestionPathname) {
@@ -140,7 +143,7 @@ const BoardFooter = ({
) : isInModView && accountCommunityAddressesLength === 0 ? (
<ModEmptyState />
) : (
showLoadingEllipsis && (hasMore || isEmptyBoardLoading) && <LoadingEllipsis string={loadingStateString} />
showFooterLoading && <LoadingEllipsis string={loadingStateString} />
)}
</div>
</div>