diff --git a/src/components/loading-ellipsis/__tests__/loading-ellipsis.test.tsx b/src/components/loading-ellipsis/__tests__/loading-ellipsis.test.tsx index 082c4f27..ce8f092e 100644 --- a/src/components/loading-ellipsis/__tests__/loading-ellipsis.test.tsx +++ b/src/components/loading-ellipsis/__tests__/loading-ellipsis.test.tsx @@ -41,4 +41,13 @@ describe('LoadingEllipsis', () => { expect(container.textContent).toBe('Loading'); expect(container.firstChild?.textContent).toBe('Loading'); }); + + it('removes static trailing ellipsis text before adding the animated ellipsis', () => { + act(() => { + root.render(createElement(LoadingEllipsis, { string: 'Loading archive...' })); + }); + + expect(container.textContent).toBe('Loading archive'); + expect(container.querySelector('span span span')).toBeTruthy(); + }); }); diff --git a/src/components/loading-ellipsis/loading-ellipsis.tsx b/src/components/loading-ellipsis/loading-ellipsis.tsx index b94f4600..f22f4fbf 100644 --- a/src/components/loading-ellipsis/loading-ellipsis.tsx +++ b/src/components/loading-ellipsis/loading-ellipsis.tsx @@ -4,8 +4,11 @@ interface LoadingEllipsisProps { string: string; } +const TRAILING_ELLIPSIS_PATTERN = /\s*(?:\.\.\.|\u2026)\s*$/; + const LoadingEllipsis = ({ string }: LoadingEllipsisProps) => { - const words = string.split(' '); + const normalizedString = string.replace(TRAILING_ELLIPSIS_PATTERN, ''); + const words = normalizedString.split(' '); const lastWord = words.pop(); const restOfString = words.join(' '); diff --git a/src/views/archive/__tests__/archive.test.tsx b/src/views/archive/__tests__/archive.test.tsx index 9df64ad0..e620ed07 100644 --- a/src/views/archive/__tests__/archive.test.tsx +++ b/src/views/archive/__tests__/archive.test.tsx @@ -205,6 +205,14 @@ describe('Archive', () => { expect(testState.loadMoreMock).toHaveBeenCalledTimes(1); }); + it('uses the shared loading ellipsis for the empty archive loading state', async () => { + testState.hasMore = true; + + await renderArchiveRoute({ root, element: createElement(Archive), initialEntry: '/mu/archive', routePath: '/:boardIdentifier/archive' }); + + expect(container.querySelector('[data-testid="loading-ellipsis"]')?.textContent).toBe('loading_archive'); + }); + it('renders the shared archive table and mobile nav actions when mobile hook is set', async () => { testState.isMobile = true; testState.feed = [ diff --git a/src/views/archive/archive.tsx b/src/views/archive/archive.tsx index 009ac382..f6e97460 100644 --- a/src/views/archive/archive.tsx +++ b/src/views/archive/archive.tsx @@ -216,7 +216,9 @@ const Archive = () => {