🐛(frontend) retry check media status after page reload

Previous refactoring removed the retry logic for
checking media status after a page reload.
This commit reintroduces that functionality
to ensure uploads are properly processed even after
a page reload. We improve the test coverage
to validate this behavior.

Author: AntoLC

CHANGELOG.md

@@ -24,6 +24,7 @@ and this project adheres to
 - ♿(frontend) improve accessibility:
   - ♿(frontend) remove empty alt on logo due to Axe a11y error #1516
 - 🐛(backend) fix s3 version_id validation
+- 🐛(frontend) retry check media status after page reload #1555
 
 ## [3.8.2] - 2025-10-17
 

src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts

@@ -494,7 +494,7 @@ test.describe('Doc Editor', () => {
         if (request.method().includes('GET')) {
           await route.fulfill({
             json: {
-              status: requestCount ? 'ready' : 'processing',
+              status: requestCount > 1 ? 'ready' : 'processing',
               file: '/anything.html',
             },
           });
@@ -518,6 +518,12 @@ test.describe('Doc Editor', () => {
     await fileChooser.setFiles(path.join(__dirname, 'assets/test.html'));
 
     await expect(editor.getByText('Analyzing file...')).toBeVisible();
+
+    // To be sure the retry happens even after a page reload
+    await page.reload();
+
+    await expect(editor.getByText('Analyzing file...')).toBeVisible();
+
     // The retry takes a few seconds
     await expect(editor.getByText('test.html')).toBeVisible({
       timeout: 7000,

src/frontend/apps/impress/src/features/docs/doc-editor/api/checkDocMediaStatus.tsx

@@ -1,4 +1,5 @@
 import { APIError, errorCauses } from '@/api';
+import { sleep } from '@/utils';
 
 interface CheckDocMediaStatusResponse {
   file?: string;
@@ -25,3 +26,28 @@ export const checkDocMediaStatus = async ({
 
   return response.json() as Promise<CheckDocMediaStatusResponse>;
 };
+
+/**
+ * Upload file can be analyzed on the server side,
+ * we had this function to wait for the analysis to be done
+ * before returning the file url. It will keep the loader
+ * on the upload button until the analysis is done.
+ * @param url
+ * @returns Promise<CheckDocMediaStatusResponse> status_code
+ * @description Waits for the upload to be analyzed by checking the status of the file.
+ */
+export const loopCheckDocMediaStatus = async (
+  url: string,
+): Promise<CheckDocMediaStatusResponse> => {
+  const SLEEP_TIME = 5000;
+  const response = await checkDocMediaStatus({
+    urlMedia: url,
+  });
+
+  if (response.status === 'ready') {
+    return response;
+  } else {
+    await sleep(SLEEP_TIME);
+    return await loopCheckDocMediaStatus(url);
+  }
+};

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/PdfBlock.tsx

@@ -46,7 +46,7 @@ type CreatePDFBlockConfig = BlockConfig<
 
 interface PdfBlockComponentProps {
   block: BlockNoDefaults<
-    Record<'callout', CreatePDFBlockConfig>,
+    Record<'pdf', CreatePDFBlockConfig>,
     InlineContentSchema,
     StyleSchema
   >;

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/UploadLoaderBlock.tsx

@@ -1,34 +1,138 @@
+import {
+  BlockConfig,
+  BlockNoDefaults,
+  BlockNoteEditor,
+  InlineContentSchema,
+  StyleSchema,
+} from '@blocknote/core';
 import { createReactBlockSpec } from '@blocknote/react';
+import { t } from 'i18next';
+import { useEffect } from 'react';
 
 import { Box, Text } from '@/components';
+import { useMediaUrl } from '@/core';
 
+import { loopCheckDocMediaStatus } from '../../api';
 import Loader from '../../assets/loader.svg';
 import Warning from '../../assets/warning.svg';
 
+type UploadLoaderPropSchema = {
+  readonly information: { readonly default: '' };
+  readonly type: {
+    readonly default: 'loading';
+    readonly values: readonly ['loading', 'warning'];
+  };
+  readonly blockUploadName: { readonly default: '' };
+  readonly blockUploadShowPreview: { readonly default: true };
+  readonly blockUploadType: {
+    readonly default: '';
+  };
+  readonly blockUploadUrl: { readonly default: '' };
+};
+
+type UploadLoaderBlockConfig = BlockConfig<
+  'uploadLoader',
+  UploadLoaderPropSchema,
+  'none'
+>;
+
+type UploadLoaderBlockType = BlockNoDefaults<
+  Record<'uploadLoader', UploadLoaderBlockConfig>,
+  InlineContentSchema,
+  StyleSchema
+>;
+
+type UploadLoaderEditor = BlockNoteEditor<
+  Record<'uploadLoader', UploadLoaderBlockConfig>,
+  InlineContentSchema,
+  StyleSchema
+>;
+
+interface UploadLoaderBlockComponentProps {
+  block: UploadLoaderBlockType;
+  editor: UploadLoaderEditor;
+  contentRef: (node: HTMLElement | null) => void;
+}
+
+const UploadLoaderBlockComponent = ({
+  block,
+  editor,
+}: UploadLoaderBlockComponentProps) => {
+  const mediaUrl = useMediaUrl();
+
+  useEffect(() => {
+    if (!block.props.blockUploadUrl || block.props.type !== 'loading') {
+      return;
+    }
+
+    const url = block.props.blockUploadUrl;
+
+    loopCheckDocMediaStatus(url)
+      .then((response) => {
+        // Replace the loading block with the resource block (image, audio, video, pdf ...)
+        editor.replaceBlocks(
+          [block.id],
+          [
+            {
+              type: block.props.blockUploadType,
+              props: {
+                url: `${mediaUrl}${response.file}`,
+                showPreview: block.props.blockUploadShowPreview,
+                name: block.props.blockUploadName,
+                caption: '',
+                backgroundColor: 'default',
+                textAlignment: 'left',
+              },
+            } as never,
+          ],
+        );
+      })
+      .catch((error) => {
+        console.error('Error analyzing file:', error);
+
+        editor.updateBlock(block.id, {
+          type: 'uploadLoader',
+          props: {
+            type: 'warning',
+            information: t(
+              'The antivirus has detected an anomaly in your file.',
+            ),
+          },
+        });
+      });
+  }, [block, editor, mediaUrl]);
+
+  return (
+    <Box className="bn-visual-media-wrapper" $direction="row" $gap="0.5rem">
+      {block.props.type === 'warning' ? (
+        <Warning />
+      ) : (
+        <Loader style={{ animation: 'spin 1.5s linear infinite' }} />
+      )}
+      <Text>{block.props.information}</Text>
+    </Box>
+  );
+};
+
 export const UploadLoaderBlock = createReactBlockSpec(
   {
     type: 'uploadLoader',
     propSchema: {
-      information: { default: '' as const },
+      information: { default: '' },
       type: {
-        default: 'loading' as const,
-        values: ['loading', 'warning'] as const,
+        default: 'loading',
+        values: ['loading', 'warning'],
+      },
+      blockUploadName: { default: '' },
+      blockUploadShowPreview: { default: true },
+      blockUploadType: {
+        default: '',
       },
+      blockUploadUrl: { default: '' },
     },
     content: 'none',
   },
   {
-    render: ({ block }) => {
-      return (
-        <Box className="bn-visual-media-wrapper" $direction="row" $gap="0.5rem">
-          {block.props.type === 'warning' ? (
-            <Warning />
-          ) : (
-            <Loader style={{ animation: 'spin 1.5s linear infinite' }} />
-          )}
-          <Text>{block.props.information}</Text>
-        </Box>
-      );
-    },
+    render: (props) => <UploadLoaderBlockComponent {...props} />,
   },
 );