PERF: Only render 30 site settings in "All" when filtering

app/assets/javascripts/admin/controllers/admin-site-settings.js.es6

@@ -5,7 +5,7 @@ export default Ember.ArrayController.extend({
   onlyOverridden: false,
   filtered: Ember.computed.notEmpty('filter'),
 
-  filterContentNow: function(category) {
+  filterContentNow(category) {
     // If we have no content, don't bother filtering anything
     if (!!Ember.isEmpty(this.get('allSiteSettings'))) return;
 
@@ -20,12 +20,13 @@ export default Ember.ArrayController.extend({
       return;
     }
 
-    const self = this,
-          matchesGroupedByCategory = [{nameKey: 'all_results', name: I18n.t('admin.site_settings.categories.all_results'), siteSettings: []}];
+    const all = {nameKey: 'all_results', name: I18n.t('admin.site_settings.categories.all_results'), siteSettings: []};
+    const matchesGroupedByCategory = [all];
 
-    this.get('allSiteSettings').forEach(function(settingsCategory) {
-      const matches = settingsCategory.siteSettings.filter(function(item) {
-        if (self.get('onlyOverridden') && !item.get('overridden')) return false;
+    const matches = [];
+    this.get('allSiteSettings').forEach(settingsCategory => {
+      const siteSettings = settingsCategory.siteSettings.filter(item => {
+        if (this.get('onlyOverridden') && !item.get('overridden')) return false;
         if (filter) {
           if (item.get('setting').toLowerCase().indexOf(filter) > -1) return true;
           if (item.get('setting').toLowerCase().replace(/_/g, ' ').indexOf(filter) > -1) return true;
@@ -36,16 +37,20 @@ export default Ember.ArrayController.extend({
           return true;
         }
       });
-      if (matches.length > 0) {
-        matchesGroupedByCategory[0].siteSettings.pushObjects(matches);
+      if (siteSettings.length > 0) {
+        matches.pushObjects(siteSettings);
         matchesGroupedByCategory.pushObject({
           nameKey: settingsCategory.nameKey,
           name: I18n.t('admin.site_settings.categories.' + settingsCategory.nameKey),
-          siteSettings: matches
+          siteSettings,
+          count: siteSettings.length
         });
       }
     });
 
+    all.siteSettings.pushObjects(matches.slice(0, 30));
+    all.count = matches.length;
+
     this.set('model', matchesGroupedByCategory);
     this.transitionToRoute("adminSiteSettingsCategory", category || "all_results");
   },
@@ -60,10 +65,7 @@ export default Ember.ArrayController.extend({
 
   actions: {
     clearFilter() {
-      this.setProperties({
-        filter: '',
-        onlyOverridden: false
-      });
+      this.setProperties({ filter: '', onlyOverridden: false });
     },
 
     toggleMenu() {

app/assets/javascripts/admin/templates/components/site-setting.hbs

@@ -2,7 +2,7 @@
    <h3>{{unbound settingName}}</h3>
 </div>
 <div class="setting-value">
-{{component componentName setting=setting value=buffered.value validationMessage=validationMessage}}
+  {{component componentName setting=setting value=buffered.value validationMessage=validationMessage}}
 </div>
 {{#if dirty}}
   <div class='setting-controls'>

app/assets/javascripts/admin/templates/site-settings-category.hbs

@@ -1,6 +1,6 @@
 {{#if filteredContent}}
   <div class='form-horizontal settings'>
-    {{#each setting in filteredContent}}
+    {{#each filteredContent as |setting|}}
       {{site-setting setting=setting saveAction="saveSetting"}}
     {{/each}}
   </div>

app/assets/javascripts/admin/templates/site-settings.hbs

@@ -6,9 +6,9 @@
     </label>
   </div>
   <div class='controls'>
-    <button {{action "toggleMenu"}} class="menu-toggle">{{fa-icon "bars"}}</button>
+    {{d-button action="toggleMenu" class="menu-toggle" icon="bars"}}
     {{text-field value=filter placeholderKey="type_to_filter" class="no-blur"}}
-    <button {{action "clearFilter"}} class="btn">{{i18n 'admin.site_settings.clear_filter'}}</button>
+    {{d-button action="clearFilter" label="admin.site_settings.clear_filter"}}
   </div>
 </div>
 
@@ -19,7 +19,7 @@
         {{#link-to 'adminSiteSettingsCategory' category.nameKey class=category.nameKey}}
           {{category.name}}
           {{#if filtered}}
-            <span class="count">({{category.siteSettings.length}})</span>
+            <span class="count">({{category.count}})</span>
           {{/if}}
         {{/link-to}}
       {{/link-to}}