Load 100 users at a time for the badge page, with a button to load more.

app/assets/javascripts/discourse/controllers/badges_show_controller.js

@@ -0,0 +1,22 @@
+/**
+  Controller for showing a particular badge.
+
+  @class BadgesShowController
+  @extends Discourse.ObjectController
+  @namespace Discourse
+  @module Discourse
+**/
+Discourse.BadgesShowController = Discourse.ObjectController.extend({
+  grantDates: Em.computed.mapBy('userBadges', 'grantedAt'),
+  minGrantedAt: Em.computed.min('grantDates'),
+
+  moreUserCount: function() {
+    if (this.get('userBadges')) {
+      return this.get('model.grant_count') - this.get('userBadges.length');
+    } else {
+      return 0;
+    }
+  }.property('model.grant_count', 'userBadges.length'),
+
+  showMoreUsers: Em.computed.gt('moreUserCount', 0)
+});

app/assets/javascripts/discourse/models/user_badge.js

@@ -53,6 +53,10 @@ Discourse.UserBadge.reopenClass({
 
     userBadges = userBadges.map(function(userBadgeJson) {
       var userBadge = Discourse.UserBadge.create(userBadgeJson);
+
+      var grantedAtDate = Date.parse(userBadge.get('granted_at'));
+      userBadge.set('grantedAt', grantedAtDate);
+
       userBadge.set('badge', badges[userBadge.get('badge_id')]);
       if (userBadge.get('user_id')) {
         userBadge.set('user', users[userBadge.get('user_id')]);
@@ -90,8 +94,13 @@ Discourse.UserBadge.reopenClass({
     @param {String} badgeId
     @returns {Promise} a promise that resolves to an array of `Discourse.UserBadge`.
   **/
-  findByBadgeId: function(badgeId) {
-    return Discourse.ajax("/user_badges.json?badge_id=" + badgeId).then(function(json) {
+  findByBadgeId: function(badgeId, options) {
+    if (!options) { options = {}; }
+    var url = "/user_badges.json?badge_id=" + badgeId;
+    if (options.granted_before) {
+      url = url + "&granted_before=" + encodeURIComponent(options.granted_before);
+    }
+    return Discourse.ajax(url).then(function(json) {
       return Discourse.UserBadge.createFromJson(json);
     });
   },

app/assets/javascripts/discourse/routes/badges_show_route.js

@@ -21,5 +21,16 @@ Discourse.BadgesShowRoute = Ember.Route.extend({
       controller.set('userBadgesLoaded', true);
     });
     controller.set('model', model);
+  },
+
+  actions: {
+    loadMore: function() {
+      var self = this;
+      Discourse.UserBadge.findByBadgeId(this.currentModel.get('id'), {
+        granted_before: this.get('controller.minGrantedAt') / 1000
+      }).then(function(userBadges) {
+        self.get('controller.userBadges').pushObjects(userBadges);
+      });
+    }
   }
 });

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

@@ -16,17 +16,24 @@
   {{#if userBadges}}
     <h2>{{i18n users}}</h2>
     <br>
+    <div>
     {{#each userBadges}}
-      {{#link-to 'userActivity' user}}
-        <div class="badge-user">
-          {{avatar user imageSize="large"}}
-          <div class="details">
-            <span class="username">{{user.username}}</span>
-            {{unboundDate granted_at}}
+        {{#link-to 'userActivity' user}}
+          <div class="badge-user">
+            {{avatar user imageSize="large"}}
+            <div class="details">
+              <span class="username">{{user.username}}</span>
+              {{unboundDate granted_at}}
+            </div>
           </div>
-        </div>
-      {{/link-to}}
-    {{/each}}
+        {{/link-to}}
+      {{/each}}
+    </div>
+    {{#if showMoreUsers}}
+      <button class="btn" {{action loadMore}}>
+        {{countI18n badges.more_badges count=moreUserCount}}
+      </button>
+    {{/if}}
   {{else}}
     {{#unless userBadgesLoaded}}
       <div class='spinner'>{{i18n loading}}</div>