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.set('avatar', user);
+      self.setProperties({ user: user, avatar: user, visible: true});
     });
   },
 

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,7 +21,6 @@
     </span>
   </div>
 
-  {{#if user}}
   <ul class="usercard-controls">
     {{#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>
@@ -76,7 +73,4 @@
       {{/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; }