fix(archive): animate loading ellipsis

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} />