From f93ea20ae02fefe71435964275ad02e657df749e Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Mon, 5 Oct 2026 15:24:43 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20change=20ui=20upload?=
 =?UTF-8?q?=20loader=20to=20fit=20the=20mockup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We updated the UI of the upload loader to match the new mockup.
---
 CHANGELOG.md                                  |  1 +
 .../custom-blocks/UploadLoaderBlock.tsx       | 22 ++++++++++++++-----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e6b5005e9..18cbba206 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -84,6 +84,7 @@ and this project adheres to
 - 🔧(helm) run a valkey for the backend and one for yhub in dev and feature
 - ✨(frontend) turn pasted doc links into interlinks #2713
 - 💄(frontend) redesign 401 error standalone page #2716
+- 💄(frontend) update upload loader and error ui #2778
 
 ### Fixed
 
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/UploadLoaderBlock.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/UploadLoaderBlock.tsx
index 019a2af88..5bf4056ae 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/UploadLoaderBlock.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/UploadLoaderBlock.tsx
@@ -9,7 +9,7 @@ import { createReactBlockSpec } from '@blocknote/react';
 import { t } from 'i18next';
 import { useEffect } from 'react';
 
-import { Box, Icon, Text } from '@/components';
+import { Card, Icon, Text } from '@/components';
 import { useMediaUrl } from '@/core';
 import { isSafeUrl } from '@/utils/url';
 
@@ -135,18 +135,30 @@ const UploadLoaderBlockComponent = ({
   }, [block, editor, mediaUrl, isEditable]);
 
   return (
-    <Box className="bn-visual-media-wrapper" $direction="row" $gap="0.5rem">
+    <Card
+      className="bn-visual-media-wrapper"
+      $direction="row"
+      $gap="xs"
+      $withThemeBG
+      $border="none"
+      $theme="neutral"
+      $scope="semantic"
+      $width="100%"
+      $padding="xs"
+    >
       {block.props.type === 'warning' ? (
         <Warning />
       ) : (
         <Icon
-          $theme="brand"
+          $theme="neutral"
           $layer="border"
           icon={<Loader style={{ animation: 'spin 1.5s linear infinite' }} />}
         />
       )}
-      <Text>{block.props.information}</Text>
-    </Box>
+      <Text $variation="tertiary" $weight={500}>
+        {block.props.information}
+      </Text>
+    </Card>
   );
 };