From 7e7bca7ff00368c966885d38b2ffa9fad242f8b3 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Thu, 21 May 2020 10:00:14 +0100
Subject: [PATCH] Added loading state for member list rows

no issue

- with the sparsely loaded list you can scroll to an area which is being loaded in the background
- if a list row is being loaded, display a "loading" version of the row so it doesn't look like you're stuck on a blank screen
---
 .../app/components/gh-members-list-item.hbs   | 67 ++++++++++---------
 ghost/admin/app/templates/members.hbs         |  2 +-
 2 files changed, 38 insertions(+), 31 deletions(-)

diff --git a/ghost/admin/app/components/gh-members-list-item.hbs b/ghost/admin/app/components/gh-members-list-item.hbs
index a8b72371fa..b3ddff3ca6 100644
--- a/ghost/admin/app/components/gh-members-list-item.hbs
+++ b/ghost/admin/app/components/gh-members-list-item.hbs
@@ -1,37 +1,44 @@
-<li class="gh-list-row gh-members-list-item" ...attributes>
-    <LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data gh-members-list-basic">
-        <div class="flex items-center">
-            <GhMemberAvatar @member={{@member}} @containerClass="w9 h9 mr3" />
-            <div>
-                <h3 class="ma0 pa0 gh-members-list-name {{if (not @member.name) "gh-members-name-noname"}}">{{or @member.name @member.email}}</h3>
-                {{#if @member.name}}
-                    <p class="ma0 pa0 middarkgrey f8 gh-members-list-email">{{@member.email}}</p>
-                {{/if}}
+<li class="gh-list-row gh-members-list-item {{if @member.is_loading "loading"}}" ...attributes>
+    {{#if @member.is_loading}}
+        <div class="gh-list-data gh-list-loadingcell gh-list-cellwidth-100">
+            <div class="gh-list-loading-title"></div>
+            <div class="gh-list-loading-detail"></div>
+        </div>
+    {{else}}
+        <LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data gh-members-list-basic">
+            <div class="flex items-center">
+                <GhMemberAvatar @member={{@member}} @containerClass="w9 h9 mr3" />
+                <div>
+                    <h3 class="ma0 pa0 gh-members-list-name {{if (not @member.name) "gh-members-name-noname"}}">{{or @member.name @member.email}}</h3>
+                    {{#if @member.name}}
+                        <p class="ma0 pa0 middarkgrey f8 gh-members-list-email">{{@member.email}}</p>
+                    {{/if}}
+                </div>
             </div>
-        </div>
-    </LinkTo>
+        </LinkTo>
 
-    <LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data gh-members-list-geolocation gh-list-cellwidth-20 nowrap middarkgrey f8 {{if (not @member.name) "gh-members-geolocation-noname"}}">
-        {{#if @member.geolocation}}
-            {{#if (eq @member.geolocation.country_code "US")}}
-                {{@member.geolocation.region}}, US
+        <LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data gh-members-list-geolocation gh-list-cellwidth-20 nowrap middarkgrey f8 {{if (not @member.name) "gh-members-geolocation-noname"}}">
+            {{#if @member.geolocation}}
+                {{#if (eq @member.geolocation.country_code "US")}}
+                    {{@member.geolocation.region}}, US
+                {{else}}
+                    {{@member.geolocation.country}}
+                {{/if}}
             {{else}}
-                {{@member.geolocation.country}}
+                <span class="midlightgrey">Unknown</span>
             {{/if}}
-        {{else}}
-            <span class="midlightgrey">Unknown</span>
-        {{/if}}
-    </LinkTo>
+        </LinkTo>
 
-    <LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data gh-members-list-subscribed-at gh-list-cellwidth-20 nowrap middarkgrey f8 {{if (not @member.name) "gh-members-subscribed-noname"}}">
-        {{#if @member.createdAtUTC}}
-            {{moment-format @member.createdAtUTC "MMM DD, YYYY"}} <span class="midlightgrey">({{this.memberSince}})</span>
-        {{/if}}
-    </LinkTo>
+        <LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data gh-members-list-subscribed-at gh-list-cellwidth-20 nowrap middarkgrey f8 {{if (not @member.name) "gh-members-subscribed-noname"}}">
+            {{#if @member.createdAtUTC}}
+                {{moment-format @member.createdAtUTC "MMM DD, YYYY"}} <span class="midlightgrey">({{this.memberSince}})</span>
+            {{/if}}
+        </LinkTo>
 
-    <LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data gh-list-cellwidth-chevron gh-members-list-chevron">
-        <div class="flex items-center justify-end w-100 h-100">
-            <span class="nr2">{{svg-jar "arrow-right" class="w6 h6 fill-midgrey pa1"}}</span>
-        </div>
-    </LinkTo>
+        <LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data gh-list-cellwidth-chevron gh-members-list-chevron">
+            <div class="flex items-center justify-end w-100 h-100">
+                <span class="nr2">{{svg-jar "arrow-right" class="w6 h6 fill-midgrey pa1"}}</span>
+            </div>
+        </LinkTo>
+    {{/if}}
 </li>
\ No newline at end of file
diff --git a/ghost/admin/app/templates/members.hbs b/ghost/admin/app/templates/members.hbs
index 3843911c31..981ea9cdbc 100644
--- a/ghost/admin/app/templates/members.hbs
+++ b/ghost/admin/app/templates/members.hbs
@@ -66,7 +66,7 @@
                             <div class="gh-list-header gh-list-cellwidth-20 nowrap">Created</div>
                             <div class="gh-list-header gh-list-cellwidth-chevron"></div>
                         </li>
-                        <VerticalCollection @items={{this.members}} @key="id" @containerSelector=".gh-main" @estimateHeight={{69}} @staticHeight={{true}} @bufferSize={{5}} as |member|>
+                        <VerticalCollection @items={{this.members}} @key="id" @containerSelector=".gh-main" @estimateHeight={{69}} @staticHeight={{true}} @bufferSize={{20}} as |member|>
                             <GhMembersListItem @member={{member}} @data-test-member-id={{member.id}} />
                         </VerticalCollection>
                     {{else}}