feature(compare) Display loading and empty results

Author: homersimpsons

site/static/compare.html

@@ -389,6 +389,7 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
                 </div>
             </div>
         </fieldset>
+        <p v-if="dataLoading && !data">Loading ...</p>
         <div v-if="data" id="content" style="margin-top: 15px">
             <div id="summary">
                 <div v-for="summaryPair in Object.entries(summary)" style="display: flex;">
@@ -421,7 +422,7 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
                 </div>
             </div>
             <table id="benches" class="compare">
-                <tbody>
+                <thead>
                     <tr>
                         <th>Benchmark & Profile</th>
                         <th>Scenario</th>
@@ -440,8 +441,11 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
                         <th>{{before}}</th>
                         <th>{{after}}</th>
                     </tr>
+                </thead>
+                <tbody v-if="testCases.length === 0">
+                    <tr><td colspan="6">No results</td></tr>
                 </tbody>
-                <tbody>
+                <tbody v-else>
                     <template v-for="testCase in testCases">
                         <tr>
                             <td>{{ testCase.benchmark }} {{ testCase.profile }}</td>
@@ -534,7 +538,8 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
                         incrPatched: true
                     }
                 },
-                data: null
+                data: null,
+                dataLoading: false
             },
             computed: {
                 notContinuous() {
@@ -783,6 +788,7 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
         }
 
         function makeData(state) {
+            app.dataLoading = true;
             let values = Object.assign({}, {
                 start: "",
                 end: "",
@@ -795,6 +801,8 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
             }
             makeRequest("/get", values).then(function (data) {
                 app.data = data;
+            }).finally(function () {
+                app.dataLoading = false;
             });
         }