10 results @ a time, floating Install button, fixed height while loading styles.

popup.html

@@ -88,7 +88,6 @@
       <a class="search-result-title"></a>
       <div class="search-result-info">
         <img class="search-result-screenshot" />
-        <div class="search-result-overlay">
         <div class="actions">
           <button class="search-result-install" i18n-text="installButton"></button>
           <button class="search-result-uninstall hidden" i18n-text="deleteStyleLabel"></button>
@@ -96,6 +95,7 @@
                   i18n-text="searchResultCustomize"
                   i18n-title="searchResultCustomizeTooltip"></button>
         </div>
+        <div class="search-result-overlay">
           <div class="search-result-author">
             <label i18n-text="author"></label>:
             <a class="search-result-author-link" target="_blank"></a>
@@ -123,6 +123,10 @@
     </div>
   </template>
 
+  <template data-id="emptySearchResult">
+    <div class="search-result-empty"></div>
+  </template>
+
   <link rel="stylesheet" href="vendor-overwrites/colorpicker/colorpicker.css">
   <script src="vendor-overwrites/colorpicker/colorpicker.js"></script>
 

popup/search-results.css

@@ -22,13 +22,23 @@ body.search-results-shown {
 
 #search-results-list {
   position: relative;
-  min-height: 200px; /* Size of lds-spinner */
+  min-height: 200px;
 }
 
-.search-result {
+.search-result, .search-result-empty {
+  min-height: 170px;
   padding: 5px;
 }
 
+.search-result-empty {
+  position: relative;
+}
+.search-result-empty .lds-spinner {
+  top: 0;
+  width: 150px;
+  height: 150px;
+}
+
 .search-result-screenshot {
   height: 140px;
   width: 100%;
@@ -44,22 +54,35 @@ body.search-results-shown {
 .search-result-info {
   position: relative;
 }
-
+.search-result-info > div {
-.search-result-overlay {
-  width: 100%;
-  height: 85px;
-  position: absolute;
-  top: 55px;
   opacity: 0;
-  background-color: rgba(255, 255, 255, 0.6);
+  position: absolute;
+  width: 100%;
   transition: opacity linear 0.2s;
   overflow: hidden;
+  text-align: center;
 }
-.search-result-info:hover .search-result-overlay {
+.search-result-info:hover > div {
   opacity: 1;
 }
 
-.search-result-overlay > .actions {
+.search-result-overlay {
+  height: 55px;
+  top: 85px;
+  background-color: rgba(255, 255, 255, 0.6);
+}
+
+.search-result-info > .actions {
+  top: 30px;
+}
+.search-result-info > .actions > button {
+  background-color: #fff;
+}
+.search-result-info > .actions > button:hover {
+  background-color: #ccc;
+}
+
+.search-result-overlay > * {
   text-align: center;
 }
 
@@ -131,7 +154,8 @@ body.search-results-shown {
 .search-result-install,
 .search-result-customize,
 .search-result-uninstall {
-  width: 50%;
+  width: 40%;
+  margin: 3px;
 }
 
 #search-results-nav {

popup/search-results.js

@@ -32,7 +32,7 @@
    * @returns {Object} Includes load(), next(), and prev() methods to alter the search results.
    */
   function searchResultsController() {
-    const DISPLAYED_RESULTS_PER_PAGE = 3; // Number of results to display in popup.html
+    const DISPLAYED_RESULTS_PER_PAGE = 10; // Number of results to display in popup.html
     const DELAY_AFTER_FETCHING_STYLES = 0; // Millisecs to wait before fetching next batch of search results.
     const DELAY_BEFORE_SEARCHING_STYLES = 0; // Millisecs to wait before fetching .JSON for next search result.
     const searchAPI = searchUserstyles();
@@ -98,6 +98,14 @@
       const totalPageCount = Math.ceil(Math.max(1, totalResultsCount / DISPLAYED_RESULTS_PER_PAGE));
       $('#search-results-nav-next').disabled = (currentDisplayedPage >= totalPageCount || loading);
       $('#search-results-nav-total-pages').textContent = totalPageCount;
+
+      // Fill in remaining search results with blank results + spinners
+      const maxResults = currentDisplayedPage < totalPageCount
+        ? DISPLAYED_RESULTS_PER_PAGE
+        : displayedResults.length + unprocessedResults.length;
+      for (let i = displayedResults.length; i < maxResults; i++) {
+        createLoadingSearchResultNode();
+      }
     }
 
     /**
@@ -109,10 +117,7 @@
 
     function loadMoreIfNeeded() {
       if (shouldLoadMore()) {
-        setLoading(true);
         setTimeout(load, DELAY_BEFORE_SEARCHING_STYLES);
-      } else {
-        setLoading(false);
       }
     }
 
@@ -157,7 +162,10 @@
         processNextResult();
       } else if (searchAPI.isExhausted()) {
         // Stop if no more search results.
-        setLoading(false);
+        if (processedResults.length === 0) {
+          // No results
+          error(404);
+        }
       } else {
         setLoading(true);
         // Search for more results.
@@ -169,6 +177,7 @@
           category = searchAPI.getCategory(tab.url);
           searchAPI.search(category)
             .then(searchResults => {
+              setLoading(false);
               if (searchResults.data.length === 0) {
                 throw 404;
               }
@@ -188,7 +197,6 @@
      */
     function processNextResult() {
       if (!shouldLoadMore()) {
-        setLoading(false);
         return;
       }
 
@@ -265,6 +273,16 @@
       });
     }
 
+    function createLoadingSearchResultNode() {
+      const entry = template.emptySearchResult.cloneNode(true);
+      entry.appendChild(
+        $create(
+          '.lds-spinner',
+          new Array(12).fill($create('div')).map(e => e.cloneNode()))
+      );
+      $('#search-results-list').appendChild(entry);
+    }
+
     /**
      * Constructs and adds the given search result to the popup's Search Results container.
      * @param {Object} userstyleSearchResult The SearchResult object from userstyles.org
@@ -308,8 +326,7 @@
         screenshotUrl = searchAPI.BASE_URL + '/style_screenshot_thumbnails/' + screenshotUrl;
       }
       Object.assign(screenshot, {
-        src: screenshotUrl,
+        src: screenshotUrl
-        title: searchResultName
       });
 
       const searchResultOverlay = $('.search-result-overlay', entry);