Unify `loading-spinner` helper, add conditional support via component

app/assets/javascripts/admin/controllers/admin-email-preview-digest.js.es6

@@ -1,13 +1,5 @@
 import ObjectController from 'discourse/controllers/object';
 
-/**
-  This controller previews an email digest
-
-  @class AdminEmailPreviewDigestController
-  @extends ObjectController
-  @namespace Discourse
-  @module Discourse
-**/
 export default ObjectController.extend({
 
   actions: {

app/assets/javascripts/admin/templates/email_preview_digest.hbs

@@ -18,14 +18,10 @@
   </div>
 </div>
 
-{{#if loading}}
+{{#loading-spinner condition=loading}}
-  {{loading-spinner}}
-{{else}}
   {{#if showHtml}}
     {{{html_content}}}
   {{else}}
     <pre>{{{text_content}}}</pre>
   {{/if}}
-{{/if}}
+{{/loading-spinner}}
-
-

app/assets/javascripts/admin/templates/flags-list.hbs

@@ -146,10 +146,8 @@
 
     </tbody>
   </table>
-  {{#if view.loading}}
-    {{loading-spinner}}
-  {{/if}}
 
+  {{loading-spinner condition=view.loading}}
 {{else}}
   <p>{{i18n admin.flags.no_results}}</p>
 {{/if}}

app/assets/javascripts/admin/templates/logs/screened_emails.hbs

@@ -1,8 +1,6 @@
 <p>{{i18n admin.logs.screened_emails.description}}</p>
 
-{{#if loading}}
+{{#loading-spinner condition=loading}}
-  {{loading-spinner}}
-{{else}}
   {{#if model.length}}
 
     <div class='table screened-emails'>
@@ -23,4 +21,4 @@
   {{else}}
     {{i18n search.no_results}}
   {{/if}}
-{{/if}}
+{{/loading-spinner}}

app/assets/javascripts/admin/templates/logs/screened_ip_addresses.hbs

@@ -3,9 +3,7 @@
 {{screened-ip-address-form action="recordAdded"}}
 <br/>
 
-{{#if loading}}
+{{#loading-spinner condition=loading}}
-  {{loading-spinner}}
-{{else}}
   {{#if model.length}}
 
     <div class='table admin-logs-table screened-ip-addresses'>
@@ -25,4 +23,4 @@
   {{else}}
     {{i18n search.no_results}}
   {{/if}}
-{{/if}}
+{{/loading-spinner}}

app/assets/javascripts/admin/templates/logs/screened_urls.hbs

@@ -1,10 +1,7 @@
 <p>{{i18n admin.logs.screened_urls.description}}</p>
 
-{{#if loading}}
+{{#loading-spinner condition=loading}}
-  {{loading-spinner}}
-{{else}}
   {{#if model.length}}
-
     <div class='table screened-urls'>
       <div class="heading-container">
         <div class="col heading first domain">{{i18n admin.logs.screened_urls.domain}}</div>
@@ -17,8 +14,7 @@
 
       {{view 'screened-urls-list' content=controller}}
     </div>
-
   {{else}}
     {{i18n search.no_results}}
   {{/if}}
-{{/if}}
+{{/loading-spinner}}

app/assets/javascripts/admin/templates/logs/staff_action_logs.hbs

@@ -43,14 +43,11 @@
     <div class="clearfix"></div>
   </div>
 
-  {{#if loading}}
+  {{#loading-spinner condition=loading}}
-    <br/>
-    {{loading-spinner}}
-  {{else}}
     {{#if model.length}}
       {{view "staff-action-logs-list" content=controller}}
     {{else}}
       {{i18n search.no_results}}
     {{/if}}
-  {{/if}}
+  {{/loading-spinner}}
 </div>

app/assets/javascripts/admin/templates/reports.hbs

@@ -3,7 +3,7 @@
 <div>
   {{i18n admin.dashboard.reports.start_date}} {{input type="date" value=startDate}}
   {{i18n admin.dashboard.reports.end_date}} {{input type="date" value=endDate}}
-  <button {{action refreshReport}} class='btn btn-primary'>{{i18n admin.dashboard.reports.refresh_report}}</button>
+  <button {{action "refreshReport"}} class='btn btn-primary'>{{i18n admin.dashboard.reports.refresh_report}}</button>
 </div>
 
 <div class='view-options'>
@@ -20,9 +20,7 @@
   {{/if}}
 </div>
 
-{{#if refreshing}}
+{{#loading-spinner condition=refreshing}}
-  {{loading-spinner}}
-{{else}}
   <table class='table report'>
     <tr>
       <th>{{xaxis}}</th>
@@ -45,4 +43,4 @@
       </tr>
     {{/each}}
   </table>
-{{/if}}
+{{/loading-spinner}}

app/assets/javascripts/admin/templates/user_badges.hbs

@@ -6,9 +6,7 @@
   </div>
 </div>
 
-{{#if loading}}
+{{#loading-spinner condition=loading}}
-  {{loading-spinner}}
-{{else}}
   <div class='admin-container user-badges'>
     <h2>{{i18n admin.badges.grant_badge}}</h2>
     {{#if noBadges}}
@@ -56,4 +54,4 @@
       {{/each}}
     </table>
   </div>
-{{/if}}
+{{/loading-spinner}}

app/assets/javascripts/admin/templates/users_list.hbs

@@ -37,9 +37,7 @@
     </div>
   </div>
 
-  {{#if loading}}
+  {{#loading-spinner condition=loading}}
-    {{loading-spinner}}
-  {{else}}
     {{#if model.length}}
       <table class='table'>
         <tr>
@@ -101,5 +99,5 @@
     {{else}}
       <p>{{i18n search.no_results}}</p>
     {{/if}}
-  {{/if}}
+  {{/loading-spinner}}
 </div>

app/assets/javascripts/discourse/components/basic-topic-list.js.es6

@@ -7,6 +7,7 @@
   @module Discourse
 **/
 export default Ember.Component.extend({
+  loading: Ember.computed.not('loaded'),
 
   loaded: function() {
     var topicList = this.get('topicList');

app/assets/javascripts/discourse/components/conditional-loading-spinner.js.es6

@@ -0,0 +1,3 @@
+export default Ember.Component.extend({
+  layoutName: 'components/conditional-loading-spinner'
+});

app/assets/javascripts/discourse/controllers/topic.js.es6

@@ -486,6 +486,7 @@ export default ObjectController.extend(Discourse.SelectedPostsCount, {
   }.property('selectedPostsCount'),
 
   hasError: Ember.computed.or('notFoundHtml', 'message'),
+  noErrorYet: Ember.computed.not('hasError'),
 
   multiSelectChanged: function() {
     // Deselect all posts when multi select is turned off

app/assets/javascripts/discourse/ember/resolver.js.es6

@@ -3,7 +3,8 @@
 var classify = Ember.String.classify;
 var get = Ember.get;
 
-var LOADING_WHITELIST = ['badges', 'userActivity', 'userPrivateMessages', 'admin', 'adminFlags', 'user', 'preferences'],
+var LOADING_WHITELIST = ['badges', 'userActivity', 'userPrivateMessages', 'admin', 'adminFlags', 
+                         'user', 'preferences', 'adminEmail'],
     _dummyRoute,
     _loadingView;
 

app/assets/javascripts/discourse/helpers/loading-spinner.es6

@@ -1,7 +1,25 @@
+import ConditionalLoadingSpinner from 'discourse/components/conditional-loading-spinner';
 var spinnerHTML = "<div class='spinner'></div>";
 
-Handlebars.registerHelper('loading-spinner', function() {
+/**
-  return new Handlebars.SafeString(spinnerHTML);
+   If you use it as a regular helper {{loading-spinner}} you'll just get the
+   HTML for a spinner.
+
+   If you provide an `condition=xyz` parameter, it will be bound to that property
+   and only show when it's truthy.
+
+   If you use the block form `{{#loading-spinner}} ... {{/loading-spinner}`,
+   the contents will shown when the loading condition finishes.
+ **/
+Handlebars.registerHelper('loading-spinner', function(options) {
+  var hash = options.hash;
+  if (hash && hash.condition) {
+    var types = options.hashTypes;
+    Discourse.Utilities.normalizeHash(hash, types);
+    return Ember.Handlebars.helpers.view.call(this, ConditionalLoadingSpinner, options);
+  } else {
+    return new Handlebars.SafeString(spinnerHTML);
+  }
 });
 
 export { spinnerHTML };

app/assets/javascripts/discourse/templates/badges/show.hbs

@@ -35,10 +35,10 @@
         </div>
       {{/each}}
     </div>
-    {{#if canLoadMore}}
+
-      {{loading-spinner}}
+    {{loading-spinner condition=canLoadMore}}
-    {{else}}
+    {{#unless canLoadMore}}
       {{custom-html "footer"}}
-    {{/if}}
+    {{/unless}}
   {{/if}}
 </div>

app/assets/javascripts/discourse/templates/components/basic-topic-list.hbs

@@ -1,4 +1,4 @@
-{{#if loaded}}
+{{#loading-spinner condition=loading}}
   {{#if topics}}
     <table class="topic-list">
       <thead>
@@ -55,6 +55,4 @@
       {{i18n choose_topic.none_found}}
     </div>
   {{/if}}
-{{else}}
+{{/loading-spinner}}
-  {{loading-spinner}}
-{{/if}}

app/assets/javascripts/discourse/templates/components/conditional-loading-spinner.hbs

@@ -0,0 +1,5 @@
+{{#if condition}}
+  {{loading-spinner}}
+{{else}}
+  {{yield}}
+{{/if}}

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

@@ -10,9 +10,7 @@
   </div>
 </div>
 
-{{#if loading}}
+{{loading-spinner condition=loading}}
-  {{loading-spinner}}
-{{/if}}
 
 <div {{bind-attr class=":container :list-container loading:hidden"}}>
   <div class="row">

app/assets/javascripts/discourse/templates/discovery/topics.hbs

@@ -71,9 +71,7 @@
 </div>
 
 <footer class='topic-list-bottom'>
-  {{#if loadingMore}}
+  {{loading-spinner condition=loadingMore}}
-    {{loading-spinner}}
-  {{/if}}
   {{#if allLoaded}}
     {{#if showDismissRead}}
       <button title="{{i18n topics.bulk.dismiss_topics_tooltip}}" id='dismiss-topics' class='btn dismiss-read' {{action "dismissRead" "topics"}}>{{i18n topics.bulk.dismiss_topics}}</button>

app/assets/javascripts/discourse/templates/mobile/components/basic-topic-list.hbs

@@ -1,4 +1,4 @@
-{{#if loaded}}
+{{#loading-spinner condition=loading}}
   {{#if topics}}
     <table class="topic-list">
       <tbody>
@@ -53,6 +53,4 @@
         {{i18n choose_topic.none_found}}
     </div>
   {{/if}}
-{{else}}
+{{/loading-spinner}}
-  {{loading-spinner}}
-{{/if}}

app/assets/javascripts/discourse/templates/mobile/discovery/topics.hbs

@@ -24,9 +24,7 @@
 </div>
 
 <footer class='topic-list-bottom'>
-  {{#if loadingMore}}
+  {{loading-spinner condition=loadingMore}}
-    {{loading-spinner}}
-  {{/if}}
   {{#if allLoaded}}
     {{#if showDismissRead}}
       <button title="{{i18n topics.bulk.dismiss_topics_tooltip}}" id='dismiss-topics' class='btn dismiss-read' {{action "dismissRead" "topics"}}>{{i18n topics.bulk.dismiss_topics}}</button>

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

@@ -1,5 +1,5 @@
 <section class="d-dropdown" id="notifications-dropdown">
-  {{#unless loadingNotifications}}
+  {{#loading-spinner condition=loadingNotifications}}
     {{#if content}}
       <ul>
         {{#each itemController="notification"}}
@@ -12,7 +12,5 @@
     {{else}}
       <div class="none">{{i18n notifications.none}}</div>
     {{/if}}
-  {{else}}
+  {{/loading-spinner}}
-    {{loading-spinner}}
-  {{/unless}}
 </section>

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

@@ -71,9 +71,7 @@
 
           {{render 'topic-progress'}}
 
-          {{#if postStream.loadingAbove}}
+          {{loading-spinner condition=postStream.loadingAbove}}
-            {{loading-spinner}}
-          {{/if}}
 
           {{#unless postStream.loadingFilter}}
             {{cloaked-collection cloakView="post"
@@ -88,9 +86,7 @@
                                  offsetFixedBottom="#reply-control"}}
           {{/unless}}
 
-          {{#if postStream.loadingBelow}}
+          {{loading-spinner condition=postStream.loadingBelow}}
-            {{loading-spinner}}
-          {{/if}}
         </div>
         <div id='topic-bottom'></div>
 
@@ -120,31 +116,25 @@
 
   </div>
 {{else}}
-  {{#if hasError}}
+  <div class='container'>
-    <div class='container'>
+    {{#loading-spinner condition=noErrorYet}}
-    {{#if notFoundHtml}}
+      {{#if notFoundHtml}}
-      {{{notFoundHtml}}}
+        {{{notFoundHtml}}}
-    {{else}}
+      {{else}}
-      <div class="topic-error">
+        <div class="topic-error">
-        <div>{{message}}</div>
+          <div>{{message}}</div>
-        {{#if noRetry}}
+          {{#if noRetry}}
-          {{#unless currentUser}}
+            {{#unless currentUser}}
-            <button {{action "showLogin"}} class='btn btn-primary topic-retry'>{{fa-icon user}} {{i18n log_in}}</button>
+              <button {{action "showLogin"}} class='btn btn-primary topic-retry'>{{fa-icon user}} {{i18n log_in}}</button>
-          {{/unless}}
+            {{/unless}}
-        {{else}}
+          {{else}}
-          <button class="btn btn-primary topic-retry" {{action "retryLoading"}}>{{fa-icon "refresh"}} {{i18n errors.buttons.again}}</button>
+            <button class="btn btn-primary topic-retry" {{action "retryLoading"}}>{{fa-icon "refresh"}} {{i18n errors.buttons.again}}</button>
-        {{/if}}
+          {{/if}}
-      </div>
+        </div>
-      {{#if retrying}}
+        {{loading-spinner condition=retrying}}
-        {{loading-spinner}}
       {{/if}}
-    {{/if}}
+    {{/loading-spinner}}
-    </div>
+  </div>
-  {{else}}
-    <div class='container'>
-      {{loading-spinner}}
-    </div>
-  {{/if}}
 {{/if}}
 
 {{#if postStream.loadedAllPosts}}

app/assets/javascripts/discourse/templates/user/invited.hbs

@@ -69,9 +69,7 @@
           </tr>
         {{/each}}
       </table>
-      {{#if invitesLoading}}
+      {{loading-spinner condition=invitesLoading}}
-        {{loading-spinner}}
-      {{/if}}
 
     {{else}}
       {{#if canBulkInvite}}

app/assets/javascripts/discourse/templates/user/notifications.hbs

@@ -23,9 +23,7 @@
   </div>
 {{/each}}
 
-{{#if loading}}
+{{#loading-spinner condition=loading}}
-  {{loading-spinner}}
-{{else}}
   {{#unless canLoadMore}}
     {{#if showDismissButton}}
       <div class='notification-buttons'>
@@ -33,4 +31,4 @@
       </div>
     {{/if}}
   {{/unless}}
-{{/if}}
+{{/loading-spinner}}

app/assets/javascripts/discourse/templates/user/posts.hbs

@@ -26,6 +26,3 @@
     </p>
   </div>
 {{/each}}
-{{#if loading}}
-  {{loading-spinner}}
-{{/if}}

app/assets/javascripts/main_include.js

@@ -43,6 +43,7 @@
 //= require ./discourse/components/top-title
 //= require ./discourse/components/text-field
 //= require ./discourse/components/visible
+//= require ./discourse/components/conditional-loading-spinner
 //= require ./discourse/helpers/user-avatar
 //= require ./discourse/helpers/cold-age-class
 //= require ./discourse/helpers/loading-spinner