Add infinite loading to full page search.

app/assets/javascripts/discourse/controllers/full-page-search.js.es6

@@ -14,12 +14,13 @@ const SortOrders = [
   {name: I18n.t('search.latest_topic'), id: 4, term: 'order:latest_topic'},
 
 ];
+const PAGE_LIMIT = 10;
 
 export default Ember.Controller.extend({
   application: Ember.inject.controller(),
   bulkSelectEnabled: null,
 
-  loading: Em.computed.not("model"),
+  loading: false,
   queryParams: ["q", "expanded", "context_id", "context", "skip_context"],
   q: null,
   selected: [],
@@ -30,11 +31,8 @@ export default Ember.Controller.extend({
   sortOrder: 0,
   sortOrders: SortOrders,
   invalidSearch: false,
-
-  @computed('model.posts')
-  resultCount(posts) {
-    return posts && posts.length;
-  },
+  page: 1,
+  resultCount: null,
 
   @computed('resultCount')
   hasResults(resultCount) {
@@ -113,6 +111,7 @@ export default Ember.Controller.extend({
   @observes('sortOrder')
   triggerSearch() {
     if (this._searchOnSortChange) {
+      this.set("page", 1);
       this._search();
     }
   },
@@ -143,6 +142,11 @@ export default Ember.Controller.extend({
     this.set("application.showFooter", !this.get("loading"));
   },
 
+  @observes('model.posts.length')
+  resultCountChanged() {
+    this.set("resultCount", this.get("model.posts.length"));
+  },
+
   @computed('hasResults')
   canBulkSelect(hasResults) {
     return this.currentUser && this.currentUser.staff && hasResults;
@@ -158,6 +162,11 @@ export default Ember.Controller.extend({
     return iconHTML(expanded ? "caret-down" : "caret-right");
   },
 
+  @computed('page')
+  isLastPage(page) {
+    return page == PAGE_LIMIT;
+  },
+
   _search() {
     if (this.get("searching")) { return; }
 
@@ -169,10 +178,11 @@ export default Ember.Controller.extend({
     }
 
     this.set("searching", true);
+    this.set("loading", true);
     this.set('bulkSelectEnabled', false);
     this.get('selected').clear();
 
-    var args = { q: searchTerm };
+    var args = { q: searchTerm, page: this.get('page') };
 
     const sortOrder = this.get("sortOrder");
     if (sortOrder && SortOrders[sortOrder].term) {
@@ -180,7 +190,6 @@ export default Ember.Controller.extend({
     }
 
     this.set("q", args.q);
-    this.set("model", null);
 
     const skip = this.get("skip_context");
     if ((!skip && this.get('context')) || skip==="false"){
@@ -199,9 +208,20 @@ export default Ember.Controller.extend({
         this.set('q', results.grouped_search_result.term);
       }
 
-      setTransient('lastSearch', { searchKey, model }, 5);
-      this.set("model", model);
-    }).finally(() => this.set("searching", false));
+      if(args.page > 1){
+        if (model){
+          this.get("model").posts.pushObjects(model.posts);
+          this.get("model").topics.pushObjects(model.topics);
+          this.get("model").set('grouped_search_result', results.grouped_search_result);
+        }
+      }else{
+        setTransient('lastSearch', { searchKey, model }, 5);
+        this.set("model", model);
+      }
+    }).finally(() => {
+      this.set("searching", false);
+      this.set("loading", false);
+    });
   },
 
   actions: {
@@ -227,11 +247,20 @@ export default Ember.Controller.extend({
     },
 
     search() {
+      this.set("page", 1);
       this._search();
     },
 
     toggleAdvancedSearch() {
       this.toggleProperty('expanded');
-    }
+    },
+
+    loadMore() {
+      var page = this.get('page');
+      if (this.get('model.grouped_search_result.more_full_page_results') && !this.get("loading") && page < PAGE_LIMIT){
+        this.incrementProperty("page");
+        this._search();
+      }
+    },
   }
 });

app/assets/javascripts/discourse/templates/full-page-search.hbs

@@ -45,32 +45,23 @@
     </div>
   {{/if}}
 
-  {{#conditional-loading-spinner condition=loading}}
-
-    {{#unless hasResults}}
-      <h3>
-        {{#if searchActive}}
-          {{i18n "search.no_results"}}
-        {{/if}}
-      </h3>
-    {{/unless}}
-
-    {{#if hasResults}}
-      <div class='search-title clearfix'>
-        <div class='result-count'>
-          <span>
-            {{{i18n "search.result_count" count=resultCount term=noSortQ}}}
-          </span>
-        </div>
-        <div class='sort-by'>
-          <span class='desc'>
-            {{i18n "search.sort_by"}}
-          </span>
-          {{combo-box value=sortOrder content=sortOrders castInteger="true"}}
-        </div>
+  {{#if hasResults}}
+    <div class='search-title clearfix'>
+      <div class='result-count'>
+        <span>
+          {{{i18n "search.result_count" count=resultCount term=noSortQ}}}
+        </span>
       </div>
-    {{/if}}
+      <div class='sort-by'>
+        <span class='desc'>
+          {{i18n "search.sort_by"}}
+        </span>
+        {{combo-box value=sortOrder content=sortOrders castInteger="true"}}
+      </div>
+    </div>
+  {{/if}}
 
+  {{#load-more selector=".fps-result" action="loadMore"}}
     {{#each model.posts as |result|}}
       <div class='fps-result'>
         <div class='author'>
@@ -124,15 +115,30 @@
       </div>
     {{/each}}
 
-    {{#if hasResults}}
-        <h3 class="search-footer">
-        {{#if model.grouped_search_result.more_full_page_results}}
-            {{i18n "search.more_results"}}
-        {{else}}
-            {{i18n "search.no_more_results"}}
-        {{/if}}
+    {{#conditional-loading-spinner condition=loading }}
+      {{#unless hasResults}}
+        <h3>
+          {{#if searchActive}}
+              {{i18n "search.no_results"}}
+          {{/if}}
         </h3>
-    {{/if}}
+      {{/unless}}
+
+      {{#if hasResults}}
+        {{#unless loading}}
+          <h3 class="search-footer">
+            {{#if model.grouped_search_result.more_full_page_results}}
+              {{#if isLastPage }}
+                {{i18n "search.more_results"}}
+              {{/if}}
+            {{else}}
+              {{i18n "search.no_more_results"}}
+            {{/if}}
+          </h3>
+        {{/unless}}
+      {{/if}}
+    {{/conditional-loading-spinner}}
+
+  {{/load-more}}
 
-  {{/conditional-loading-spinner}}
 {{/d-section}}