fix(with-resize-observer): prevent layout shifts

CleverCloud · Dec 1, 2022 · 07cc728 · 07cc728
1 parent e47bab5
commit 07cc728
Showing 1 changed file with 11 additions and 4 deletions.
diff --git a/src/mixins/with-resize-observer/with-resize-observer.js b/src/mixins/with-resize-observer/with-resize-observer.js
@@ -31,12 +31,19 @@ export function withResizeObserver (ParentClass) {
       if (window.ResizeObserver == null) {
         return;
       }
+      let first = true;
       const ro = new window.ResizeObserver(() => {
-        window.requestAnimationFrame(() => {
-          // NOTE: We could use entries[0].borderBoxSize.inlineSize but not supported in Chrome, Safari or polyfill
-          const { width } = this.getBoundingClientRect();
+        // NOTE: We could use entries[0].borderBoxSize.inlineSize but not supported in Chrome, Safari or polyfill
+        const { width } = this.getBoundingClientRect();
+        if (first) {
+          first = false;
           this._onResize({ width });
-        });
+        }
+        else {
+          window.requestAnimationFrame(() => {
+            this._onResize({ width });
+          });
+        }
       });
       ro.observe(this);
       this._unobserveResize = () => ro.unobserve(this);