Load more users on badge pages using infinite scrolling instead of a

button.

app/assets/javascripts/discourse/controllers/badges/show.js.es6

@@ -10,13 +10,11 @@ export default Discourse.ObjectController.extend({
   grantDates: Em.computed.mapBy('userBadges', 'grantedAt'),
   minGrantedAt: Em.computed.min('grantDates'),
 
-  moreUserCount: function() {
+  canLoadMore: function() {
     if (this.get('userBadges')) {
-      return this.get('model.grant_count') - this.get('userBadges.length');
+      return this.get('model.grant_count') > this.get('userBadges.length');
     } else {
-      return 0;
+      return false;
     }
-  }.property('model.grant_count', 'userBadges.length'),
-
-  showMoreUsers: Em.computed.gt('moreUserCount', 0)
+  }.property('model.grant_count', 'userBadges.length')
 });

app/assets/javascripts/discourse/templates/badges/show.js.handlebars

@@ -27,10 +27,8 @@
         {{/link-to}}
       {{/each}}
     </div>
-    {{#if showMoreUsers}}
-      <button class="btn" {{action loadMore}}>
-        {{countI18n badges.more_badges count=moreUserCount}}
-      </button>
+    {{#if canLoadMore}}
+      <div class='spinner'>{{i18n loading}}</div>
     {{/if}}
   {{else}}
     {{#unless userBadgesLoaded}}

app/assets/javascripts/discourse/views/badges_show_view.js

@@ -0,0 +1,11 @@
+/**
+  View for showing a particular badge.
+
+  @class BadgesShowView
+  @extends Discourse.View
+  @namespace Discourse
+  @module Discourse
+**/
+Discourse.BadgesShowView = Discourse.View.extend(Discourse.LoadMore, {
+  eyelineSelector: '.badge-user'
+});