UX: Let's try a fade in when the user card is shown

app/assets/javascripts/discourse/controllers/user-card.js.es6

@@ -48,7 +48,7 @@ export default ObjectController.extend({
       this.set('avatar', null);
     }
 
-    this.setProperties({visible: true, username: username});
+    this.set('username', username);
 
     // If we click the avatar again, close it.
     if (username === currentUsername && wasVisible) {
@@ -67,8 +67,7 @@ export default ObjectController.extend({
     var self = this;
     self.set('user', null);
     Discourse.User.findByUsername(username).then(function (user) {
-      self.set('user', user);
+      self.setProperties({ user: user, avatar: user, visible: true});
-      self.set('avatar', user);
     });
   },
 

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

@@ -1,6 +1,4 @@
 <div class="card-content">
-
-{{#if username}}
   {{#link-to 'user' user}}{{bound-avatar avatar "huge"}}{{/link-to}}
 
   <div class="names">
@@ -23,60 +21,56 @@
     </span>
   </div>
 
-  {{#if user}}
+  <ul class="usercard-controls">
-    <ul class="usercard-controls">
+    {{#if user.can_send_private_message_to_user}}
-      {{#if user.can_send_private_message_to_user}}
+      <li><a class='btn btn-primary' {{action "composePrivateMessage" user}}>{{fa-icon "envelope"}}{{i18n user.private_message}}</a></li>
-        <li><a class='btn btn-primary' {{action "composePrivateMessage" user}}>{{fa-icon "envelope"}}{{i18n user.private_message}}</a></li>
-      {{/if}}
-
-      <li>{{#link-to 'user' user class="btn"}}{{fa-icon "user"}}{{i18n user.profile}}{{/link-to}}</li>
-
-      {{#if showFilter}}
-      <li><a class='btn' {{action "togglePosts" user}}>{{fa-icon "filter"}}{{i18n topic.filter_to username="username" post_count="participant.post_count"}}</a></li>
-      {{/if}}
-
-      {{#if hasUserFilters}}
-      <li><a class='btn' {{action "cancelFilter"}}>{{fa-icon "times"}}{{i18n topic.filters.cancel}}</a></li>
-      {{/if}}
-    </ul>
-
-    {{#if isSuspended}}
-      <div class='suspended'>
-        {{fa-icon "ban"}}
-        <b>{{i18n user.suspended_notice date="user.suspendedTillDate"}}</b><br/>
-        <b>{{i18n user.suspended_reason}}</b> {{user.suspend_reason}}
-      </div>
-    {{else}}
-      {{#if user.bio_cooked}}<div class='bio'>{{text-overflow class="overflow" text=user.bio_cooked}}</div>{{/if}}
     {{/if}}
 
-    {{#if user.card_badge}}
+    <li>{{#link-to 'user' user class="btn"}}{{fa-icon "user"}}{{i18n user.profile}}{{/link-to}}</li>
-      {{#link-to 'badges.show' user.card_badge class="card-badge" title=user.card_badge.name}}
+
-        {{icon-or-image user.card_badge.image title=user.card_badge.name}}
+    {{#if showFilter}}
-      {{/link-to}}
+    <li><a class='btn' {{action "togglePosts" user}}>{{fa-icon "filter"}}{{i18n topic.filter_to username="username" post_count="participant.post_count"}}</a></li>
     {{/if}}
 
-    <div class="metadata">
+    {{#if hasUserFilters}}
-      <h3><span class='desc'>{{i18n last_post}}</span> {{format-date path="user.last_posted_at" leaveAgo="true"}} </h3>
+    <li><a class='btn' {{action "cancelFilter"}}>{{fa-icon "times"}}{{i18n topic.filters.cancel}}</a></li>
-      <h3><span class='desc'>{{i18n joined}}</span> {{format-date path="user.created_at" leaveAgo="true"}}</h3>
+    {{/if}}
-      {{#if user.githubProfileUrl}}
+  </ul>
-        <h3><a href="{{unbound user.githubProfileUrl}}">{{i18n user.github_profile}}</a></h3>
+
+  {{#if isSuspended}}
+    <div class='suspended'>
+      {{fa-icon "ban"}}
+      <b>{{i18n user.suspended_notice date="user.suspendedTillDate"}}</b><br/>
+      <b>{{i18n user.suspended_reason}}</b> {{user.suspend_reason}}
+    </div>
+  {{else}}
+    {{#if user.bio_cooked}}<div class='bio'>{{text-overflow class="overflow" text=user.bio_cooked}}</div>{{/if}}
+  {{/if}}
+
+  {{#if user.card_badge}}
+    {{#link-to 'badges.show' user.card_badge class="card-badge" title=user.card_badge.name}}
+      {{icon-or-image user.card_badge.image title=user.card_badge.name}}
+    {{/link-to}}
+  {{/if}}
+
+  <div class="metadata">
+    <h3><span class='desc'>{{i18n last_post}}</span> {{format-date path="user.last_posted_at" leaveAgo="true"}} </h3>
+    <h3><span class='desc'>{{i18n joined}}</span> {{format-date path="user.created_at" leaveAgo="true"}}</h3>
+    {{#if user.githubProfileUrl}}
+      <h3><a href="{{unbound user.githubProfileUrl}}">{{i18n user.github_profile}}</a></h3>
+    {{/if}}
+  </div>
+
+  {{#if showBadges}}
+    <div class="badge-section">
+      {{#each user.featured_user_badges}}
+        {{user-badge badge=badge}}
+      {{/each}}
+      {{#if showMoreBadges}}
+        {{#link-to 'user.badges' user class="btn more-user-badges"}}
+          {{i18n badges.more_badges count=moreBadgesCount}}
+        {{/link-to}}
       {{/if}}
     </div>
-
-    {{#if showBadges}}
-      <div class="badge-section">
-        {{#each user.featured_user_badges}}
-          {{user-badge badge=badge}}
-        {{/each}}
-        {{#if showMoreBadges}}
-          {{#link-to 'user.badges' user class="btn more-user-badges"}}
-            {{i18n badges.more_badges count=moreBadgesCount}}
-          {{/link-to}}
-        {{/if}}
-      </div>
-    {{/if}}
   {{/if}}
-{{/if}}
-
 </div>

app/assets/javascripts/discourse/views/user-card.js.es6

@@ -6,9 +6,22 @@ var clickOutsideEventName = "mousedown.outside-user-card",
 
 export default Discourse.View.extend(CleansUp, {
   elementId: 'user-card',
-  classNameBindings: ['controller.visible::hidden', 'controller.showBadges'],
+  classNameBindings: ['controller.showBadges'],
   allowBackgrounds: Discourse.computed.setting('allow_profile_backgrounds'),
 
+  _visibleChanged: function() {
+    var vis = this.get('controller.visible'),
+        $this = this.$();
+
+    if (!$this) { return; }
+
+    if (vis) {
+      this.$().fadeIn('fast');
+    } else {
+      this.$().fadeOut('fast');
+    }
+  }.observes('controller.visible'),
+
   addBackground: function() {
     var url = this.get('controller.user.card_background');
     if (!this.get('allowBackgrounds')) { return; }