Load all members on members screen, use occlusion scrolling for perf

ghost/admin/app/controllers/members.js

@@ -1,28 +1,14 @@
 import Controller from '@ember/controller';
-import {computed} from '@ember/object';
 import {task} from 'ember-concurrency';
 
 /* eslint-disable ghost/ember/alias-model-in-controller */
 export default Controller.extend({
-    queryParams: ['page'],
-
     meta: null,
     members: null,
 
-    page: computed('meta.pagination.page', function () {
-        let page = this.get('meta.pagination.page');
-
-        if (!page || page === 1) {
-            return null;
-        }
-
-        return page;
-    }),
-
     fetchMembers: task(function* () {
         let results = yield this.store.query('member', {
-            page: this.page || 1,
-            limit: 15
+            limit: 'all'
         });
 
         this.set('meta', results.meta);

ghost/admin/app/templates/members.hbs

@@ -10,7 +10,13 @@
         {{#if this.members}}
             {{!-- members list, styles taken from .apps-grid --}}
             <div class="flex flex-row flex-wrap items-start ba br3">
-                {{#each this.members as |member index|}}
+                <VerticalCollection
+                    @items={{this.members}}
+                    @key="id"
+                    @containerSelector=".gh-main"
+                    @estimateHeight=76
+                    as |member index|
+                >
                     <div class="flex-grow-1 flex-shrink-1" style="flex-basis: 100%">
                         {{#link-to "member" member}}
                             <article class="flex items-center justify-between pa4 {{if index "bt"}}">
@@ -25,7 +31,7 @@
                             </article>
                         {{/link-to}}
                     </div>
-                {{/each}}
+                </VerticalCollection>
             </div>
         {{else}}
             {{#unless this.fetchMembers.isRunning}}