fix: use a delay in the app layout resize observer (#5575) (#5679)

vaadin · Mar 17, 2023 · ae409a5 · ae409a5
1 parent dac5c86
commit ae409a5
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 6 deletions.
diff --git a/packages/app-layout/src/vaadin-app-layout.js b/packages/app-layout/src/vaadin-app-layout.js
@@ -452,8 +452,10 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
     this._updateOverlayMode();
 
     this._navbarSizeObserver = new ResizeObserver(() => {
-      this._blockAnimationUntilAfterNextRender();
-      this._updateOffsetSize();
+      requestAnimationFrame(() => {
+        this._blockAnimationUntilAfterNextRender();
+        this._updateOffsetSize();
+      });
     });
     this._navbarSizeObserver.observe(this.$.navbarTop);
     this._navbarSizeObserver.observe(this.$.navbarBottom);

diff --git a/packages/app-layout/test/app-layout.test.js b/packages/app-layout/test/app-layout.test.js
@@ -12,6 +12,26 @@ import sinon from 'sinon';
 import '../vaadin-app-layout.js';
 import '../vaadin-drawer-toggle.js';
 
+/**
+ * Resolves once the function is invoked on the given object.
+ */
+function onceInvoked(object, functionName) {
+  return new Promise((resolve) => {
+    sinon.replace(object, functionName, (...args) => {
+      sinon.restore();
+      object[functionName](...args);
+      resolve();
+    });
+  });
+}
+
+/**
+ * Resolves once the ResizeObserver has processed a resize.
+ */
+async function onceResized(layout) {
+  await onceInvoked(layout, '_updateOffsetSize');
+}
+
 describe('vaadin-app-layout', () => {
   let layout;
 
@@ -90,12 +110,12 @@ describe('vaadin-app-layout', () => {
         navbarContent.style.height = '50px';
         navbarContent.setAttribute('slot', 'navbar');
         layout.appendChild(navbarContent);
-        await nextFrame();
+        await onceResized(layout);
         const initialOffset = parseInt(getComputedStyle(layout).getPropertyValue('padding-top'));
         expect(initialOffset).to.be.greaterThan(0);
         // Increase navbar content size and measure increase
         navbarContent.style.height = '100px';
-        await nextFrame();
+        await onceResized(layout);
         const updatedOffset = parseInt(getComputedStyle(layout).getPropertyValue('padding-top'));
         expect(updatedOffset).to.equal(initialOffset + 50);
       });
@@ -134,12 +154,12 @@ describe('vaadin-app-layout', () => {
         navbarContent.style.height = '50px';
         navbarContent.setAttribute('slot', 'navbar touch-optimized');
         layout.appendChild(navbarContent);
-        await nextFrame();
+        await onceResized(layout);
         const initialOffset = parseInt(getComputedStyle(layout).getPropertyValue('padding-bottom'));
         expect(initialOffset).to.be.greaterThan(0);
         // Increase navbar content size and measure increase
         navbarContent.style.height = '100px';
-        await nextFrame();
+        await onceResized(layout);
         const updatedOffset = parseInt(getComputedStyle(layout).getPropertyValue('padding-bottom'));
         expect(updatedOffset).to.equal(initialOffset + 50);
       });
@@ -167,6 +187,9 @@ describe('vaadin-app-layout', () => {
       toggle = layout.querySelector('#toggle');
       drawer = layout.shadowRoot.querySelector('[part=drawer]');
       backdrop = layout.shadowRoot.querySelector('[part=backdrop]');
+      // Wait for the initial resize observer callback
+      await onceResized(layout);
+      await nextFrame();
     }
 
     describe('desktop layout', () => {