From 66789d73c942aeceef515bf6b9cad5768777035c Mon Sep 17 00:00:00 2001
From: Tim Lange <tim.lange@online.de>
Date: Fri, 19 Apr 2019 09:20:03 +0200
Subject: [PATCH] UX: Show user card on load (#7380)

---
 .../components/user-card-contents.js.es6      |  8 +-
 .../components/user-card-contents.hbs         | 93 +++++++++++--------
 .../common/components/user-card.scss          | 21 +++++
 3 files changed, 82 insertions(+), 40 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/user-card-contents.js.es6 b/app/assets/javascripts/discourse/components/user-card-contents.js.es6
index 780ee6fb467..a151cbea636 100644
--- a/app/assets/javascripts/discourse/components/user-card-contents.js.es6
+++ b/app/assets/javascripts/discourse/components/user-card-contents.js.es6
@@ -53,6 +53,7 @@ export default Ember.Component.extend(
     showCheckEmail: Ember.computed.and("user.staged", "canCheckEmails"),
 
     user: null,
+    loading: false,
 
     // If inside a topic
     topicPostCount: null,
@@ -150,6 +151,10 @@ export default Ember.Component.extend(
     },
 
     _showCallback(username, $target) {
+      this._positionCard($target);
+      const currentUser = Discourse.__container__.lookup("current-user:main");
+      this.setProperties({ visible: true, loading: true, user: currentUser });
+
       const args = { stats: false };
       args.include_post_count_for = this.get("topic.id");
       User.findByUsername(username, args)
@@ -160,8 +165,7 @@ export default Ember.Component.extend(
               user.topic_post_count[args.include_post_count_for]
             );
           }
-          this._positionCard($target);
-          this.setProperties({ user, visible: true });
+          this.setProperties({ user, loading: false });
         })
         .catch(() => this._close())
         .finally(() => this.set("loading", null));
diff --git a/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs b/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs
index cf45d786968..302eebbaebb 100644
--- a/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs
+++ b/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs
@@ -93,6 +93,21 @@
       tagName=""}}
     </div>
 
+    {{#if loading}}
+      <div class="card-row second-row">
+        <div class="animated-placeholder"></div>
+      </div>
+      <div class="card-row third-row">
+        <div class="animated-placeholder"></div>
+      </div>
+      <div class="card-row fourth-row">
+        <div class="animated-placeholder"></div>
+      </div>
+      <div class="card-row sixth-row">
+        <div class="animated-placeholder"></div>
+      </div>
+    {{/if}}
+
     {{#if user.profile_hidden}}
       <div class="card-row second-row">
         <div class='profile-hidden'>
@@ -145,44 +160,46 @@
       </div>
     {{/if}}
 
-    <div class="card-row fourth-row">
-      {{#unless user.profile_hidden}}
-        <div class="metadata">
-          {{#if user.last_posted_at}}
-            <h3><span class='desc'>{{i18n 'last_post'}}</span>
-              {{format-date user.last_posted_at leaveAgo="true"}}</h3>
-          {{/if}}
-          <h3><span class='desc'>{{i18n 'joined'}}</span>
-            {{format-date user.created_at leaveAgo="true"}}</h3>
-          {{#if user.time_read}}
-            <h3 title="{{timeReadTooltip}}">
-              <span class='desc'>{{i18n 'time_read'}}</span>
-              {{format-duration user.time_read}}
-              {{#if showRecentTimeRead}}
-                <span>({{i18n 'time_read_recently' time_read=recentTimeRead}})</span>
-              {{/if}}
-            </h3>
-          {{/if}}
-          {{#if showCheckEmail}}
-            <h3 class="email">
-              {{d-icon "far-envelope" title="user.email.title"}}
-              {{#if user.email}}
-                {{user.email}}
-              {{else}}
-                {{d-button
-                action=(action "checkEmail")
-                actionParam=user
-                icon="far-envelope"
-                label="admin.users.check_email.text"
-                class="btn-primary"}}
-              {{/if}}
-            </h3>
-          {{/if}}
-          {{plugin-outlet name="user-card-metadata" args=(hash user=user)}}
-        </div>
-      {{/unless}}
-      {{plugin-outlet name="user-card-after-metadata" args=(hash user=user)}}
-    </div>
+    {{#unless loading}}
+      <div class="card-row fourth-row">
+        {{#unless user.profile_hidden}}
+          <div class="metadata">
+            {{#if user.last_posted_at}}
+              <h3><span class='desc'>{{i18n 'last_post'}}</span>
+                {{format-date user.last_posted_at leaveAgo="true"}}</h3>
+            {{/if}}
+            <h3><span class='desc'>{{i18n 'joined'}}</span>
+              {{format-date user.created_at leaveAgo="true"}}</h3>
+            {{#if user.time_read}}
+              <h3 title="{{timeReadTooltip}}">
+                <span class='desc'>{{i18n 'time_read'}}</span>
+                {{format-duration user.time_read}}
+                {{#if showRecentTimeRead}}
+                  <span>({{i18n 'time_read_recently' time_read=recentTimeRead}})</span>
+                {{/if}}
+              </h3>
+            {{/if}}
+            {{#if showCheckEmail}}
+              <h3 class="email">
+                {{d-icon "far-envelope" title="user.email.title"}}
+                {{#if user.email}}
+                  {{user.email}}
+                {{else}}
+                  {{d-button
+                    action=(action "checkEmail")
+                    actionParam=user
+                    icon="far-envelope"
+                    label="admin.users.check_email.text"
+                    class="btn-primary"}}
+                {{/if}}
+              </h3>
+            {{/if}}
+            {{plugin-outlet name="user-card-metadata" args=(hash user=user)}}
+          </div>
+        {{/unless}}
+        {{plugin-outlet name="user-card-after-metadata" args=(hash user=user)}}
+      </div>
+    {{/unless}}
 
     {{#if publicUserFields}}
       <div class="card-row fifth-row">
diff --git a/app/assets/stylesheets/common/components/user-card.scss b/app/assets/stylesheets/common/components/user-card.scss
index 6e2a5568aaa..c1f566ab9c0 100644
--- a/app/assets/stylesheets/common/components/user-card.scss
+++ b/app/assets/stylesheets/common/components/user-card.scss
@@ -2,6 +2,27 @@ $card_width: 580px;
 $avatar_width: 120px;
 $avatar_margin: -50px; // negative margin makes avatars extend above cards
 
+// placeholder
+@keyframes placeHolderShimmer {
+  0% {
+    background-position: -468px 0;
+  }
+  100% {
+    background-position: 468px 0;
+  }
+}
+.animated-placeholder {
+  animation-duration: 1.25s;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: placeHolderShimmer;
+  animation-timing-function: linear;
+  background: darkgray;
+  background: linear-gradient(to right, #eeeeee 10%, #dddddd 18%, #eeeeee 33%);
+  height: 20px;
+  position: relative;
+}
+
 // shared styles for user and group cards
 #user-card,
 #group-card {