From 33bd5ef116ba98d05a9fea75fc07801495eae84b Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Tue, 8 Jul 2025 13:25:31 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F(frontend)=20remove=20flicker?=
 =?UTF-8?q?ing=20when=20connecting=20to=20collab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The blocking edition modal could be flickring, because
the connection to the collaborative server can take
a bit of time.
We set a timeout to ensure the loading state
is cleared after a reasonable time.
---
 .../hooks/useIsCollaborativeEditable.tsx      | 30 ++++++++++++++++---
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/hooks/useIsCollaborativeEditable.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/hooks/useIsCollaborativeEditable.tsx
index 1064e866..1ad4ebd4 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/hooks/useIsCollaborativeEditable.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/hooks/useIsCollaborativeEditable.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { useConfig } from '@/core';
 import { useIsOffline } from '@/features/service-worker';
@@ -20,7 +20,7 @@ export const useIsCollaborativeEditable = (doc: Doc) => {
   const _isEditable = isUserReader || isConnected || !isShared || isOffline;
   const [isEditable, setIsEditable] = useState(true);
   const [isLoading, setIsLoading] = useState(!_isEditable);
-
+  const timeout = useRef<NodeJS.Timeout | null>(null);
   const {
     data: { can_edit } = { can_edit: _isEditable },
     isLoading: isLoadingCanEdit,
@@ -35,10 +35,32 @@ export const useIsCollaborativeEditable = (doc: Doc) => {
       return;
     }
 
-    setIsEditable(can_edit);
-    setIsLoading(false);
+    // Connection to the WebSocket can take some time, so we set a timeout to ensure the loading state is cleared after a reasonable time.
+    timeout.current = setTimeout(() => {
+      setIsEditable(can_edit);
+      setIsLoading(false);
+    }, 1500);
+
+    return () => {
+      if (timeout.current) {
+        clearTimeout(timeout.current);
+      }
+    };
   }, [can_edit, isLoadingCanEdit]);
 
+  useEffect(() => {
+    if (!_isEditable) {
+      return;
+    }
+
+    if (timeout.current) {
+      clearTimeout(timeout.current);
+    }
+
+    setIsEditable(true);
+    setIsLoading(false);
+  }, [_isEditable, isLoading]);
+
   if (!conf?.COLLABORATION_WS_NOT_CONNECTED_READY_ONLY) {
     return {
       isEditable: true,