Bug 1931616 - Reduce flashing when opening account hub for the first time. r=aleca

Differential Revision: https://phabricator.services.mozilla.com/D229202

--HG--
extra : amend_source : 40bb100b248737c38e69ef378ccb6c07d547e58b

mail/components/accountcreation/content/accountHub.js

@@ -148,18 +148,20 @@ class AccountHubControllerClass {
    *
    * @param {string} id - The ID of the template to clone.
    */
-  #loadView(id) {
+  async #loadView(id) {
     this.#hideViews();
 
     let view = this.#modal.querySelector(id);
     if (view) {
       view.hidden = false;
       this.#currentView = view;
+      await view.ready;
       return;
     }
     view = document.createElement(id);
     this.#modal.appendChild(view);
     this.#currentView = view;
+    await view.ready;
   }
 
   /**
@@ -177,7 +179,7 @@ class AccountHubControllerClass {
    *
    * @param {?string} type - Which account flow to load when the modal opens.
    */
-  open(type = "MAIL") {
+  async open(type = "MAIL") {
     // Interrupt if something went wrong while cleaning up a previously loaded
     // view.
     if (!this.#reset()) {
@@ -188,7 +190,7 @@ class AccountHubControllerClass {
       this.#closeButton.hidden = !MailServices.accounts.accounts.length;
     }
 
-    this.#views[type].call();
+    await this.#views[type].call();
     if (!this.#modal.open) {
       this.#modal.showModal();
     }
@@ -216,7 +218,7 @@ class AccountHubControllerClass {
    */
   async #viewStart() {
     await this.#loadScript("start");
-    this.#loadView("account-hub-start");
+    await this.#loadView("account-hub-start");
   }
 
   /**
@@ -224,7 +226,7 @@ class AccountHubControllerClass {
    */
   async #viewEmailSetup() {
     await this.#loadScript("email");
-    this.#loadView("account-hub-email");
+    await this.#loadView("account-hub-email");
   }
 
   /**
@@ -281,5 +283,5 @@ async function openAccountHub(type) {
     AccountHubController = new AccountHubControllerClass();
   }
   await AccountHubController.ready;
-  AccountHubController.open(type);
+  await AccountHubController.open(type);
 }

mail/components/accountcreation/views/email.mjs

@@ -279,7 +279,8 @@ class AccountHubEmail extends HTMLElement {
 
     this.addEventListener("submit", this);
 
-    await this.#initUI("autoConfigSubview");
+    this.ready = this.#initUI("autoConfigSubview");
+    await this.ready;
   }
 
   /**

mail/test/browser/account/browser_accountHub.js

@@ -123,6 +123,7 @@ add_task(async function test_account_hub_opening() {
 
   const dialog = hub.shadowRoot.querySelector(".account-hub-dialog");
   Assert.ok(dialog, "The dialog element should be created");
+  Assert.ok(dialog.open, "Dialog should be open");
 
   let closeEvent = BrowserTestUtils.waitForEvent(dialog, "close");
   EventUtils.synthesizeKey("KEY_Escape", {});

mail/themes/shared/mail/accountHub.css

@@ -108,6 +108,8 @@ dialog {
   padding-block: 40px 20px;
   border-radius: inherit;
   border: 1px solid var(--hub-border-color);
+  /* Background color to better hide loading of the webp (>=100ms) */
+  background-color: var(--color-neutral-base);
   background-image: url("chrome://messenger/skin/images/accounthub-bg-light.webp");
   background-position: center center;
   background-repeat: no-repeat;