fix(upload): animate uploading ellipsis

src/components/post-form/__tests__/post-form.test.tsx

@@ -25,6 +25,7 @@ const testState = vi.hoisted(() => ({
   handleUploadMock: vi.fn(),
   isOffline: false,
   isOnlineStatusLoading: false,
+  isUploading: false,
   isResolvingExternalQuotes: false,
   navigateMock: vi.fn(),
   offlineTitle: 'offline board',
@@ -172,12 +173,16 @@ vi.mock('../../../hooks/use-file-upload', () => ({
     testState.uploadComplete = onUploadComplete;
     return {
       handleUpload: testState.handleUploadMock,
-      isUploading: false,
+      isUploading: testState.isUploading,
       uploadedFileName: testState.uploadedFileName,
     };
   },
 }));
 
+vi.mock('../../loading-ellipsis', () => ({
+  default: ({ string }: { string: string }) => createElement('span', { 'data-testid': 'loading-ellipsis' }, string),
+}));
+
 vi.mock('../../../lib/utils/media-utils', () => ({
   getDisplayMediaInfoType: (type: string, t: (key: string) => string) => t(type),
   getLinkMediaInfo: (link: string) => {
@@ -293,6 +298,7 @@ describe('PostForm', () => {
     testState.gifFrameStatus = 'idle';
     testState.isOffline = false;
     testState.isOnlineStatusLoading = false;
+    testState.isUploading = false;
     testState.isResolvingExternalQuotes = false;
     testState.offlineTitle = 'offline board';
     testState.postIndex = undefined;
@@ -433,6 +439,15 @@ describe('PostForm', () => {
     expect(table?.textContent).toContain('file name.jpg');
   });
 
+  it('uses the shared loading ellipsis while a post form upload is running', async () => {
+    testState.isUploading = true;
+
+    await renderPostForm('/all');
+    await clickByText(container, 'start_new_thread');
+
+    expect(container.querySelector('[data-testid="loading-ellipsis"]')?.textContent).toBe('uploading');
+  });
+
   it('redirects to the pending route when a post publish index is already available on mount', async () => {
     testState.postIndex = 7;
     testState.resolvedCommunityAddress = 'music-posting.eth';

src/components/post-form/post-form.tsx

@@ -21,6 +21,7 @@ import { getShowUploadControls, isWebRuntime } from '../../lib/media-hosting/sho
 import { isCommentArchived } from '../../lib/utils/comment-moderation-utils';
 import useMediaHostingStore from '../../stores/use-media-hosting-store';
 import BoardOfflineAlert from '../board-offline-alert/board-offline-alert';
+import LoadingEllipsis from '../loading-ellipsis';
 import styles from './post-form.module.css';
 import capitalize from 'lodash/capitalize';
 import debounce from 'lodash/debounce';
@@ -258,7 +259,7 @@ const PostFormFields = ({
             isUploading={isUploading}
             showUploadControls={showUploadControls}
           />
-          <span>{isUploading ? t('uploading') : getPublishURLFilename(url) || uploadedFileName || t('no_file_chosen')}</span>
+          <span>{isUploading ? <LoadingEllipsis string={t('uploading')} /> : getPublishURLFilename(url) || uploadedFileName || t('no_file_chosen')}</span>
         </td>
       </tr>
     )}