fix: animate primary drawer open and close transition (#6099) (#6102)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>

Author: vaadin-bot

packages/app-layout/src/vaadin-app-layout.js

@@ -459,8 +459,13 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
 
     this._navbarSizeObserver = new ResizeObserver(() => {
       requestAnimationFrame(() => {
-        this._blockAnimationUntilAfterNextRender();
-        this._updateOffsetSize();
+        // Prevent updating offset size multiple times
+        // during the drawer open / close transition.
+        if (this.__isDrawerAnimating) {
+          this.__updateOffsetSizePending = true;
+        } else {
+          this._updateOffsetSize();
+        }
       });
     });
     this._navbarSizeObserver.observe(this.$.navbarTop);
@@ -474,6 +479,24 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
     super.ready();
     this.addController(this.__focusTrapController);
     this.__setAriaExpanded();
+
+    this.$.drawer.addEventListener('transitionstart', () => {
+      this.__isDrawerAnimating = true;
+    });
+
+    this.$.drawer.addEventListener('transitionend', () => {
+      // Update offset size after drawer animation.
+      if (this.__updateOffsetSizePending) {
+        this.__updateOffsetSizePending = false;
+        this._updateOffsetSize();
+      }
+
+      // Delay resetting the flag until animation frame
+      // to avoid updating offset size again on resize.
+      requestAnimationFrame(() => {
+        this.__isDrawerAnimating = false;
+      });
+    });
   }
 
   /** @protected */

packages/app-layout/test/app-layout.test.js

@@ -274,6 +274,23 @@ describe('vaadin-app-layout', () => {
         layout.drawerOpened = true;
         expect(toggle.getAttribute('aria-expanded')).to.equal('true');
       });
+
+      it('should only update offset size once during the drawer transition', async () => {
+        layout.primarySection = 'drawer';
+        await onceResized(layout);
+        await nextRender();
+
+        layout.style.setProperty('--vaadin-app-layout-transition', '100ms');
+
+        const spy = sinon.spy(layout, '_updateOffsetSize');
+        toggle.click();
+        await oneEvent(drawer, 'transitionend');
+
+        expect(spy.callCount).to.be.equal(1);
+        await nextFrame();
+
+        expect(spy.callCount).to.be.equal(1);
+      });
     });
 
     describe('mobile layout', () => {