diff --git a/app/assets/javascripts/discourse/controllers/groups-index.js b/app/assets/javascripts/discourse/controllers/groups-index.js
index 66743226779..228527bc38b 100644
--- a/app/assets/javascripts/discourse/controllers/groups-index.js
+++ b/app/assets/javascripts/discourse/controllers/groups-index.js
@@ -1,6 +1,8 @@
 import Controller, { inject as controller } from "@ember/controller";
-import discourseDebounce from "discourse/lib/debounce";
-import discourseComputed, { observes } from "discourse-common/utils/decorators";
+import { debounce } from "@ember/runloop";
+import { action } from "@ember/object";
+import discourseComputed from "discourse-common/utils/decorators";
+import { INPUT_DELAY } from "discourse-common/config/environment";
 
 export default Controller.extend({
   application: controller(),
@@ -9,37 +11,53 @@ export default Controller.extend({
   asc: null,
   filter: "",
   type: null,
+  groups: null,
+  isLoading: false,
 
-  @discourseComputed("model.extras.type_filters")
+  @discourseComputed("groups.extras.type_filters")
   types(typeFilters) {
     const types = [];
 
     if (typeFilters) {
-      typeFilters.forEach(type => {
-        types.push({ id: type, name: I18n.t(`groups.index.${type}_groups`) });
-      });
+      typeFilters.forEach(type =>
+        types.push({ id: type, name: I18n.t(`groups.index.${type}_groups`) })
+      );
     }
 
     return types;
   },
 
-  @observes("filterInput")
-  _setFilter: discourseDebounce(function() {
-    this.set("filter", this.filterInput);
-  }, 500),
+  loadGroups(params) {
+    this.set("isLoading", true);
 
-  @observes("model.canLoadMore")
-  _showFooter() {
-    this.set("application.showFooter", !this.get("model.canLoadMore"));
+    this.store
+      .findAll("group", params)
+      .then(groups => {
+        this.set("groups", groups);
+
+        if (groups.canLoadMore) {
+          this.set("application.showFooter", !groups.canLoadMore);
+        }
+      })
+      .finally(() => this.set("isLoading", false));
   },
 
-  actions: {
-    loadMore() {
-      this.model.loadMore();
-    },
+  @action
+  onFilterChanged(filter) {
+    debounce(this, this._debouncedFilter, filter, INPUT_DELAY);
+  },
 
-    new() {
-      this.transitionToRoute("groups.new");
-    }
+  @action
+  loadMore() {
+    this.groups && this.groups.loadMore();
+  },
+
+  @action
+  new() {
+    this.transitionToRoute("groups.new");
+  },
+
+  _debouncedFilter(filter) {
+    this.set("filter", filter);
   }
 });
diff --git a/app/assets/javascripts/discourse/routes/groups-index.js b/app/assets/javascripts/discourse/routes/groups-index.js
index a510bd93b6b..dff87c3cb27 100644
--- a/app/assets/javascripts/discourse/routes/groups-index.js
+++ b/app/assets/javascripts/discourse/routes/groups-index.js
@@ -14,14 +14,10 @@ export default DiscourseRoute.extend({
   },
 
   model(params) {
-    this._params = params;
-    return this.store.findAll("group", params);
+    return params;
   },
 
-  setupController(controller, model) {
-    controller.setProperties({
-      model,
-      filterInput: this._params.filter
-    });
+  setupController(controller, params) {
+    controller.loadGroups(params);
   }
 });
diff --git a/app/assets/javascripts/discourse/templates/groups/index.hbs b/app/assets/javascripts/discourse/templates/groups/index.hbs
index 36d0a644b19..bf610c81ac1 100644
--- a/app/assets/javascripts/discourse/templates/groups/index.hbs
+++ b/app/assets/javascripts/discourse/templates/groups/index.hbs
@@ -1,16 +1,21 @@
 {{#d-section pageClass="groups"}}
   <div class="groups-header">
     {{#if currentUser.admin}}
-      {{d-button action=(action "new")
-          class="btn-default groups-header-new pull-right"
-          icon="plus"
-          label="admin.groups.new.title"}}
+      {{d-button
+        action=(action "new")
+        class="btn-default groups-header-new pull-right"
+        icon="plus"
+        label="admin.groups.new.title"
+      }}
     {{/if}}
 
     <div class="groups-header-filters">
-      {{text-field value=filterInput
-          placeholderKey="groups.index.all"
-          class="groups-header-filters-name no-blur"}}
+      {{input
+        value=(readonly filter)
+        placeholderKey="groups.index.all"
+        class="groups-header-filters-name no-blur"
+        input=(action "onFilterChanged" value="target.value")
+      }}
 
       {{combo-box
         value=type
@@ -25,12 +30,12 @@
     </div>
   </div>
 
-  {{#if model}}
-    {{#conditional-loading-spinner condition=model.loading}}
+  {{#if groups}}
+    {{#conditional-loading-spinner condition=isLoading}}
       {{#load-more selector=".groups-boxes .group-box" action=(action "loadMore")}}
         <div class='container'>
           <div class="groups-boxes">
-            {{#each model as |group|}}
+            {{#each groups as |group|}}
               {{#link-to "group.members" group.name class="group-box"}}
                 <div class="group-box-inner">
                   <div class="group-info-wrapper">
@@ -87,7 +92,7 @@
         </div>
       {{/load-more}}
 
-      {{conditional-loading-spinner condition=model.loadingMore}}
+      {{conditional-loading-spinner condition=groups.loadingMore}}
     {{/conditional-loading-spinner}}
   {{else}}
     <p>{{i18n "groups.index.empty"}}</p>