Revert "UX: Show user card on load (#7380)" (#7403)

This reverts commit 66789d73c9.

app/assets/javascripts/discourse/components/user-card-contents.js.es6

@@ -53,7 +53,6 @@ export default Ember.Component.extend(
     showCheckEmail: Ember.computed.and("user.staged", "canCheckEmails"),
 
     user: null,
-    loading: false,
 
     // If inside a topic
     topicPostCount: null,
@@ -151,10 +150,6 @@ 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)
@@ -165,7 +160,8 @@ export default Ember.Component.extend(
               user.topic_post_count[args.include_post_count_for]
             );
           }
-          this.setProperties({ user, loading: false });
+          this._positionCard($target);
+          this.setProperties({ user, visible: true });
         })
         .catch(() => this._close())
         .finally(() => this.set("loading", null));

app/assets/javascripts/discourse/templates/components/user-card-contents.hbs

@@ -93,21 +93,6 @@
       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'>
@@ -160,46 +145,44 @@
       </div>
     {{/if}}
 
-    {{#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}}
+    <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>
 
     {{#if publicUserFields}}
       <div class="card-row fifth-row">

app/assets/stylesheets/common/components/user-card.scss

@@ -2,27 +2,6 @@ $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 {