Added loading state to post analytics export (TryGhost#27998)

closes https://linear.app/ghost/issue/NY-1296

## Summary

- Added a loading and disabled state to the Post analytics export button
while the CSV export is running
- Guarded against duplicate export clicks during an in-flight request
- Added acceptance coverage for the loading and disabled button state

### Before

https://github.com/user-attachments/assets/6be392d2-33ec-41ef-8344-407028c9472a

### After

https://github.com/user-attachments/assets/9d2989da-24bf-4d00-bf44-fbab25fdc414

Author: cmraible

apps/admin-x-settings/src/components/settings/advanced/migration-tools/migration-tools-export.tsx

@@ -5,6 +5,7 @@ import {useHandleError} from '@tryghost/admin-x-framework/hooks';
 import {usePostsExports} from '@tryghost/admin-x-framework/api/posts';
 
 const MigrationToolsExport: React.FC = () => {
+    const [isExportingPosts, setIsExportingPosts] = React.useState(false);
     const {refetch: postsData} = usePostsExports({
         searchParams: {
             limit: '1000'
@@ -14,6 +15,12 @@ const MigrationToolsExport: React.FC = () => {
     const handleError = useHandleError();
 
     const exportPosts = async () => {
+        if (isExportingPosts) {
+            return;
+        }
+
+        setIsExportingPosts(true);
+
         try {
             const {data} = await postsData();
             if (data) {
@@ -30,13 +37,15 @@ const MigrationToolsExport: React.FC = () => {
             }
         } catch (e) {
             handleError(e);
+        } finally {
+            setIsExportingPosts(false);
         }
     };
 
     return (
         <div className='grid grid-cols-1 gap-4 pt-4 md:grid-cols-2 lg:grid-cols-3'>
             <Button className='h-9! font-semibold!' color='grey' icon='export' iconColorClass='h-4! w-auto!' label='Content & settings' onClick={() => downloadAllContent()} />
-            <Button className='h-9! font-semibold!' color='grey' icon='baseline-chart' iconColorClass='h-4! w-auto!' label='Post analytics' onClick={exportPosts} />
+            <Button className='h-9! font-semibold!' color='grey' disabled={isExportingPosts} icon='baseline-chart' iconColorClass='h-4! w-auto!' label='Post analytics' loading={isExportingPosts} testId='post-analytics-export-button' onClick={exportPosts} />
         </div>
     );
 };

apps/admin-x-settings/test/acceptance/membership/analytics.test.ts

@@ -135,6 +135,45 @@ test.describe('Analytics settings', async () => {
         expect(hasDownloadUrl).toBe(true);
     });
 
+    test('Disables post analytics export button and shows loading state while downloading', async ({page}) => {
+        await mockApi({page, requests: createMockApiConfig({})});
+
+        let exportRequestCount = 0;
+        let resolveExportRequest: (() => void) | undefined;
+
+        await page.route(/\/ghost\/api\/admin\/posts\/export\/\?limit=1000$/, async (route) => {
+            exportRequestCount += 1;
+            await new Promise<void>((resolve) => {
+                resolveExportRequest = resolve;
+            });
+            await route.fulfill({
+                status: 200,
+                body: 'csv data',
+                headers: {
+                    'content-type': 'text/csv'
+                }
+            });
+        });
+
+        await page.goto('/');
+
+        const section = page.getByTestId('migrationtools');
+
+        await section.getByRole('tab', {name: 'Export'}).click();
+
+        const postAnalyticsButton = section.getByTestId('post-analytics-export-button');
+        await postAnalyticsButton.click();
+
+        await expect.poll(() => exportRequestCount).toBe(1);
+        await expect(postAnalyticsButton).toBeDisabled();
+        await expect(postAnalyticsButton).toContainText('Loading...');
+
+        resolveExportRequest?.();
+
+        await expect(postAnalyticsButton).toBeEnabled();
+        expect(exportRequestCount).toBe(1);
+    });
+
     test('Supports read only settings', async ({page}) => {
         await mockApi({page, requests: {
             ...globalDataRequests,