PERF: don't render dropdowns till we need them

app/assets/javascripts/discourse/components/discourse-banner.js.es6

@@ -1,4 +1,4 @@
-import VisibleComponent from "discourse/components/visible-component";
+import VisibleComponent from "discourse/components/visible";
 
 export default VisibleComponent.extend({
 

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

@@ -80,16 +80,20 @@
         {{/if}}
       </ul>
 
-      {{render "search"}}
+      {{#if view.renderDropdowns}}
 
-      {{render "notifications" notifications}}
+        {{render "search"}}
+
+        {{render "notifications" notifications}}
+
+        {{#if view.renderSiteMap}}
+          {{render "siteMap"}}
+        {{/if}}
+
+        {{render "user-dropdown"}}
 
-      {{#if view.renderSiteMap}}
-        {{render "siteMap"}}
       {{/if}}
 
-      {{render "user-dropdown"}}
-
     </div>
 
     {{#if showExtraInfo}}

app/assets/javascripts/discourse/views/header.js.es6

@@ -14,16 +14,26 @@ export default Discourse.View.extend({
   classNames: ['d-header', 'clearfix'],
   classNameBindings: ['editingTopic'],
   templateName: 'header',
+  renderDropdowns: false,
 
   showDropdown: function($target) {
+    var self = this;
+
+    if(!this.get("renderDropdowns")){
+      this.set("renderDropdowns", true);
+      Em.run.next(function(){
+        self.showDropdown($target);
+      });
+      return;
+    }
+
     var elementId = $target.data('dropdown') || $target.data('notifications'),
         $dropdown = $("#" + elementId),
         $li = $target.closest('li'),
         $ul = $target.closest('ul'),
         $html = $('html'),
         $header = $('header'),
-        replyZIndex = parseInt($('#reply-control').css('z-index'), 10),
-        self = this;
+        replyZIndex = parseInt($('#reply-control').css('z-index'), 10);
 
 
     originalZIndex = originalZIndex || $('header').css('z-index');

app/assets/javascripts/main_include.js

@@ -42,6 +42,7 @@
 //= require ./discourse/routes/discourse_restricted_user_route
 //= require ./discourse/components/top-title
 //= require ./discourse/components/text-field
+//= require ./discourse/components/visible
 //= require ./discourse/helpers/user-avatar
 //= require ./discourse/helpers/cold-age-class