fix(upload): animate uploading ellipsis

src/components/reply-modal/__tests__/reply-modal.test.tsx

@@ -165,6 +165,10 @@ vi.mock('../../../hooks/use-file-upload', () => ({
   },
 }));
 
+vi.mock('../../loading-ellipsis', () => ({
+  default: ({ string }: { string: string }) => createElement('span', { 'data-testid': 'loading-ellipsis' }, string),
+}));
+
 vi.mock('lodash/debounce', () => ({
   default: <T extends (...args: any[]) => void>(fn: T) => {
     const wrapped = ((...args: Parameters<T>) => fn(...args)) as T & { cancel: () => void };
@@ -344,6 +348,14 @@ describe('ReplyModal', () => {
     expect(testState.setPublishReplyOptionsMock).toHaveBeenCalledWith({ displayName: 'Alice' });
   });
 
+  it('uses the shared loading ellipsis while a reply upload is running', async () => {
+    testState.isUploading = true;
+
+    await renderReplyModal('/mu/thread/post-1');
+
+    expect(container.querySelector('[data-testid="loading-ellipsis"]')?.textContent).toBe('uploading');
+  });
+
   it('does not render an offline warning when the shared offline hook reports the board as online', async () => {
     await renderReplyModal('/mu/thread/post-1');
 

src/components/reply-modal/reply-modal.tsx

@@ -14,6 +14,7 @@ import usePublishReply from '../../hooks/use-publish-reply';
 import useIsMobile from '../../hooks/use-is-mobile';
 import { useFileUpload } from '../../hooks/use-file-upload';
 import BoardOfflineAlert from '../board-offline-alert/board-offline-alert';
+import LoadingEllipsis from '../loading-ellipsis';
 import styles from './reply-modal.module.css';
 import capitalize from 'lodash/capitalize';
 import debounce from 'lodash/debounce';
@@ -374,7 +375,7 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, threa
                 </button>
               </span>
               <span className={styles.uploadFileName} title={displayedFileName || t('no_file_chosen')}>
-                {isUploading ? t('uploading') : displayedFileName || t('no_file_chosen')}
+                {isUploading ? <LoadingEllipsis string={t('uploading')} /> : displayedFileName || t('no_file_chosen')}
               </span>
             </span>
           )}