From 254fcc3dc9106f61a16020c8762e04f5d59e5f93 Mon Sep 17 00:00:00 2001
From: Tim Down <158919+timdown@users.noreply.github.com>
Date: Tue, 5 Sep 2023 15:46:51 +0100
Subject: [PATCH] Merge pull request #14622 from
 overleaf/td-em-resize-observer-error

Prevent ResizeObserver errors from PDF viewer wrapper

GitOrigin-RevId: 3ea652e0ab4387a21ef2d3adb694129fca3c1909
---
 .../pdf-preview/util/pdf-js-wrapper.js        | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/services/web/frontend/js/features/pdf-preview/util/pdf-js-wrapper.js b/services/web/frontend/js/features/pdf-preview/util/pdf-js-wrapper.js
index 5da610806d..bbfba43777 100644
--- a/services/web/frontend/js/features/pdf-preview/util/pdf-js-wrapper.js
+++ b/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
+    // 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
-    }
+      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