Delay menu interaction until the page is loaded

User menu providers are registered asynchronously and the UI does not know once they are all ready.

See https://www.woltlab.com/community/thread/295264-userpanel-l%C3%A4dt-unvollst%C3%A4ndig/

diff --git a/ts/WoltLabSuite/Core/Ui/Page/Menu/User.ts b/ts/WoltLabSuite/Core/Ui/Page/Menu/User.ts
index 13a0da08009a64d97b1f6216c8160c53731e6915..54bd4fc41da92349031a0da8fec7b6ef946ff7d5 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Page/Menu/User.ts
+++ b/ts/WoltLabSuite/Core/Ui/Page/Menu/User.ts
@@ -56,11 +56,25 @@ export class PageMenuUser implements PageMenuProvider {
 
     this.container = new PageMenuContainer(this, Orientation.Right);
 
+    const isReady = new Promise<void>((resolve) => {
+      if (document.readyState === "complete") {
+        resolve();
+      } else {
+        document.addEventListener("readystatechange", () => {
+          if (document.readyState === "complete") {
+            resolve();
+          }
+        });
+      }
+    });
+
     this.callbackOpen = (event) => {
       event.preventDefault();
       event.stopPropagation();
 
-      this.container.toggle();
+      // Clicking too early while the page is still loading
+      // causes an incomplete tab menu.
+      void isReady.then(() => this.container.toggle());
     };
 
     onMediaQueryChange("screen-lg", {

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/User.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/User.js
index 72be233c6011e1f1131fb0625641028819743dd9..186f53a1526b292401671e7daa28f08061d6f10f 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/User.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/User.js
@@ -25,10 +25,24 @@ define(["require", "exports", "tslib", "./Container", "../../../Language", "../.
             this.tabs = [];
             this.userMenu = document.querySelector(".userPanel");
             this.container = new Container_1.default(this, "right" /* Right */);
+            const isReady = new Promise((resolve) => {
+                if (document.readyState === "complete") {
+                    resolve();
+                }
+                else {
+                    document.addEventListener("readystatechange", () => {
+                        if (document.readyState === "complete") {
+                            resolve();
+                        }
+                    });
+                }
+            });
             this.callbackOpen = (event) => {
                 event.preventDefault();
                 event.stopPropagation();
-                this.container.toggle();
+                // Clicking too early while the page is still loading
+                // causes an incomplete tab menu.
+                void isReady.then(() => this.container.toggle());
             };
             (0, Screen_1.on)("screen-lg", {
                 match: () => this.detachViewsFromPanel(),