dashboard: display sorting message when sorting table

circle/dashboard/static/dashboard/dashboard.css

@@ -495,3 +495,7 @@ footer a, footer a:hover, footer a:visited {
 .vm-list-table th i {
 .vm-list-table th i {
   margin-top: 3px;
   margin-top: 3px;
 }
 }
+
+.table-sorting {
+  display: none;
+}

circle/dashboard/static/dashboard/vm-list.js

@@ -161,12 +161,13 @@ $(function() {
   var table = $(".vm-list-table").stupidtable();
   var table = $(".vm-list-table").stupidtable();
 
 
   table.on("beforetablesort", function(event, data) {
   table.on("beforetablesort", function(event, data) {
-    return false;
+    $(".table-sorting").show();
   });
   });
 
 
   table.on("aftertablesort", function(event, data) {
   table.on("aftertablesort", function(event, data) {
     // this didn't work ;;
     // this didn't work ;;
     // var th = $("this").find("th");
     // var th = $("this").find("th");
+    $(".table-sorting").hide();
     
     
     $(".vm-list-table thead th i").remove();
     $(".vm-list-table thead th i").remove();
 
 

circle/dashboard/templates/dashboard/vm-list.html

@@ -9,6 +9,10 @@
   <div class="col-md-12">
   <div class="col-md-12">
     <div class="panel panel-default">
     <div class="panel panel-default">
       <div class="panel-heading">
       <div class="panel-heading">
+        <div class="pull-right table-sorting">
+          {% trans "Sorting ... " %}
+          <!--<i class="icon-refresh icon-spin icon-2x"></i>-->
+        </div>
         <h3 class="no-margin"><i class="icon-desktop"></i> {% trans "Virtual machines" %}</h3>
         <h3 class="no-margin"><i class="icon-desktop"></i> {% trans "Virtual machines" %}</h3>
       </div>
       </div>
       <div class="pull-right" style="max-width: 250px; margin-top: 15px; margin-right: 15px;">
       <div class="pull-right" style="max-width: 250px; margin-top: 15px; margin-right: 15px;">