preload user tooltips

app/views/user/mini.scala.html

@@ -22,26 +22,7 @@
   </div>
   }
 </div>
-@if(!ctx.pref.isBlindfold) {
-@playing.map { pov =>
-@gameFen(pov)
-<div class="game_legend">
-  @playerText(pov.opponent, withRating = true)
-  @pov.game.clock.map { c =>
-  • @c.config.show
-  }
-</div>
-}
-}
 @ctx.userId.map { myId =>
-@crosstable.filter(_.nonEmpty).map { cross =>
-<a class="score hint--bottom" href="@routes.User.games(u.username, "me")#games" data-hint="@trans.nbGames.plural(cross.nbGames, cross.nbGames.localize)">
-  @trans.yourScore {
-  <strong>@cross.showScore(myId)</strong> - <strong>@cross.showOpponentScore(myId)</strong>
-  }
-</a>
-}
-
 @if(myId != u.id && u.enabled) {
 <div class="actions">
   <a class="button hint--bottom" data-hint="@trans.watchGames()" href="@routes.User.tv(u.username)">
@@ -58,11 +39,28 @@
   @relation.mini(u.id, blocked, followable, rel)
 </div>
 }
+@crosstable.filter(_.nonEmpty).map { cross =>
+<a class="score hint--bottom" href="@routes.User.games(u.username, "me")#games" data-hint="@trans.nbGames.plural(cross.nbGames, cross.nbGames.localize)">
+  @trans.yourScore {
+  <strong>@cross.showScore(myId)</strong> - <strong>@cross.showOpponentScore(myId)</strong>
+  }
+</a>
+}
 }
-
 @if(isGranted(_.UserSpy)) {
 <div class="mod_info_box">
   @if(u.lameOrTroll || u.disabled) { <span class="mod_marks">@userMarks(u, None)</span> }
   <p>@trans.nbGames.plural(u.count.game, u.count.game.localize), @momentFromNow(u.createdAt)</p>
 </div>
 }
+@if(!ctx.pref.isBlindfold) {
+@playing.map { pov =>
+@gameFen(pov)
+<div class="game_legend">
+  @playerText(pov.opponent, withRating = true)
+  @pov.game.clock.map { c =>
+  • @c.config.show
+  }
+</div>
+}
+}

public/stylesheets/common.css

@@ -276,6 +276,7 @@ group.radio input:checked + label {
   margin-right: 2px;
 }
 #powerTip > .title {
+  height: 62px;
   padding: 5px 3px;
   border-bottom: 1px solid #c0c0c0;
 }
@@ -359,7 +360,7 @@ group.radio input:checked + label {
   display: block;
   font-size: 1.2em;
   text-align: center;
-  border-bottom: 1px solid #c0c0c0;
+  border-top: 1px solid #c0c0c0;
   padding: 3px 0;
 }
 #powerTip > .info .title {

ui/site/src/util.js

@@ -107,10 +107,12 @@ lichess.powertip = (function() {
     return el && el.contains(contained);
   };
 
-  var onPowertipPreRender = function(id) {
+  var onPowertipPreRender = function(id, preload) {
     return function() {
+      var url = ($(this).data('href') || $(this).attr('href')).replace(/\?.+$/, '');
+      if (preload) preload(url);
       $.ajax({
-        url: ($(this).data('href') || $(this).attr('href')).replace(/\?.+$/, '') + '/mini',
+        url: url + '/mini',
         success: function(html) {
           $('#' + id).html(html);
           lichess.pubsub.emit('content_loaded')();
@@ -129,9 +131,17 @@ lichess.powertip = (function() {
       placement: pos,
       mouseOnToPopup: true,
       closeDelay: 200
-    }).on({
-      powerTipPreRender: onPowertipPreRender('powerTip')
-    }).data('powertip', lichess.spinnerHtml);
+    }).data('powertip', ' ').on({
+      powerTipRender: onPowertipPreRender('powerTip', function(url) {
+        var u = url.substr(3);
+        var preload = '<div class="title"><span class="user_link offline">' + $(el).html() + '</span></div><div class="actions">' +
+          '<a class="button" href="/@/' + u + '/tv"><i data-icon="1"></i></a>' +
+          '<a class="button" href="/inbox/new?user=' + u + '"><i data-icon="c"></i></a>' +
+          '<a class="button" href="/?user=' + u + '#friend"><i data-icon="U"></i></a>' +
+          '<a class="button relation" disabled></a></div>';
+        $('#powerTip').html(preload);
+      })
+    });
   };
 
   var gamePowertip = function(el) {