DEV: Do not always include software update HTML in DOM (#13291)

app/assets/javascripts/discourse/app/components/software-update-prompt.js

@@ -9,6 +9,7 @@ export default Component.extend({
   tagName: "",
 
   showPrompt: false,
+  animatePrompt: false,
   _timeoutHandler: null,
 
   @discourseComputed
@@ -29,18 +30,34 @@ export default Component.extend({
 
       if (!this._timeoutHandler && this.session.requiresRefresh) {
         if (isTesting()) {
-          this.set("showPrompt", true);
+          this.updatePromptState(true);
         } else {
           // Since we can do this transparently for people browsing the forum
           // hold back the message 24 hours.
           this._timeoutHandler = later(() => {
-            this.set("showPrompt", true);
+            this.updatePromptState(true);
           }, 1000 * 60 * 24 * 60);
         }
       }
     });
   },
 
+  updatePromptState(value) {
+    // when adding the message, we inject the HTML then add the animation
+    // when dismissing, things need to happen in the opposite order
+    const firstProp = value ? "showPrompt" : "animatePrompt",
+      secondProp = value ? "animatePrompt" : "showPrompt";
+
+    this.set(firstProp, value);
+    if (isTesting()) {
+      this.set(secondProp, value);
+    } else {
+      later(() => {
+        this.set(secondProp, value);
+      }, 500);
+    }
+  },
+
   @action
   refreshPage() {
     document.location.reload();
@@ -48,7 +65,7 @@ export default Component.extend({
 
   @action
   dismiss() {
-    this.set("showPrompt", false);
+    this.updatePromptState(false);
   },
 
   @on("willDestroyElement")

app/assets/javascripts/discourse/app/templates/application.hbs

@@ -8,7 +8,7 @@
                 toggleMobileView=(route-action "toggleMobileView")
                 toggleAnonymous=(route-action "toggleAnonymous")
                 logout=(route-action "logout")}}
-  {{software-update-prompt id="software-update-prompt"}}
+  {{software-update-prompt}}
 
   {{plugin-outlet name="below-site-header" tagName="" args=(hash currentPath=router._router.currentPath)}}
 

app/assets/javascripts/discourse/app/templates/components/software-update-prompt.hbs

@@ -1,9 +1,10 @@
-<div class="software-update-prompt {{if showPrompt "require-software-refresh"}}">
-  <div class="wrap">
-    <div class="update-prompt-main-content" aria-live="polite">
-      <span role="button" onclick={{action "refreshPage"}} class="update-prompt-message">{{d-icon "redo"}} {{html-safe (i18n "software_update_prompt.message")}}</span>
-      <span class="update-prompt-dismiss"><span aria-label={{i18n "software_update_prompt.dismiss"}} role="button" onclick={{action "dismiss"}}>{{d-icon "times"}}</span></span>
+{{#if showPrompt}}
+  <div class="software-update-prompt{{if animatePrompt " require-software-refresh"}}">
+    <div class="wrap">
+      <div class="update-prompt-main-content" aria-live="polite">
+        <span role="button" onclick={{action "refreshPage"}} class="update-prompt-message">{{d-icon "redo"}} {{html-safe (i18n "software_update_prompt.message")}}</span>
+        <span class="update-prompt-dismiss"><span aria-label={{i18n "software_update_prompt.dismiss"}} role="button" onclick={{action "dismiss"}}>{{d-icon "times"}}</span></span>
+      </div>
     </div>
   </div>
-</div>
-
+{{/if}}

app/assets/javascripts/discourse/tests/integration/widgets/software-update-prompt-test.js

@@ -21,8 +21,7 @@ discourseModule(
 
         test(assert) {
           assert.ok(
-            queryAll("div.software-update-prompt.require-software-refresh")
-              .length === 0,
+            queryAll("div.software-update-prompt").length === 0,
             "it does not have the class to show the prompt"
           );
 

app/assets/stylesheets/common/software-update-prompt.scss

@@ -6,8 +6,8 @@
   background-color: var(--tertiary-low);
   color: var(--tertiary);
   max-height: 0;
-  visibility: hidden;
-  transition: max-height 1s;
+  overflow: hidden;
+  transition: max-height 0.3s;
   box-shadow: shadow("header");
   z-index: z("header") - 10;
 
@@ -48,10 +48,9 @@
   }
 
   &.require-software-refresh {
-    visibility: visible;
-    overflow: hidden;
     max-height: 300px;
     margin-left: auto;
     margin-right: auto;
+    transition: max-height 0.75s;
   }
 }