diff options
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/search_bar.jsx | 13 | ||||
-rw-r--r-- | webapp/components/search_results.jsx | 29 | ||||
-rw-r--r-- | webapp/components/search_results_header.jsx | 3 | ||||
-rw-r--r-- | webapp/components/sidebar_right/sidebar_right.jsx | 2 |
4 files changed, 41 insertions, 6 deletions
diff --git a/webapp/components/search_bar.jsx b/webapp/components/search_bar.jsx index c635c5eb1..f2fed25ca 100644 --- a/webapp/components/search_bar.jsx +++ b/webapp/components/search_bar.jsx @@ -171,7 +171,16 @@ export default class SearchBar extends React.Component { handleSubmit(e) { e.preventDefault(); - this.handleSearch(this.state.searchTerm.trim()); + const terms = this.state.searchTerm.trim(); + + AppDispatcher.handleServerAction({ + type: ActionTypes.RECEIVED_SEARCH_TERM, + term: terms, + do_search: true, + is_mention_search: false + }); + + this.handleSearch(terms); this.search.blur(); } @@ -221,7 +230,7 @@ export default class SearchBar extends React.Component { var isSearching = null; if (this.state.isSearching) { - isSearching = <span className={'fa fa-refresh fa-refresh-animate icon--refresh icon--rotate'}/>; + isSearching = <span className={'fa fa-spin fa-spinner'}/>; } let helpClass = 'search-help-popover'; diff --git a/webapp/components/search_results.jsx b/webapp/components/search_results.jsx index 1d1627950..1499c8abb 100644 --- a/webapp/components/search_results.jsx +++ b/webapp/components/search_results.jsx @@ -39,7 +39,8 @@ function getStateFromStores() { results, channels, searchTerm: SearchStore.getSearchTerm(), - flaggedPosts: PreferenceStore.getCategory(Constants.Preferences.CATEGORY_FLAGGED_POST) + flaggedPosts: PreferenceStore.getCategory(Constants.Preferences.CATEGORY_FLAGGED_POST), + loading: SearchStore.isLoading() }; } @@ -71,6 +72,7 @@ export default class SearchResults extends React.Component { componentDidMount() { this.mounted = true; + SearchStore.addSearchTermChangeListener(this.onSearchTermChange); SearchStore.addSearchChangeListener(this.onChange); ChannelStore.addChangeListener(this.onChange); PreferenceStore.addChangeListener(this.onPreferenceChange); @@ -113,6 +115,7 @@ export default class SearchResults extends React.Component { componentWillUnmount() { this.mounted = false; + SearchStore.removeSearchTermChangeListener(this.onSearchTermChange); SearchStore.removeSearchChangeListener(this.onChange); ChannelStore.removeChangeListener(this.onChange); PreferenceStore.removeChangeListener(this.onPreferenceChange); @@ -144,6 +147,14 @@ export default class SearchResults extends React.Component { }); } + onSearchTermChange(doSearch) { + if (this.mounted && doSearch) { + this.setState({ + loading: true + }); + } + } + onChange() { if (this.mounted) { this.setState(getStateFromStores()); @@ -175,7 +186,20 @@ export default class SearchResults extends React.Component { var ctls = null; - if (this.props.isFlaggedPosts && noResults) { + if (this.state.loading) { + ctls = + ( + <div className='sidebar--right__subheader'> + <div className='sidebar--right__loading'> + <i className='fa fa-spinner fa-spin'/> + <FormattedMessage + id='search_header.loading' + defaultMessage='Searching...' + /> + </div> + </div> + ); + } else if (this.props.isFlaggedPosts && noResults) { ctls = ( <div className='sidebar--right__subheader'> <ul> @@ -319,6 +343,7 @@ export default class SearchResults extends React.Component { isFlaggedPosts={this.props.isFlaggedPosts} isPinnedPosts={this.props.isPinnedPosts} channelDisplayName={this.props.channelDisplayName} + isLoading={this.state.loading} /> <div id='search-items-container' diff --git a/webapp/components/search_results_header.jsx b/webapp/components/search_results_header.jsx index 467b77e27..b3f77c413 100644 --- a/webapp/components/search_results_header.jsx +++ b/webapp/components/search_results_header.jsx @@ -148,5 +148,6 @@ SearchResultsHeader.propTypes = { shrink: PropTypes.func, isFlaggedPosts: PropTypes.bool, isPinnedPosts: PropTypes.bool, - channelDisplayName: PropTypes.string.isRequired + channelDisplayName: PropTypes.string.isRequired, + isLoading: PropTypes.bool.isRequired }; diff --git a/webapp/components/sidebar_right/sidebar_right.jsx b/webapp/components/sidebar_right/sidebar_right.jsx index 737254682..f7c0a6400 100644 --- a/webapp/components/sidebar_right/sidebar_right.jsx +++ b/webapp/components/sidebar_right/sidebar_right.jsx @@ -157,7 +157,7 @@ export default class SidebarRight extends React.Component { onSearchChange() { this.setState({ - searchVisible: SearchStore.getSearchResults() !== null, + searchVisible: SearchStore.getSearchResults() !== null || SearchStore.isLoading(), isMentionSearch: SearchStore.getIsMentionSearch(), isFlaggedPosts: SearchStore.getIsFlaggedPosts(), isPinnedPosts: SearchStore.getIsPinnedPosts() |