diff --git a/app/assets/javascripts/discourse/app/controllers/groups-index.js b/app/assets/javascripts/discourse/app/controllers/groups-index.js
index 976ac0eabfb..33ce6fae518 100644
--- a/app/assets/javascripts/discourse/app/controllers/groups-index.js
+++ b/app/assets/javascripts/discourse/app/controllers/groups-index.js
@@ -30,17 +30,6 @@ export default class GroupsIndexController extends Controller {
     return types;
   }
 
-  loadGroups(params) {
-    this.set("isLoading", true);
-
-    this.store
-      .findAll("group", params)
-      .then((groups) => {
-        this.set("groups", groups);
-      })
-      .finally(() => this.set("isLoading", false));
-  }
-
   @action
   onFilterChanged(filter) {
     discourseDebounce(this, this._debouncedFilter, filter, INPUT_DELAY);
diff --git a/app/assets/javascripts/discourse/app/routes/groups-index.js b/app/assets/javascripts/discourse/app/routes/groups-index.js
index a1cdc42facb..7e224e01c88 100644
--- a/app/assets/javascripts/discourse/app/routes/groups-index.js
+++ b/app/assets/javascripts/discourse/app/routes/groups-index.js
@@ -14,11 +14,13 @@ export default class GroupsIndexRoute extends DiscourseRoute {
     return I18n.t("groups.index.title");
   }
 
-  model(params) {
-    return params;
+  async model(params) {
+    const groups = await this.store.findAll("group", params);
+    return { groups };
   }
 
-  setupController(controller, params) {
-    controller.loadGroups(params);
+  setupController(controller, model) {
+    super.setupController(controller, model);
+    controller.set("groups", model.groups);
   }
 }
diff --git a/app/assets/javascripts/discourse/app/templates/groups/index.hbs b/app/assets/javascripts/discourse/app/templates/groups/index.hbs
index 01d71d1b025..23a05d20527 100644
--- a/app/assets/javascripts/discourse/app/templates/groups/index.hbs
+++ b/app/assets/javascripts/discourse/app/templates/groups/index.hbs
@@ -37,97 +37,94 @@
     </div>
   </div>
 
-  <ConditionalLoadingSpinner @condition={{this.isLoading}}>
-    {{#if this.groups}}
-      <LoadMore
-        @selector=".groups-boxes .group-box"
-        @action={{action "loadMore"}}
-      >
-        <div class="container">
-          <div class="groups-boxes">
-            {{#each this.groups as |group|}}
-              <LinkTo
-                @route="group.members"
-                @model={{group.name}}
-                class="group-box"
-                data-group-name={{group.name}}
-              >
-                <div class="group-box-inner">
-                  <div class="group-info-wrapper">
-                    {{#if group.flair_url}}
-                      <span class="group-avatar-flair">
-                        <AvatarFlair
-                          @flairName={{group.name}}
-                          @flairUrl={{group.flair_url}}
-                          @flairBgColor={{group.flair_bg_color}}
-                          @flairColor={{group.flair_color}}
-                        />
-                      </span>
-                    {{/if}}
-
-                    <span class="group-info">
-                      <GroupsInfo @group={{group}} />
-                      <div class="group-user-count">{{d-icon
-                          "user"
-                        }}{{group.user_count}}</div>
-                    </span>
-                  </div>
-
-                  <div class="group-description">{{html-safe
-                      group.bio_excerpt
-                    }}</div>
-
-                  <div class="group-membership">
-                    <GroupMembershipButton
-                      @tagName=""
-                      @model={{group}}
-                      @showLogin={{route-action "showLogin"}}
-                    >
-                      {{#if group.is_group_owner}}
-                        <span class="is-group-owner">
-                          {{d-icon "shield-halved"}}
-                          {{i18n "groups.index.is_group_owner"}}
-                        </span>
-                      {{else if group.is_group_user}}
-                        <span class="is-group-member">
-                          {{d-icon "check"}}
-                          {{i18n "groups.index.is_group_user"}}
-                        </span>
-                      {{else if group.public_admission}}
-                        {{i18n "groups.index.public"}}
-                      {{else if group.isPrivate}}
-                        {{d-icon "far-eye-slash"}}
-                        {{i18n "groups.index.private"}}
-                      {{else}}
-                        {{#if group.automatic}}
-                          {{i18n "groups.index.automatic"}}
-                        {{else}}
-                          {{d-icon "ban"}}
-                          {{i18n "groups.index.closed"}}
-                        {{/if}}
-                      {{/if}}
-                    </GroupMembershipButton>
-
-                    <span>
-                      <PluginOutlet
-                        @name="group-index-box-after"
-                        @connectorTagName="div"
-                        @outletArgs={{hash model=group}}
+  {{#if this.groups}}
+    <LoadMore
+      @selector=".groups-boxes .group-box"
+      @action={{action "loadMore"}}
+    >
+      <div class="container">
+        <div class="groups-boxes">
+          {{#each this.groups as |group|}}
+            <LinkTo
+              @route="group.members"
+              @model={{group.name}}
+              class="group-box"
+              data-group-name={{group.name}}
+            >
+              <div class="group-box-inner">
+                <div class="group-info-wrapper">
+                  {{#if group.flair_url}}
+                    <span class="group-avatar-flair">
+                      <AvatarFlair
+                        @flairName={{group.name}}
+                        @flairUrl={{group.flair_url}}
+                        @flairBgColor={{group.flair_bg_color}}
+                        @flairColor={{group.flair_color}}
                       />
                     </span>
-                  </div>
-                </div>
-              </LinkTo>
-            {{/each}}
-          </div>
-        </div>
-      </LoadMore>
+                  {{/if}}
 
-      <ConditionalLoadingSpinner @condition={{this.groups.loadingMore}} />
-    {{else}}
-      <p role="status">{{i18n "groups.index.empty"}}</p>
-    {{/if}}
-  </ConditionalLoadingSpinner>
+                  <span class="group-info">
+                    <GroupsInfo @group={{group}} />
+                    <div class="group-user-count">{{d-icon
+                        "user"
+                      }}{{group.user_count}}</div>
+                  </span>
+                </div>
+
+                <div class="group-description">{{html-safe
+                    group.bio_excerpt
+                  }}</div>
+
+                <div class="group-membership">
+                  <GroupMembershipButton
+                    @tagName=""
+                    @model={{group}}
+                    @showLogin={{route-action "showLogin"}}
+                  >
+                    {{#if group.is_group_owner}}
+                      <span class="is-group-owner">
+                        {{d-icon "shield-halved"}}
+                        {{i18n "groups.index.is_group_owner"}}
+                      </span>
+                    {{else if group.is_group_user}}
+                      <span class="is-group-member">
+                        {{d-icon "check"}}
+                        {{i18n "groups.index.is_group_user"}}
+                      </span>
+                    {{else if group.public_admission}}
+                      {{i18n "groups.index.public"}}
+                    {{else if group.isPrivate}}
+                      {{d-icon "far-eye-slash"}}
+                      {{i18n "groups.index.private"}}
+                    {{else}}
+                      {{#if group.automatic}}
+                        {{i18n "groups.index.automatic"}}
+                      {{else}}
+                        {{d-icon "ban"}}
+                        {{i18n "groups.index.closed"}}
+                      {{/if}}
+                    {{/if}}
+                  </GroupMembershipButton>
+
+                  <span>
+                    <PluginOutlet
+                      @name="group-index-box-after"
+                      @connectorTagName="div"
+                      @outletArgs={{hash model=group}}
+                    />
+                  </span>
+                </div>
+              </div>
+            </LinkTo>
+          {{/each}}
+        </div>
+      </div>
+    </LoadMore>
+    <ConditionalLoadingSpinner @condition={{this.groups.loadingMore}} />
+  {{else}}
+    <p role="status">{{i18n "groups.index.empty"}}</p>
+  {{/if}}
 </section>
 
 <PluginOutlet @name="after-groups-index-container" @connectorTagName="div" />
\ No newline at end of file