fix(archive): animate loading ellipsis

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();
+  });
 });

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(' ');
 

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 = [

src/views/archive/archive.tsx

@@ -216,7 +216,9 @@ const Archive = () => {
         <hr className={styles.desktopDivider} />
         <ArchiveDesktopTopControls communityAddress={communityAddress} />
         <hr className={styles.divider} />
-        <h4 className={styles.archiveSummary}>{t('loading_archive')}</h4>
+        <h4 className={styles.archiveSummary}>
+          <LoadingEllipsis string={t('loading_archive')} />
+        </h4>
         <PageFooterDesktop firstRow={<ArchiveDesktopFooterControls communityAddress={communityAddress} />} styleRow={<ThreadFooterStyleRow />} />
         <PageFooterMobile>
           <ArchiveMobileFooterControls communityAddress={communityAddress} />