Merge pull request #1883 from ether/fix/adminplugins/loading-and-scroll

Beautify infinite scroll

src/static/css/admin.css

@@ -142,11 +142,13 @@ td, th {
   width:100%;
 }
 
-.messages td>* {
+.messages {
+  height: 5em;
+}
+.messages * {
   display: none;
   text-align: center;
 }
-
 .messages .fetching {
   display: block;
 }
@@ -162,7 +164,7 @@ td, th {
 
 #search-progress.progress {
   padding-top: 20%;
-  background: rgba(255,255,255,0.7);
+  background: rgba(255,255,255,0.3);
 }
 
 .progress * {

src/static/js/admin/plugins.js

@@ -22,22 +22,29 @@ $(document).ready(function () {
     search.searchTerm = searchTerm;
     socket.emit("search", {searchTerm: searchTerm, offset:search.offset, limit: limit, sortBy: search.sortBy, sortDir: search.sortDir});
     search.offset += limit;
+    
     $('#search-progress').show()
+    search.messages.show('fetching')
+    storeScrollPosition()
+    search.searching = true
   }
+  search.searching = false;
   search.offset = 0;
-  search.limit = 12;
+  search.limit = 25;
   search.results = [];
   search.sortBy = 'name';
   search.sortDir = /*DESC?*/true;
   search.end = true;// have we received all results already?
   search.messages = {
     show: function(msg) {
-      $('.search-results .messages').show()
+      //$('.search-results .messages').show()
       $('.search-results .messages .'+msg+'').show()
+      $('.search-results .messages .'+msg+' *').show()
     },
     hide: function(msg) {
-      $('.search-results .messages').hide()
+      //$('.search-results .messages').hide()
       $('.search-results .messages .'+msg+'').hide()
+      $('.search-results .messages .'+msg+' *').hide()
     }
   }
 
@@ -97,13 +104,25 @@ $(document).ready(function () {
   }
 
   // Infinite scroll
+  var scrollPosition
+  function storeScrollPosition() {
+    scrollPosition = $(window).scrollTop()
+  }
+  function restoreScrollPosition() {
+    setTimeout(function() {
+      $(window).scrollTop(scrollPosition)
+    }, 0)
+  }
+  
   $(window).scroll(checkInfiniteScroll)
   function checkInfiniteScroll() {
-    if(search.end) return;// don't keep requesting if there are no more results
-    try{
-      var top = $('.search-results .results > tr:last').offset().top
-      if($(window).scrollTop()+$(window).height() > top) search(search.searchTerm)
-    }catch(e){}
+    if(search.end || search.searching) return;// don't keep requesting if there are no more results
+    setTimeout(function() {
+      try{
+        var top = $('.results>tr:last').offset().top
+        if($(window).scrollTop()+$(window).height() > top) search(search.searchTerm)
+      }catch(e){}
+    }, 1)
   }
 
   function updateHandlers() {
@@ -181,8 +200,11 @@ $(document).ready(function () {
     }else {
       search.messages.show('nothing-found')
     }
+    search.messages.hide('fetching')
     $('#search-progress').hide()
+    restoreScrollPosition()
     checkInfiniteScroll()
+    search.searching = false
   });
 
   socket.on('results:installed', function (data) {

src/templates/admin/plugins.html

@@ -96,11 +96,13 @@
             </tbody>
             <tbody class="results">
             </tbody>
-            <tbody class="messages">
+            <tbody>
               <tr><td></td><td>
-                <div class="search-progress" class="progress"><img src="../static/img/loading.gif"/></div>
-                <p class="nothing-found">No plugins found.</p>
-                <p class="fetching"><img src="../static/img/loading.gif"/><br/>Fetching catalogue...</p>
+                <div class="messages">
+                  <div id="search-progress" class="progress"><p>&nbsp;</p></div>
+                  <p class="nothing-found">No plugins found.</p>
+                  <p class="fetching"><img src="../static/img/loading.gif"/><br/>Fetching...</p>
+                </div>
               </td><td></td></tr>
             </tbody>
           </table>