UX: call discourseLater on menu animations (discourse#24168)

featheredtoast · web-flow · commit 974c508cc8f9 · 2023-10-30T18:43:20.000-07:00
* UX: add discourseLater call to add breathing room for animation

Allow for smoother animations on lower end devices.
Create time between render and animations.

extend panel width targets by 20 px to account for shadows as well
diff --git a/app/assets/javascripts/discourse/app/components/site-header.js b/app/assets/javascripts/discourse/app/components/site-header.js
@@ -9,6 +9,7 @@ import SwipeEvents from "discourse/lib/swipe-events";
 import Docking from "discourse/mixins/docking";
 import RerenderOnDoNotDisturbChange from "discourse/mixins/rerender-on-do-not-disturb-change";
 import { isTesting } from "discourse-common/config/environment";
+import discourseLater from "discourse-common/lib/later";
 import { bind, observes } from "discourse-common/utils/decorators";
 
 const SiteHeaderComponent = MountWidget.extend(
@@ -23,7 +24,7 @@ const SiteHeaderComponent = MountWidget.extend(
     _topic: null,
     _itsatrap: null,
     _applicationElement: null,
-    _PANEL_WIDTH: 320,
+    _PANEL_WIDTH: 340,
     _swipeEvents: null,
 
     @observes(
@@ -387,7 +388,14 @@ const SiteHeaderComponent = MountWidget.extend(
 
           headerCloak.animate([{ opacity: 0 }], { fill: "forwards" });
           headerCloak.style.display = "block";
-          animationFinished.then(() => this._animateOpening(panel));
+
+          animationFinished.then(() => {
+            if (isTesting()) {
+              this._animateOpening(panel);
+            } else {
+              discourseLater(() => this._animateOpening(panel));
+            }
+          });
         }
 
         this._animate = false;
diff --git a/app/assets/javascripts/discourse/app/widgets/header.js b/app/assets/javascripts/discourse/app/widgets/header.js
@@ -11,8 +11,10 @@ import { scrollTop } from "discourse/mixins/scroll-top";
 import { avatarImg } from "discourse/widgets/post";
 import RenderGlimmer from "discourse/widgets/render-glimmer";
 import { createWidget } from "discourse/widgets/widget";
+import { isTesting } from "discourse-common/config/environment";
 import getURL from "discourse-common/lib/get-url";
 import { iconNode } from "discourse-common/lib/icon-library";
+import discourseLater from "discourse-common/lib/later";
 import I18n from "discourse-i18n";
 
 const SEARCH_BUTTON_ID = "search-button";
@@ -358,15 +360,21 @@ createWidget("revamped-hamburger-menu-wrapper", {
       const headerCloak = document.querySelector(".header-cloak");
       const finishPosition =
         document.querySelector("html").classList["direction"] === "rtl"
-          ? "320px"
-          : "-320px";
+          ? "340px"
+          : "-340px";
       panel
         .animate([{ transform: `translate3d(${finishPosition}, 0, 0)` }], {
           duration: 200,
           fill: "forwards",
           easing: "ease-in",
         })
-        .finished.then(() => this.sendWidgetAction("toggleHamburger"));
+        .finished.then(() => {
+          if (isTesting()) {
+            this.sendWidgetAction("toggleHamburger");
+          } else {
+            discourseLater(() => this.sendWidgetAction("toggleHamburger"));
+          }
+        });
       headerCloak.animate([{ opacity: 0 }], {
         duration: 200,
         fill: "forwards",
@@ -409,15 +417,21 @@ createWidget("revamped-user-menu-wrapper", {
       const headerCloak = document.querySelector(".header-cloak");
       const finishPosition =
         document.querySelector("html").classList["direction"] === "rtl"
-          ? "-320px"
-          : "320px";
+          ? "-340px"
+          : "340px";
       panel
         .animate([{ transform: `translate3d(${finishPosition}, 0, 0)` }], {
           duration: 200,
           fill: "forwards",
           easing: "ease-in",
         })
-        .finished.then(() => this.closeUserMenu());
+        .finished.then(() => {
+          if (isTesting) {
+            this.closeUserMenu();
+          } else {
+            discourseLater(() => this.closeUserMenu());
+          }
+        });
       headerCloak.animate([{ opacity: 0 }], {
         duration: 200,
         fill: "forwards",
