Replace misguided "no annotations for this category" by loading spinner

This has been a thorn in our eyes for a while, and now we're rid of it. :-)
UUDigitalHumanitieslab · Nov 10, 2021 · e314696 · e314696
1 parent 23f7fd6
commit e314696
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 14 deletions.
diff --git a/frontend/src/panel-search-results/search-result-list-panel.ts b/frontend/src/panel-search-results/search-result-list-panel.ts
@@ -1,8 +1,9 @@
-import { extend } from 'lodash';
-import FlatItem from '../common-adapters/flat-item-model';
-import { CompositeView, ViewOptions as BaseOpt } from '../core/view';
+import { extend, get } from 'lodash';
 
+import { CompositeView, ViewOptions as BaseOpt } from '../core/view';
+import FlatItem from '../common-adapters/flat-item-model';
 import explorerChannel from '../explorer/explorer-radio';
+import LoadingSpinner from '../loading-spinner/loading-spinner-view';
 
 import searchResultListTemplate from './search-result-list-template';
 import SearchResultListView from './search-result-list-view';
@@ -18,6 +19,7 @@ export interface ViewOptions extends BaseOpt {
 export default class SearchResultListPanel extends CompositeView {
     title: string;
     searchList: SearchResultListView;
+    spinner: LoadingSpinner;
 
     constructor(options: ViewOptions) {
         super(options);
@@ -28,6 +30,11 @@ export default class SearchResultListPanel extends CompositeView {
         this.searchList = new SearchResultListView(options).render();
         this.listenTo(this.searchList, 'focus', this.onFocus);
         this.listenTo(this.searchList, 'blur', this.onBlur);
+        const promise = get(this.collection, ['underlying', 'promise']);
+        if (promise) {
+            this.spinner = new LoadingSpinner;
+            promise.then(this.removeSpinner.bind(this));
+        }
         this.render();
         return this;
     }
@@ -44,16 +51,22 @@ export default class SearchResultListPanel extends CompositeView {
     onBlur(): void {
         explorerChannel.trigger('searchResultList:itemClosed', this);
     }
+
+    removeSpinner(): void {
+        this.dispose('spinner');
+    }
 }
 
 extend(SearchResultListPanel.prototype, {
     tagName: 'div',
     className: 'search-result-list explorer-panel',
     template: searchResultListTemplate,
-    subviews: [
-        {
-            view: 'searchList',
-            selector: '.results-container'
-        },
-    ]
+    subviews: [{
+        view: 'searchList',
+        selector: '.results-container',
+    }, {
+        view: 'spinner',
+        selector: '.results-container',
+        method: 'before',
+    }],
 });
diff --git a/frontend/src/panel-search-results/search-result-list-template.hbs b/frontend/src/panel-search-results/search-result-list-template.hbs
@@ -4,10 +4,5 @@
     </header>
 </div>
 <div class="panel-content">
-    {{#unless collection.models.length}} 
-        <h5 class="title is-5">
-            No annotations for this category.
-        </h5>
-    {{/unless}}
     <div class="results-container"></div>
 </div>