Sync and duplicate (#242)

* chore: sync before duplicate content

* chore: improve duplicated content sync

Author: appflowy

cypress/e2e/page/duplicate-page.cy.ts

@@ -96,17 +96,13 @@ describe('Duplicate Page', () => {
     });
     testLog.info('Clicked Duplicate');
 
-    // Verify toast appears (indicates duplication started)
-    cy.get('[data-sonner-toast]', { timeout: 5000 }).should('exist');
-    testLog.info('Toast notification appeared');
+    // Verify blocking loader appears (indicates duplication started and blocks interaction)
+    cy.get('[data-testid="blocking-loader"]', { timeout: 5000 }).should('exist');
+    testLog.info('Blocking loader appeared');
 
-    // Wait for duplication to complete
-    // Don't wait for toast to disappear as it may persist - just wait for operation
-    waitForReactUpdate(3000);
-    testLog.info('Duplication operation completed');
-
-    // Verify no error toast appeared
-    cy.get('[data-sonner-toast][data-type="error"]').should('not.exist');
+    // Wait for duplication to complete and blocking loader to be dismissed
+    cy.get('[data-testid="blocking-loader"]', { timeout: 30000 }).should('not.exist');
+    testLog.info('Blocking loader dismissed - duplication completed');
 
     // Step 7: Find and open the duplicated document
     testLog.step(7, 'Opening the duplicated document');

src/application/services/js-services/http/http_api.ts

@@ -738,6 +738,81 @@ export async function updateCollab(
   return context;
 }
 
+/**
+ * Batch sync multiple collab documents to the server.
+ * This is the same API that desktop uses before duplicating to ensure
+ * the server has the latest state of all documents.
+ *
+ * @param workspaceId - The workspace ID
+ * @param items - Array of collab items to sync, each containing objectId, collabType, stateVector, and docState
+ * @returns The batch sync response containing results for each collab
+ */
+export async function collabFullSyncBatch(
+  workspaceId: string,
+  items: Array<{
+    objectId: string;
+    collabType: Types;
+    stateVector: Uint8Array;
+    docState: Uint8Array;
+  }>
+): Promise<void> {
+  const url = `/api/workspace/v1/${workspaceId}/collab/full-sync/batch`;
+
+  // Import the collab proto types
+  const { collab } = await import('@/proto/messages');
+
+  // Build the protobuf request
+  const request = collab.CollabBatchSyncRequest.create({
+    items: items.map((item) => ({
+      objectId: item.objectId,
+      collabType: item.collabType,
+      compression: collab.PayloadCompressionType.COMPRESSION_NONE,
+      sv: item.stateVector,
+      docState: item.docState,
+    })),
+    responseCompression: collab.PayloadCompressionType.COMPRESSION_NONE,
+  });
+
+  // Encode the request to binary
+  const encoded = collab.CollabBatchSyncRequest.encode(request).finish();
+
+  let deviceId = localStorage.getItem('x-device-id');
+
+  if (!deviceId) {
+    deviceId = nanoid(8);
+    localStorage.setItem('x-device-id', deviceId);
+  }
+
+  // Send the request with protobuf content type
+  const response = await axiosInstance?.post(url, encoded, {
+    headers: {
+      'Content-Type': 'application/octet-stream',
+      'client-version': 'web',
+      'device-id': deviceId,
+    },
+    responseType: 'arraybuffer',
+  });
+
+  if (!response || response.status !== 200) {
+    throw new Error(`Failed to sync collabs: ${response?.status}`);
+  }
+
+  // Decode and check the response for errors
+  const responseData = new Uint8Array(response.data);
+  const batchResponse = collab.CollabBatchSyncResponse.decode(responseData);
+
+  // Check for any errors in the results
+  for (const result of batchResponse.results) {
+    if (result.error) {
+      Log.warn('Collab sync error', {
+        objectId: result.objectId,
+        collabType: result.collabType,
+        error: result.error,
+      });
+    }
+  }
+}
+
 export async function getCollab(workspaceId: string, objectId: string, collabType: Types) {
   const url = `/api/workspace/v1/${workspaceId}/collab/${objectId}`;
 

src/application/services/js-services/sync-protocol.ts

@@ -20,6 +20,12 @@ export interface SyncContext {
    * Emit function to send messages back to the server.
    */
   emit: (reply: messages.IMessage) => void;
+  /**
+   * Flush function to immediately send any pending updates.
+   * This is used before operations like duplicate to ensure all local changes
+   * are synced to the server.
+   */
+  flush?: () => void;
 }
 
 interface AwarenessEvent {
@@ -127,6 +133,7 @@ export const initSync = (ctx: SyncContext) => {
   let onAwarenessChange;
   const updates: Uint8Array[] = [];
   const debounced = debounce(() => {
+    if (updates.length === 0) return; // Skip if no pending updates
     const mergedUpdates = Y.mergeUpdates(updates);
 
     updates.length = 0; // Clear the updates array without GC overhead
@@ -141,6 +148,12 @@ export const initSync = (ctx: SyncContext) => {
       },
     });
   }, 250);
+
+  // Store flush function in context for external access
+  ctx.flush = () => {
+    debounced.flush();
+  };
+
   const onUpdate = (update: Uint8Array, origin: string) => {
     if (origin === 'remote') {
       return; // Ignore remote updates

src/components/app/app-overlay/AppOverlayContext.ts

@@ -6,6 +6,15 @@ export const AppOverlayContext = createContext<{
   openManageSpaceModal: (viewId: string) => void;
   openCreateSpaceModal: () => void;
   openDeleteSpaceModal: (viewId: string) => void;
+  /**
+   * Show a blocking loading overlay that prevents user interaction.
+   * Used during operations like duplicate to prevent opening incomplete pages.
+   */
+  showBlockingLoader: (message?: string) => void;
+  /**
+   * Hide the blocking loading overlay.
+   */
+  hideBlockingLoader: () => void;
 }>({
   openRenameModal: () => {
     //
@@ -22,6 +31,12 @@ export const AppOverlayContext = createContext<{
   openDeleteSpaceModal: () => {
     //
   },
+  showBlockingLoader: () => {
+    //
+  },
+  hideBlockingLoader: () => {
+    //
+  },
 });
 
 export function useAppOverlayContext () {

src/components/app/app-overlay/AppOverlayProvider.tsx

@@ -1,5 +1,6 @@
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
+import LoadingDots from '@/components/_shared/LoadingDots';
 import { findView } from '@/components/_shared/outline/utils';
 import { AppOverlayContext } from '@/components/app/app-overlay/AppOverlayContext';
 import { useAppHandlers, useAppOutline } from '@/components/app/app.hooks';
@@ -19,7 +20,16 @@ export function AppOverlayProvider ({
   const [manageSpaceId, setManageSpaceId] = useState<string | null>(null);
   const [createSpaceModalOpen, setCreateSpaceModalOpen] = useState(false);
   const [deleteSpaceId, setDeleteSpaceId] = useState<string | null>(null);
+  const [blockingLoaderMessage, setBlockingLoaderMessage] = useState<string | null>(null);
   const { updatePage } = useAppHandlers();
+
+  const showBlockingLoader = useCallback((message?: string) => {
+    setBlockingLoaderMessage(message || 'Loading...');
+  }, []);
+
+  const hideBlockingLoader = useCallback(() => {
+    setBlockingLoaderMessage(null);
+  }, []);
   const outline = useAppOutline();
   const renameView = useMemo(() => {
     if (!renameViewId) return null;
@@ -38,6 +48,8 @@ export function AppOverlayProvider ({
           setCreateSpaceModalOpen(true);
         },
         openDeleteSpaceModal: setDeleteSpaceId,
+        showBlockingLoader,
+        hideBlockingLoader,
       }}
     >
       {children}
@@ -80,6 +92,18 @@ export function AppOverlayProvider ({
           }
         }
       />}
+      {/* Blocking loader overlay - prevents user interaction during operations like duplicate */}
+      {blockingLoaderMessage && (
+        <div
+          className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50"
+          data-testid="blocking-loader"
+        >
+          <div className="flex flex-col items-center gap-4 rounded-lg bg-bg-body p-6 shadow-lg">
+            <LoadingDots />
+            <span className="text-text-title">{blockingLoaderMessage}</span>
+          </div>
+        </div>
+      )}
     </AppOverlayContext.Provider>
   );
 }

src/components/app/contexts/SyncInternalContext.ts

@@ -22,6 +22,17 @@ export interface SyncInternalContextType {
   eventEmitter: EventEmitter;
   awarenessMap: Record<string, Awareness>;
   lastUpdatedCollab: UpdateCollabInfo | null;
+  /**
+   * Flush all pending updates for all registered sync contexts.
+   * This ensures all local changes are sent to the server before operations like duplicate.
+   */
+  flushAllSync: () => void;
+  /**
+   * Sync all registered collab documents to the server via HTTP API.
+   * This is similar to desktop's collab_full_sync_batch - it sends the full doc state
+   * to ensure the server has the latest data before operations like duplicate.
+   */
+  syncAllToServer: (workspaceId: string) => Promise<void>;
 }
 
 export const SyncInternalContext = createContext<SyncInternalContextType | null>(null);

src/components/app/header/MoreActionsContent.tsx

@@ -10,6 +10,7 @@ import { ReactComponent as MoveToIcon } from '@/assets/icons/move_to.svg';
 import { findView } from '@/components/_shared/outline/utils';
 import { useAppOverlayContext } from '@/components/app/app-overlay/AppOverlayContext';
 import { useAppHandlers, useAppOutline, useAppView, useCurrentWorkspaceId } from '@/components/app/app.hooks';
+import { useSyncInternal } from '@/components/app/contexts/SyncInternalContext';
 import MovePagePopover from '@/components/app/view-actions/MovePagePopover';
 import { useService } from '@/components/main/app.hooks';
 import { DropdownMenuGroup, DropdownMenuItem } from '@/components/ui/dropdown-menu';
@@ -23,6 +24,8 @@ function MoreActionsContent({ itemClicked, viewId }: {
   const { t } = useTranslation();
   const {
     openDeleteModal,
+    showBlockingLoader,
+    hideBlockingLoader,
   } = useAppOverlayContext();
   const service = useService();
   const workspaceId = useCurrentWorkspaceId();
@@ -40,20 +43,28 @@ function MoreActionsContent({ itemClicked, viewId }: {
   const {
     refreshOutline,
   } = useAppHandlers();
+  const { syncAllToServer } = useSyncInternal();
   const handleDuplicateClick = useCallback(async () => {
     if (!workspaceId || !service) return;
     itemClicked?.();
-    toast.loading(`${t('moreAction.duplicateView')}...`);
+    // Show blocking loader to prevent user from interacting with the UI
+    // (e.g., clicking on the duplicated page before it's fully created)
+    showBlockingLoader(`${t('moreAction.duplicateView')}...`);
     try {
+      // Sync all collab documents to the server via HTTP API before duplicating
+      // This is similar to desktop's collab_full_sync_batch - ensures the server
+      // has the latest data before the duplicate operation
+      await syncAllToServer(workspaceId);
       await service.duplicateAppPage(workspaceId, viewId);
       void refreshOutline?.();
       itemClicked?.();
       // eslint-disable-next-line
     } catch (e: any) {
-      toast.dismiss();
       toast.error(e.message);
+    } finally {
+      hideBlockingLoader();
     }
-  }, [workspaceId, service, viewId, refreshOutline, itemClicked, t]);
+  }, [workspaceId, service, viewId, refreshOutline, itemClicked, t, syncAllToServer, showBlockingLoader, hideBlockingLoader]);
 
   const [container, setContainer] = useState<HTMLElement | null>(null);
   const containerRef = useCallback((el: HTMLElement | null) => {

src/components/app/layers/AppSyncLayer.tsx

@@ -49,7 +49,7 @@ export const AppSyncLayer: React.FC<AppSyncLayerProps> = ({ children }) => {
   const broadcastChannel = useBroadcastChannel(`workspace:${currentWorkspaceId!}`);
 
   // Initialize sync context for collaborative editing
-  const { registerSyncContext, lastUpdatedCollab } = useSync(webSocket, broadcastChannel, eventEmitterRef.current);
+  const { registerSyncContext, lastUpdatedCollab, flushAllSync, syncAllToServer } = useSync(webSocket, broadcastChannel, eventEmitterRef.current);
 
   // Handle WebSocket reconnection
   const reconnectWebSocket = useCallback(() => {
@@ -294,8 +294,10 @@ export const AppSyncLayer: React.FC<AppSyncLayerProps> = ({ children }) => {
       eventEmitter: eventEmitterRef.current,
       awarenessMap,
       lastUpdatedCollab,
+      flushAllSync,
+      syncAllToServer,
     }),
-    [webSocket, broadcastChannel, registerSyncContext, awarenessMap, lastUpdatedCollab]
+    [webSocket, broadcastChannel, registerSyncContext, awarenessMap, lastUpdatedCollab, flushAllSync, syncAllToServer]
   );
 
   return <SyncInternalContext.Provider value={syncContextValue}>{children}</SyncInternalContext.Provider>;