browse/search: Slight UI improvements

  - prefer to display a smaller spinner in the left of the search panel
    header instead of a big one at the center of the screen

  - clean the search results table when performing a new search

swh/web/assets/src/bundles/browse/browse.css

@@ -47,15 +47,7 @@ ul.navbar-nav a {
 }
 
 .swh-loading.show {
-    display: inline-block;
-    position: fixed;
-    background: white;
-    border: 1px solid black;
-    top: 50%;
-    left: 50%;
-    margin: -50px 0 0 -50px;
-    text-align: center;
-    z-index: 100;
+    display: block;
 }
 
 .swh-metadata-table-row {

swh/web/assets/src/bundles/browse/origin-search.js

@@ -21,12 +21,16 @@ function fixTableRowsStyle() {
   });
 }
 
+function clearOriginSearchResultsTable() {
+  $('#origin-search-results tbody tr').remove();
+}
+
 function populateOriginSearchResultsTable(data, offset) {
   let localOffset = offset % limit;
   if (data.length > 0) {
     $('#swh-origin-search-results').show();
     $('#swh-no-origins-found').hide();
-    $('#origin-search-results tbody tr').remove();
+    clearOriginSearchResultsTable();
     let table = $('#origin-search-results tbody');
     for (let i = localOffset; i < localOffset + perPage && i < data.length; ++i) {
       let elem = data[i];
@@ -118,6 +122,7 @@ export function initOriginSearch() {
       let patterns = $('#origins-url-patterns').val();
       offset = 0;
       inSearch = true;
+      clearOriginSearchResultsTable();
       searchOrigins(patterns, limit, offset, offset);
       event.preventDefault();
     });

swh/web/templates/browse-search.html

@@ -12,7 +12,12 @@ See top-level LICENSE file for more information
 {% block browse-content %}
 <div class="card">
   <div class="card-header bg-gray-light">
-    <h4>Search Software Heritage origins to browse</h4>
+    <div class="float-left">
+      <h4>Search Software Heritage origins to browse</h4>
+    </div>
+    <div class="swh-loading float-right">
+      <img src="{% static 'img/swh-spinner-small.gif' %}"></img>
+    </div>
   </div>
   <div class="card-body">
     <form class="form-horizontal" id="search_origins">
@@ -24,11 +29,6 @@ See top-level LICENSE file for more information
       </div>
     </form>
 
-    <div class="swh-loading">
-      <img src="{% static 'img/swh-spinner.gif' %}"></img>
-      <p>Searching origins ...</p>
-    </div>
-
     <div id="swh-origin-search-results" style="display: none;">
       <div class="table-responsive">
         <table class="table swh-table-even-odd" id="origin-search-results">