From a9d2517c7b4cebb52373f57135d2a75c77b35914 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Thu, 12 Mar 2026 15:33:52 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20fix=20flickering=20lef?=
 =?UTF-8?q?t=20panel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In some cases, the left panel can flicker
when navigating from the index to a document page.
This is due to different state + a transition effect.
To fix this, we remove the transition effect
when mounting.
---
 CHANGELOG.md                                  |  1 +
 .../components/ResizableLeftPanel.tsx         | 23 ++++++++++++++++---
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 904a19e4..d7a755d0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -22,6 +22,7 @@ and this project adheres to
 
 - 🐛(backend) create a link_trace record for on-boarding documents
 - 🐛(backend) manage race condition when creating sandbox document
+- 🐛(frontend) fix flickering left panel #1989
 - ♿️(frontend) improve doc tree keyboard navigation #1981
 
 ## [v4.7.0] - 2026-03-09
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/ResizableLeftPanel.tsx b/src/frontend/apps/impress/src/features/left-panel/components/ResizableLeftPanel.tsx
index 2922c662..03584d1d 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/ResizableLeftPanel.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/ResizableLeftPanel.tsx
@@ -45,6 +45,22 @@ export const ResizableLeftPanel = ({
     );
   });
 
+  const [isMounting, setIsMounting] = useState(false);
+
+  /**
+   * To avoid flickering animation on initial load
+   */
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setIsMounting(true);
+    }, 500);
+
+    return () => {
+      clearTimeout(timeout);
+      setIsMounting(false);
+    };
+  }, []);
+
   /**
    * When the panel is toggled open/closed, we want
    * to either expand/collapse
@@ -94,9 +110,10 @@ export const ResizableLeftPanel = ({
         collapsible={!isPanelOpen}
         collapsedSize={0}
         style={{
-          transition: isDragging
-            ? 'none'
-            : 'flex var(--c--globals--transitions--duration) var(--c--globals--transitions--ease-out)',
+          transition:
+            isDragging || !isMounting
+              ? 'none'
+              : 'flex var(--c--globals--transitions--duration) var(--c--globals--transitions--ease-out)',
         }}
         order={0}
         defaultSize={