UX: Show user card on load (#7380)

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));

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,6 +160,7 @@
       </div>
     {{/if}}
 
+    {{#unless loading}}
       <div class="card-row fourth-row">
         {{#unless user.profile_hidden}}
           <div class="metadata">
@@ -183,6 +199,7 @@
         {{/unless}}
         {{plugin-outlet name="user-card-after-metadata" args=(hash user=user)}}
       </div>
+    {{/unless}}
 
     {{#if publicUserFields}}
       <div class="card-row fifth-row">

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 {