🚸(frontend) let loader until resource ready

The backend can analyze the upload file, this take
time, so we need to show a loader
until the backend finish the analysis.

Author: AntoLC

CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to
 - ✨(backend) integrate maleware_detection from django-lasuite #936
 - 🩺(CI) add lint spell mistakes #954
 - 🛂(frontend) block edition to not connected users #945
+- 🚸 Let loader during upload analyze #984
 
 ### Changed
 

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

@@ -425,6 +425,10 @@ test.describe('Doc Editor', () => {
     const downloadPromise = page.waitForEvent('download', (download) => {
       return download.suggestedFilename().includes(`html`);
     });
+    const responseCheckPromise = page.waitForResponse(
+      (response) =>
+        response.url().includes('media-check') && response.status() === 200,
+    );
 
     await verifyDocName(page, randomDoc);
 
@@ -439,6 +443,8 @@ test.describe('Doc Editor', () => {
     const fileChooser = await fileChooserPromise;
     await fileChooser.setFiles(path.join(__dirname, 'assets/test.html'));
 
+    await responseCheckPromise;
+
     await page.locator('.bn-block-content[data-name="test.html"]').click();
     await page.getByRole('button', { name: 'Download file' }).click();
 
@@ -455,6 +461,51 @@ test.describe('Doc Editor', () => {
     expect(svgBuffer.toString()).toContain('Hello svg');
   });
 
+  test('it analyzes uploads', async ({ page, browserName }) => {
+    const [randomDoc] = await createDoc(page, 'doc-editor', browserName, 1);
+
+    let requestCount = 0;
+    await page.route(
+      /.*\/documents\/.*\/media-check\/\?key=.*/,
+      async (route) => {
+        const request = route.request();
+        if (request.method().includes('GET')) {
+          await route.fulfill({
+            json: {
+              status: requestCount ? 'ready' : 'processing',
+              file: '/anything.html',
+            },
+          });
+
+          requestCount++;
+        } else {
+          await route.continue();
+        }
+      },
+    );
+
+    const fileChooserPromise = page.waitForEvent('filechooser');
+
+    await verifyDocName(page, randomDoc);
+
+    const editor = page.locator('.ProseMirror.bn-editor');
+
+    await editor.click();
+    await editor.locator('.bn-block-outer').last().fill('/');
+    await page.getByText('Embedded file').click();
+    await page.getByText('Upload file').click();
+
+    const fileChooser = await fileChooserPromise;
+    await fileChooser.setFiles(path.join(__dirname, 'assets/test.html'));
+
+    await expect(editor.getByText('Analyzing file...')).toBeVisible();
+    // The retry takes a few seconds
+    await expect(editor.getByText('test.html')).toBeVisible({
+      timeout: 7000,
+    });
+    await expect(editor.getByText('Analyzing file...')).toBeHidden();
+  });
+
   test('it checks block editing when not connected to collab server', async ({
     page,
   }) => {

src/frontend/apps/impress/src/custom-next.d.ts

@@ -13,7 +13,13 @@ declare module '*.svg' {
 }
 
 declare module '*.svg?url' {
-  const content: string;
+  const content: {
+    src: string;
+    width: number;
+    height: number;
+    blurWidth: number;
+    blurHeight: number;
+  };
   export default content;
 }
 

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

@@ -0,0 +1,27 @@
+import { APIError, errorCauses } from '@/api';
+
+interface CheckDocMediaStatusResponse {
+  file?: string;
+  status: 'processing' | 'ready';
+}
+
+interface CheckDocMediaStatus {
+  urlMedia: string;
+}
+
+export const checkDocMediaStatus = async ({
+  urlMedia,
+}: CheckDocMediaStatus): Promise<CheckDocMediaStatusResponse> => {
+  const response = await fetch(urlMedia, {
+    credentials: 'include',
+  });
+
+  if (!response.ok) {
+    throw new APIError(
+      'Failed to check the media status',
+      await errorCauses(response),
+    );
+  }
+
+  return response.json() as Promise<CheckDocMediaStatusResponse>;
+};

src/frontend/apps/impress/src/features/docs/doc-editor/assets/loader.svg

@@ -18,11 +18,11 @@ import { Box, TextErrors } from '@/components';
 import { Doc, useIsCollaborativeEditable } from '@/docs/doc-management';
 import { useAuth } from '@/features/auth';
 
-import { useUploadFile } from '../hook';
-import { useHeadings } from '../hook/useHeadings';
+import { useHeadings, useUploadFile, useUploadStatus } from '../hook/';
 import useSaveDoc from '../hook/useSaveDoc';
 import { useEditorStore } from '../stores';
 import { cssEditor } from '../styles';
+import { DocsBlockNoteEditor } from '../types';
 import { randomColor } from '../utils';
 
 import { BlockNoteSuggestionMenu } from './BlockNoteSuggestionMenu';
@@ -63,7 +63,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
     : user?.full_name || user?.email || t('Anonymous');
   const showCursorLabels: 'always' | 'activity' | (string & {}) = 'activity';
 
-  const editor = useCreateBlockNote(
+  const editor: DocsBlockNoteEditor = useCreateBlockNote(
     {
       codeBlock,
       collaboration: {
@@ -127,7 +127,9 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
     },
     [collabName, lang, provider, uploadFile],
   );
+
   useHeadings(editor);
+  useUploadStatus(editor);
 
   useEffect(() => {
     setEditor(editor);

src/frontend/apps/impress/src/features/docs/doc-editor/assets/warning.svg

@@ -32,7 +32,6 @@ export const ModalConfirmDownloadUnsafe = ({
             aria-label={t('Download')}
             color="danger"
             onClick={() => {
-              console.log('onClick');
               if (onConfirm) {
                 void onConfirm();
               }

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx

@@ -1,2 +1,3 @@
+export * from './useHeadings';
 export * from './useSaveDoc';
 export * from './useUploadFile';