⚡️(frontend) add debounce WebSocket reconnect

We add a debounce mechanism to the WebSocket
reconnect logic in the `useProviderStore` to
prevent rapid reconnection attempts that can
lead to performance issues and potential server
overload.

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to
 - ✨(frontend) add markdown copy icon for Copy as Markdown option #2096
 - ♻️(backend) skip saving in database a document when payload is empty #2062
 - ♻️(frontend) refacto Version modal to fit with the design system #2091
+- ⚡️(frontend) add debounce WebSocket reconnect #2104
 
 ### Fixed
 

src/frontend/apps/impress/src/features/docs/doc-management/stores/useProviderStore.tsx

@@ -30,6 +30,8 @@ const defaultValues = {
 
 type ExtendedCloseEvent = CloseEvent & { wasClean: boolean };
 
+let reconnectTimeout: ReturnType<typeof setTimeout> | undefined;
+
 export const useProviderStore = create<UseCollaborationStore>((set, get) => ({
   ...defaultValues,
   createProvider: (wsUrl, storeId, initialDoc) => {
@@ -60,7 +62,8 @@ export const useProviderStore = create<UseCollaborationStore>((set, get) => ({
             return;
           }
 
-          void provider.connect();
+          clearTimeout(reconnectTimeout);
+          reconnectTimeout = setTimeout(() => void provider.connect(), 1000);
         }
       },
       onAuthenticationFailed() {
@@ -119,6 +122,7 @@ export const useProviderStore = create<UseCollaborationStore>((set, get) => ({
     return provider;
   },
   destroyProvider: () => {
+    clearTimeout(reconnectTimeout);
     const provider = get().provider;
     if (provider) {
       provider.destroy();