FIX: don't rerender whole users page while typing on input.

FIX: don’t rerender whole users page while typing on input.

diff --git a/app/assets/javascripts/discourse/app/controllers/users.js b/app/assets/javascripts/discourse/app/controllers/users.js
index 89c20ef..89ddd8f 100644
--- a/app/assets/javascripts/discourse/app/controllers/users.js
+++ b/app/assets/javascripts/discourse/app/controllers/users.js
@@ -2,6 +2,7 @@ import { equal } from "@ember/object/computed";
 import Controller, { inject as controller } from "@ember/controller";
 import discourseDebounce from "discourse/lib/debounce";
 import { observes } from "discourse-common/utils/decorators";
+import { longDate } from "discourse/lib/formatter";
 
 export default Controller.extend({
   application: controller(),
@@ -12,9 +13,29 @@ export default Controller.extend({
   name: "",
   group: null,
   exclude_usernames: null,
+  isLoading: false,
 
   showTimeRead: equal("period", "all"),
 
+  loadUsers(params) {
+    this.set("isLoading", true);
+
+    this.store
+      .find("directoryItem", params)
+      .then(model => {
+        const lastUpdatedAt = model.get("resultSetMeta.last_updated_at");
+        this.setProperties({
+          model,
+          lastUpdatedAt: lastUpdatedAt ? longDate(lastUpdatedAt) : null,
+          period: params.period,
+          nameInput: params.name
+        });
+      })
+      .finally(() => {
+        this.set("isLoading", false);
+      });
+  },
+
   @observes("nameInput")
   _setName: discourseDebounce(function() {
     this.set("name", this.nameInput);
diff --git a/app/assets/javascripts/discourse/app/routes/users.js b/app/assets/javascripts/discourse/app/routes/users.js
index a67e287..1e3729d 100644
--- a/app/assets/javascripts/discourse/app/routes/users.js
+++ b/app/assets/javascripts/discourse/app/routes/users.js
@@ -1,6 +1,5 @@
 import I18n from "I18n";
 import DiscourseRoute from "discourse/routes/discourse";
-import { longDate } from "discourse/lib/formatter";
 
 export default DiscourseRoute.extend({
   queryParams: {
@@ -37,20 +36,11 @@ export default DiscourseRoute.extend({
   },
 
   model(params) {
-    // If we refresh via `refreshModel` set the old model to loading
-    this._params = params;
-    return this.store.find("directoryItem", params);
+    return params;
   },
 
-  setupController(controller, model) {
-    const params = this._params;
-    const lastUpdatedAt = model.get("resultSetMeta.last_updated_at");
-    controller.setProperties({
-      model,
-      lastUpdatedAt: lastUpdatedAt ? longDate(lastUpdatedAt) : null,
-      period: params.period,
-      nameInput: params.name
-    });
+  setupController(controller, params) {
+    controller.loadUsers(params);
   },
 
   actions: {
diff --git a/app/assets/javascripts/discourse/app/templates/users.hbs b/app/assets/javascripts/discourse/app/templates/users.hbs
index 1d3450d..0766928 100644
--- a/app/assets/javascripts/discourse/app/templates/users.hbs
+++ b/app/assets/javascripts/discourse/app/templates/users.hbs
@@ -16,7 +16,7 @@
           {{text-field value=nameInput placeholderKey="directory.filter_name" class="filter-name no-blur"}}
         </div>
 
-        {{#conditional-loading-spinner condition=model.loading}}
+        {{#conditional-loading-spinner condition=isLoading}}
           {{#if model.length}}
 
             <table>

GitHub sha: ef5320dd

1 Like