defer rendering of the site map

add new and unread links in the site map categories section

app/assets/javascripts/discourse/templates/components/discourse-header-category-info.js.handlebars

@@ -0,0 +1,13 @@
+{{categoryLink category allowUncategorized=true}}
+{{#if currentUser}}
+  {{#with view.category}}
+    {{#if unreadTopics}}
+      <a href={{unbound unreadUrl}} class='badge new-posts badge-notification' title='{{i18n topic.unread_topics count="unreadTopics"}}'>{{unbound unreadTopics}}</a>
+    {{/if}}
+    {{#if newTopics}}
+      <a href={{unbound newUrl}} class='badge new-posts badge-notification' title='{{i18n topic.new_topics count="newTopics"}}'>{{unbound newTopics}} <i class='icon icon-asterisk'></i></a>
+    {{/if}}
+  {{/with}}
+{{else}}
+<b>{{unbound category.topic_count}}</b></a>
+{{/if}}

app/assets/javascripts/discourse/templates/header.js.handlebars

@@ -74,6 +74,7 @@
           {{else}}
             <a class='icon'
                data-dropdown="site-map-dropdown"
+               data-render="renderSiteMap"
                href="#"
                title='{{i18n site_map}}'>
                <i class='icon-reorder'></i>
@@ -96,6 +97,7 @@
 
       {{render notifications notifications}}
 
+      {{#if view.renderSiteMap}}
       <section class='d-dropdown' id='site-map-dropdown'>
       <ul class="location-links">
         {{#if currentUser.staff}}
@@ -131,14 +133,14 @@
 
           {{#each categories}}
             <li class='category'>
-              {{categoryLink this allowUncategorized=true}}
-              <b>{{unbound topic_count}}</b></a>
+              {{discourse-header-category-info category=this currentUser=controller.currentUser}}
             </li>
           {{/each}}
         </ul>
       {{/if}}
 
     </section>
+    {{/if}}
 
     </div>
   </div>

app/assets/javascripts/discourse/views/header_view.js

@@ -20,6 +20,19 @@ Discourse.HeaderView = Discourse.View.extend({
         $ul = $target.closest('ul'),
         $html = $('html');
 
+    // we need to ensure we are rendered,
+    //  this optimises the speed of the initial render
+    var render = $target.data('render');
+    if(render){
+      if(!this.get(render)){
+        this.set(render, true);
+        Em.run.next(this, function(){
+          this.showDropdown($target);
+        });
+        return;
+      }
+    }
+
     var hideDropdown = function() {
       $dropdown.fadeOut('fast');
       $li.removeClass('active');
@@ -27,7 +40,7 @@ Discourse.HeaderView = Discourse.View.extend({
       return $html.off('click.d-dropdown');
     };
 
-    // if a dropdown is active and the user clics on it, close it
+    // if a dropdown is active and the user clicks on it, close it
     if($li.hasClass('active')) { return hideDropdown(); }
     // otherwhise, mark it as active
     $li.addClass('active');