Improve results rendering a bit

app.js

@@ -13,6 +13,58 @@ db.settings({ timestampsInSnapshots: true });
 
 var searchTimeout = null;
 var resultsElm = document.getElementById('results');
+
+function runQuery (query) {
+  var input = document.querySelector('input');
+  input.parentElement.classList.add('is-loading');
+  results.innerHTML = '<tr><td colspan="3"><div class="loader has-text-centered"></div></td></tr>';
+  query
+    .get()
+    .then(function (docs) {
+      if (docs.empty) {
+        results.innerHTML = '<tr><td colspan="3" class="notification">No results found for query "' + queryString + '"</td></tr>';
+        return;
+      }
+
+      // Collect the data of our documents into an array
+      var data = [];
+      for (var i = 0; i < docs.size; i += 1) {
+        var doc = docs.docs[i];
+        data.push(doc.data());
+      }
+
+      // Sort our array by my popular movie first
+      data.sort(function (a, b) {
+        if (a.imdb_position < b.imdb_position) return -1;
+        if (a.imdb_position > b.imdb_position) return 1;
+        return 0;
+      });
+
+      // Render our results
+      results.innerHTML = '';
+      for (var i = 0; i < data.length; i += 1) {
+        var doc = data[i];
+        tr = document.createElement('tr');
+        var td = document.createElement('td');
+        td.innerText = doc.imdb_position;
+        tr.appendChild(td);
+
+        td = document.createElement('td');
+        td.innerText = doc.title;
+        tr.appendChild(td);
+
+        td = document.createElement('td');
+        td.innerText = doc.released;
+        tr.appendChild(td);
+
+        results.appendChild(tr);
+      }
+    })
+    .finally(function () {
+      input.parentElement.classList.remove('is-loading');
+    });
+}
+
 document.querySelector('input').addEventListener('keyup', function (evt) {
   var elm = evt.target;
   var queryString = elm.value.trim();
@@ -43,74 +95,10 @@ document.querySelector('input').addEventListener('keyup', function (evt) {
   // Use `setTimeout` to debounce our api calls
   clearTimeout(searchTimeout);
   searchTimeout = setTimeout(function () {
-    elm.parentElement.classList.add('is-loading');
-    query
-      .get()
-      .then(function (docs) {
-        if (docs.empty) {
-          results.innerHTML = '<div class="notification is-danger">No results found for query "' + queryString + '"</div>';
-          return;
-        }
-
-        // Collect the data of our documents into an array
-        var data = [];
-        for (var i = 0; i < docs.size; i += 1) {
-          var doc = docs.docs[i];
-          data.push(doc.data());
-        }
-
-        // Sort our array by my popular movie first
-        data.sort(function (a, b) {
-          if (a.imdb_position < b.imdb_position) return -1;
-          if (a.imdb_position > b.imdb_position) return 1;
-          return 0;
-        });
-
-        // Render our results
-        // Table
-        var table = document.createElement('table');
-        table.classList.add('table');
-        table.classList.add('is-striped');
-
-        // Heading row
-        var thead = document.createElement('thead');
-        table.appendChild(thead);
-        var tr = document.createElement('tr');
-        thead.appendChild(tr);
-
-        var th = document.createElement('th');
-        th.innerText = 'Position';
-        thead.appendChild(th);
-        th = document.createElement('th');
-        th.innerText = 'Title';
-        thead.appendChild(th);
-        th = document.createElement('th');
-        th.innerText = 'Released';
-        thead.appendChild(th);
-
-        for (var i = 0; i < data.length; i += 1) {
-          var doc = data[i];
-          tr = document.createElement('tr');
-          var td = document.createElement('td');
-          td.innerText = doc.imdb_position;
-          tr.appendChild(td);
-
-          td = document.createElement('td');
-          td.innerText = doc.title;
-          tr.appendChild(td);
-
-          td = document.createElement('td');
-          td.innerText = doc.released;
-          tr.appendChild(td);
-
-          table.appendChild(tr);
-        }
-
-        results.innerHTML = '';
-        results.appendChild(table);
-      })
-      .finally(function () {
-        elm.parentElement.classList.remove('is-loading');
-      });
+    runQuery(query);
   }, 300);
 });
+
+// Run initial query to load some data
+var top20 = db.collection('movies').orderBy('imdb_position', 'asc').limit(20);
+runQuery(top20);

index.html

@@ -18,14 +18,24 @@
         <form>
           <div class="field">
             <div class="control has-icons-left">
-              <input type="text" class="input" placeholder="IMDB Top 250 Movie Title..." />
+              <input type="text" class="input" placeholder="IMDB Top 250 Movie Title..." autofocus tabindex="0" />
               <span class="icon is-small is-left">
                 <i class="fas fa-search"></i>
               </span>
             </div>
           </div>
         </form>
-        <div id="results"></div>
+        <table class="table is-striped is-hoverable is-fullwidth" style="table-layout: fixed;">
+          <thead>
+            <tr>
+              <th style="width: 100px">Position</th>
+              <th>Title</th>
+              <th>Released</th>
+            </tr>
+          </thead>
+          <tbody id="results">
+          </tbody>
+        </table>
       </div>
     </section>
     <script src="app.js"></script>