Merge pull request #14622 from overleaf/td-em-resize-observer-error

Prevent ResizeObserver errors from PDF viewer wrapper

GitOrigin-RevId: 3ea652e0ab4387a21ef2d3adb694129fca3c1909

services/web/frontend/js/features/pdf-preview/util/pdf-js-wrapper.js

@@ -139,17 +139,24 @@ export default class PDFJSWrapper {
       return
     }
 
-    const currentScaleValue = this.viewer.currentScaleValue
-
-    if (
-      currentScaleValue === 'auto' ||
-      currentScaleValue === 'page-fit' ||
-      currentScaleValue === 'page-width'
-    ) {
-      this.viewer.currentScaleValue = currentScaleValue
-    }
+    // Use requestAnimationFrame to prevent errors like "ResizeObserver loop
+    // completed with undelivered notifications" that can occur if updating the
+    // viewer causes another repaint. The cost of this is that the viewer update
+    // lags one frame behind, but it's unlikely to matter.
+    // Further reading: https://github.com/WICG/resize-observer/issues/38
+    window.requestAnimationFrame(() => {
+      const currentScaleValue = this.viewer.currentScaleValue
+
+      if (
+        currentScaleValue === 'auto' ||
+        currentScaleValue === 'page-fit' ||
+        currentScaleValue === 'page-width'
+      ) {
+        this.viewer.currentScaleValue = currentScaleValue
+      }
 
-    this.viewer.update()
+      this.viewer.update()
+    })
   }
 
   // get the page and offset of a click event