diff --git a/frontend/src/panel-search-results/search-result-list-panel.ts b/frontend/src/panel-search-results/search-result-list-panel.ts index f81906a3..991f5816 100644 --- 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 index 83efb43b..8ef37f67 100644 --- 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 @@