Better UX for screen loading of strokes

bchou9 · bchou9 · commit aa708b329c2f · 2025-11-10T05:29:17.000Z
diff --git a/frontend/src/components/Canvas.js b/frontend/src/components/Canvas.js
@@ -164,6 +164,8 @@ function Canvas({
   const lastDrawnStateRef = useRef(null); // Track last drawn state to avoid redundant redraws
   const isDrawingInProgressRef = useRef(false); // Prevent concurrent drawing operations
   const offscreenCanvasRef = useRef(null); // Offscreen canvas for flicker free rendering
+  const cachedCanvasRef = useRef(null); // Cached canvas for incremental rendering
+  const cachedDrawingIdsRef = useRef(new Set()); // Track which drawings are in the cache
   const forceNextRedrawRef = useRef(false); // Force next redraw even if signature matches for undo redo
   const [historyMode, setHistoryMode] = useState(false);
   const [historyRange, setHistoryRange] = useState(null); // {start, end} in epoch ms
@@ -888,6 +890,8 @@ function Canvas({
         drawingType: "stamp",
         stampData: stamp,
         stampSettings: settings,
+        isPending: true,  // Mark as pending for visual confirmation
+        opacity: 0.5,     // Reduced opacity for pending stamps
       }
     );
 
@@ -919,6 +923,16 @@ function Canvas({
 
           console.log("Stamp submitted successfully:", stampDrawing.drawingId);
 
+          // Mark stamp as confirmed
+          stampDrawing.isPending = false;
+          stampDrawing.opacity = 1.0;
+          confirmedStrokesRef.current.add(stampDrawing.drawingId);
+          
+          // Trigger a redraw to show the confirmed state
+          requestAnimationFrame(() => {
+            drawAllDrawings();
+          });
+
           if (currentRoomId) {
             checkUndoRedoAvailability(
               auth,
@@ -1712,6 +1726,38 @@ function Canvas({
         return;
       }
 
+      // Check if we can do incremental rendering (only new drawings added, no cuts/filters/etc)
+      const canUseIncrementalRendering = lastDrawnStateRef.current && 
+        cachedCanvasRef.current &&
+        cachedDrawingIdsRef.current.size > 0 &&
+        combined.length > cachedDrawingIdsRef.current.size &&
+        !combined.some(d => d.drawingType === "filter" || (d.pathData && d.pathData.tool === "cut")) &&
+        currentTemplateObjects?.length === 0;
+
+      let newDrawingsOnly = [];
+      if (canUseIncrementalRendering) {
+        // Find drawings that aren't in the cache
+        newDrawingsOnly = combined.filter(d => !cachedDrawingIdsRef.current.has(d.drawingId));
+        
+        // Verify all cached drawings are still present
+        const currentIds = new Set(combined.map(d => d.drawingId));
+        const allCachedPresent = Array.from(cachedDrawingIdsRef.current).every(id => currentIds.has(id));
+        
+        if (newDrawingsOnly.length > 0 && allCachedPresent && newDrawingsOnly.length <= 5) {
+          console.log(`Incremental rendering: adding ${newDrawingsOnly.length} new drawings`);
+          // We can use incremental rendering!
+        } else {
+          // Fall back to full redraw
+          newDrawingsOnly = [];
+          cachedCanvasRef.current = null;
+          cachedDrawingIdsRef.current.clear();
+        }
+      } else {
+        // Clear cache - we need full redraw
+        cachedCanvasRef.current = null;
+        cachedDrawingIdsRef.current.clear();
+      }
+
       // Clear force flag after checking it
       forceNextRedrawRef.current = false;
       lastDrawnStateRef.current = stateSignature;
@@ -1728,7 +1774,16 @@ function Canvas({
 
       const offscreenContext = offscreenCanvasRef.current.getContext("2d");
       offscreenContext.imageSmoothingEnabled = false;
-      offscreenContext.clearRect(0, 0, canvasWidth, canvasHeight);
+      
+      // If we can do incremental rendering, start from cached canvas
+      if (newDrawingsOnly.length > 0 && cachedCanvasRef.current) {
+        console.log("[drawAllDrawings] Using incremental rendering - copying from cache");
+        offscreenContext.clearRect(0, 0, canvasWidth, canvasHeight);
+        offscreenContext.drawImage(cachedCanvasRef.current, 0, 0);
+      } else {
+        // Full redraw
+        offscreenContext.clearRect(0, 0, canvasWidth, canvasHeight);
+      }
 
       // This avoids async rendering issues with image stamps
       const stampsToRender = [];
@@ -1881,7 +1936,11 @@ function Canvas({
       const maskedOriginals = new Set();
       let seenAnyCut = false;
 
-      for (const drawing of regularDrawings) {
+      // If doing incremental rendering, only draw new drawings
+      const drawingsToRender = newDrawingsOnly.length > 0 ? newDrawingsOnly : regularDrawings;
+      console.log(`[drawAllDrawings] Rendering ${drawingsToRender.length} drawings (incremental: ${newDrawingsOnly.length > 0})`);
+
+      for (const drawing of drawingsToRender) {
         // If this is a cut record, apply the erase to the canvas now.
         if (drawing && drawing.pathData && drawing.pathData.tool === "cut") {
           seenAnyCut = true;
@@ -1976,6 +2035,13 @@ function Canvas({
             offscreenContext.globalAlpha = 0.1;
           }
         }
+        
+        // Apply opacity for pending strokes (visual confirmation)
+        if (drawing.isPending) {
+          offscreenContext.globalAlpha *= 0.5;
+        } else if (drawing.opacity !== undefined && drawing.opacity !== 1.0) {
+          offscreenContext.globalAlpha *= drawing.opacity;
+        }
 
         // Stamps have pathData as array but need special rendering - render inline to preserve z-order
         if (drawing.drawingType === "stamp" && drawing.stampData && drawing.stampSettings && Array.isArray(drawing.pathData) && drawing.pathData.length > 0) {
@@ -2228,10 +2294,27 @@ function Canvas({
       }
 
       // Copy offscreen canvas to visible canvas atomically
-      console.log("[drawAllDrawings] Copying offscreen canvas to visible canvas. Total strokes rendered:", regularDrawings.length, "filters:", filterDrawings.length);
+      console.log("[drawAllDrawings] Copying offscreen canvas to visible canvas. Total strokes rendered:", drawingsToRender.length, "filters:", filterDrawings.length);
       context.imageSmoothingEnabled = false;
       context.clearRect(0, 0, canvasWidth, canvasHeight);
       context.drawImage(offscreenCanvasRef.current, 0, 0);
+      
+      // Update cache after successful render (only if no filters/cuts and not in incremental mode)
+      if (filterDrawings.length === 0 && !combined.some(d => d.pathData && d.pathData.tool === "cut")) {
+        if (!cachedCanvasRef.current || cachedCanvasRef.current.width !== canvasWidth || cachedCanvasRef.current.height !== canvasHeight) {
+          cachedCanvasRef.current = document.createElement("canvas");
+          cachedCanvasRef.current.width = canvasWidth;
+          cachedCanvasRef.current.height = canvasHeight;
+        }
+        const cacheContext = cachedCanvasRef.current.getContext("2d");
+        cacheContext.clearRect(0, 0, canvasWidth, canvasHeight);
+        cacheContext.drawImage(offscreenCanvasRef.current, 0, 0);
+        
+        // Update cached drawing IDs
+        cachedDrawingIdsRef.current = new Set(combined.map(d => d.drawingId));
+        console.log(`[drawAllDrawings] Cached ${cachedDrawingIdsRef.current.size} drawings for future incremental rendering`);
+      }
+      
       console.log("[drawAllDrawings] Canvas update complete");
     } catch (e) {
       console.error("Error in drawAllDrawings:", e);
@@ -3384,6 +3467,8 @@ function Canvas({
           brushType: currentBrushType,
           brushParams: brushParams,
           drawingType: "stroke",
+          isPending: true,  // Mark as pending for visual confirmation
+          opacity: 0.5,     // Reduced opacity for pending strokes
         }
       );
       newDrawing.roomId = currentRoomId;
@@ -3422,7 +3507,15 @@ function Canvas({
               setRedoAvailable
             );
 
-            // Don't remove from pending here - let mergedRefreshCanvas or socket confirmation handle it
+            // Mark stroke as confirmed by updating it in userData
+            newDrawing.isPending = false;
+            newDrawing.opacity = 1.0;
+            confirmedStrokesRef.current.add(newDrawing.drawingId);
+            
+            // Trigger a redraw to show the confirmed state
+            requestAnimationFrame(() => {
+              drawAllDrawings();
+            });
 
             if (currentRoomId) {
               checkUndoRedoAvailability(
@@ -3526,6 +3619,8 @@ function Canvas({
           brushType: currentBrushType,
           brushParams: brushParams,
           drawingType: "shape",
+          isPending: true,  // Mark as pending for visual confirmation
+          opacity: 0.5,     // Reduced opacity for pending strokes
         }
       );
       newDrawing.roomId = currentRoomId;
@@ -3555,7 +3650,15 @@ function Canvas({
             setRedoAvailable
           );
 
-          // Don't remove from pending here - let mergedRefreshCanvas or socket confirmation handle it
+          // Mark stroke as confirmed
+          newDrawing.isPending = false;
+          newDrawing.opacity = 1.0;
+          confirmedStrokesRef.current.add(newDrawing.drawingId);
+          
+          // Trigger a redraw to show the confirmed state
+          requestAnimationFrame(() => {
+            drawAllDrawings();
+          });
 
           // Update undo/redo availability after shape submission
           if (currentRoomId) {
diff --git a/frontend/src/lib/drawing.js b/frontend/src/lib/drawing.js
@@ -17,6 +17,10 @@ export class Drawing {
     this.stampSettings = metadata.stampSettings || null;
     this.filterType = metadata.filterType || null;
     this.filterParams = metadata.filterParams || {};
+    
+    // Pending state for visual confirmation
+    this.isPending = metadata.isPending || false;
+    this.opacity = metadata.opacity !== undefined ? metadata.opacity : 1.0;
   }
 
   // Serialize metadata for backend storage
@@ -29,7 +33,9 @@ export class Drawing {
       stampData: this.stampData,
       stampSettings: this.stampSettings,
       filterType: this.filterType,
-      filterParams: this.filterParams
+      filterParams: this.filterParams,
+      isPending: this.isPending,
+      opacity: this.opacity
     };
   }
 
@@ -48,6 +54,8 @@ export class Drawing {
       stampSettings: data.stampSettings || metadata.stampSettings || null,
       filterType: data.filterType || metadata.filterType || null,
       filterParams: data.filterParams || metadata.filterParams || {},
+      isPending: data.isPending || metadata.isPending || false,
+      opacity: data.opacity !== undefined ? data.opacity : (metadata.opacity !== undefined ? metadata.opacity : 1.0)
     };
 
     return new Drawing(
diff --git a/frontend/src/services/canvasBackendJWT.js b/frontend/src/services/canvasBackendJWT.js
@@ -14,6 +14,38 @@ import { signStrokeForSecureRoom, isWalletConnected } from "../wallet/resvault";
 import { API_BASE } from "../config/apiConfig";
 import { Drawing } from "../lib/drawing";
 
+// Retry with exponential backoff
+const retryWithBackoff = async (fn, maxRetries = 3, baseDelay = 1000) => {
+  let lastError;
+  
+  for (let attempt = 0; attempt < maxRetries; attempt++) {
+    try {
+      return await fn();
+    } catch (error) {
+      lastError = error;
+      
+      // Don't retry on authentication errors or validation errors
+      if (error.response?.status === 401 || error.response?.status === 403 || error.response?.status === 400) {
+        throw error;
+      }
+      
+      // If this was the last attempt, throw the error
+      if (attempt === maxRetries - 1) {
+        break;
+      }
+      
+      // Calculate exponential backoff delay: baseDelay * 2^attempt
+      const delay = baseDelay * Math.pow(2, attempt);
+      console.log(`Retry attempt ${attempt + 1}/${maxRetries} after ${delay}ms delay`);
+      
+      // Wait before retrying
+      await new Promise(resolve => setTimeout(resolve, delay));
+    }
+  }
+  
+  throw lastError;
+};
+
 export const submitToDatabase = async (
   drawing,
   auth,
@@ -131,12 +163,19 @@ export const submitToDatabase = async (
     });
     console.log("Full strokeData object:", strokeData);
 
-    await postRoomStroke(
-      token,
-      options.roomId,
-      strokeData,
-      signature,
-      signerPubKey
+    // Submit with retry logic (max 3 attempts with exponential backoff)
+    await retryWithBackoff(
+      async () => {
+        await postRoomStroke(
+          token,
+          options.roomId,
+          strokeData,
+          signature,
+          signerPubKey
+        );
+      },
+      3,
+      1000
     );
 
     if (!options.skipUndoCheck && setUndoAvailable && setRedoAvailable) {
@@ -266,15 +305,22 @@ export const submitBatchToDatabase = async (
 
       console.log(`Submitting batch ${i / BATCH_SIZE + 1}: ${strokes.length} strokes`);
 
-      const result = await postRoomStrokesBatch(
-        token,
-        options.roomId,
-        strokes,
-        {
-          skipUndoStack: options.skipUndoStack || false,
-          signature,
-          signerPubKey
-        }
+      // Submit with retry logic (max 3 attempts with exponential backoff)
+      const result = await retryWithBackoff(
+        async () => {
+          return await postRoomStrokesBatch(
+            token,
+            options.roomId,
+            strokes,
+            {
+              skipUndoStack: options.skipUndoStack || false,
+              signature,
+              signerPubKey
+            }
+          );
+        },
+        3,
+        1000
       );
 
       totalProcessed += result.processed || 0;
