🐛(frontend) fix lost content during sync

The tests e2e highlighted a problem where content
was lost during synchronization. This bug
started to occurs after upgrading Blocknote to
0.41.1 version.
It seems to happen only when the initial document
is empty and 2 users are collaborating, so before
the first minute.
We now initialize the editor only when the y-doc
has attempted to sync. This should ensure that
all updates are applied before the editor
is initialized.

Author: AntoLC

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

@@ -83,10 +83,9 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
   const { user } = useAuth();
   const { setEditor } = useEditorStore();
   const { t } = useTranslation();
-  const { isSynced } = useProviderStore();
+  const { isSynced: isConnectedToCollabServer } = useProviderStore();
 
   const { isEditable, isLoading } = useIsCollaborativeEditable(doc);
-  const isConnectedToCollabServer = isSynced;
   const readOnly = !doc.abilities.partial_update || !isEditable || isLoading;
   const isDeletedDoc = !!doc.deleted_at;
 

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

@@ -25,10 +25,10 @@ interface DocEditorProps {
 export const DocEditor = ({ doc, versionId }: DocEditorProps) => {
   const { isDesktop } = useResponsiveStore();
   const isVersion = !!versionId && typeof versionId === 'string';
-  const { provider } = useProviderStore();
+  const { provider, isReady } = useProviderStore();
 
   // TODO: Use skeleton instead of loading
-  if (!provider) {
+  if (!provider || !isReady) {
     return <Loading />;
   }
 

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

@@ -13,6 +13,7 @@ export interface UseCollaborationStore {
   destroyProvider: () => void;
   provider: HocuspocusProvider | undefined;
   isConnected: boolean;
+  isReady: boolean;
   isSynced: boolean;
   hasLostConnection: boolean;
   resetLostConnection: () => void;
@@ -21,6 +22,7 @@ export interface UseCollaborationStore {
 const defaultValues = {
   provider: undefined,
   isConnected: false,
+  isReady: false,
   isSynced: false,
   hasLostConnection: false,
 };
@@ -45,14 +47,15 @@ export const useProviderStore = create<UseCollaborationStore>((set, get) => ({
       onDisconnect(data) {
         // Attempt to reconnect if the disconnection was clean (initiated by the client or server)
         if ((data.event as ExtendedCloseEvent).wasClean) {
-          provider.connect();
+          void provider.connect();
         }
       },
       onStatus: ({ status }) => {
         set((state) => {
           const nextConnected = status === WebSocketStatus.Connected;
           return {
             isConnected: nextConnected,
+            isReady: state.isReady || status === WebSocketStatus.Disconnected,
             hasLostConnection:
               state.isConnected && !nextConnected
                 ? true
@@ -61,7 +64,7 @@ export const useProviderStore = create<UseCollaborationStore>((set, get) => ({
         });
       },
       onSynced: ({ state }) => {
-        set({ isSynced: state });
+        set({ isSynced: state, isReady: true });
       },
       onClose(data) {
         /**