moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Display loading animation during search

This commit is contained in:
Alex Gleason 2021-03-21 16:09:50 -05:00
parent 3361326311
commit 8a0fa1b285
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
3 changed files with 13 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
app/soapbox/features/compose/components/search_results.js
View File

@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { FormattedMessage, injectIntl } from 'react-intl'; import { FormattedMessage, injectIntl } from 'react-intl';
import AccountContainer from '../../../containers/account_container'; import AccountContainer from '../../../containers/account_container';
@ -8,35 +7,24 @@ import StatusContainer from '../../../containers/status_container';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import Hashtag from '../../../components/hashtag'; import Hashtag from '../../../components/hashtag';
import Icon from 'soapbox/components/icon'; import Icon from 'soapbox/components/icon';
import WhoToFollowPanel from '../../ui/components/who_to_follow_panel'; import LoadingIndicator from 'soapbox/components/loading_indicator';
import { getFeatures } from 'soapbox/utils/features';
const mapStateToProps = state => ({ export default @injectIntl
features: getFeatures(state.get('instance')),
});
export default @connect(mapStateToProps)
@injectIntl
class SearchResults extends ImmutablePureComponent { class SearchResults extends ImmutablePureComponent {
static propTypes = { static propTypes = {
results: ImmutablePropTypes.map.isRequired, results: ImmutablePropTypes.map.isRequired,
features: PropTypes.object, submitted: PropTypes.bool,
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
}; };
state = {
isSmallScreen: (window.innerWidth <= 895),
}
render() { render() {
const { results, features } = this.props; const { results, submitted } = this.props;
const { isSmallScreen } = this.state;
if (results.isEmpty() && isSmallScreen) { if (submitted && results.isEmpty()) {
return ( return (
<div className='search-results'> <div className='search-results'>
{features.suggestions && <WhoToFollowPanel />} <LoadingIndicator />
</div> </div>
); );
} }

1
app/soapbox/features/compose/containers/search_results_container.js
View File

@ -5,6 +5,7 @@ import { fetchSuggestions, dismissSuggestion } from '../../../actions/suggestion
const mapStateToProps = state => ({ const mapStateToProps = state => ({
results: state.getIn(['search', 'results']), results: state.getIn(['search', 'results']),
suggestions: state.getIn(['suggestions', 'items']), suggestions: state.getIn(['suggestions', 'items']),
submitted: state.getIn(['search', 'submitted']),
}); });
const mapDispatchToProps = dispatch => ({ const mapDispatchToProps = dispatch => ({

6
app/soapbox/reducers/search.js
View File

@ -1,6 +1,7 @@
import { import {
SEARCH_CHANGE, SEARCH_CHANGE,
SEARCH_CLEAR, SEARCH_CLEAR,
SEARCH_FETCH_REQUEST,
SEARCH_FETCH_SUCCESS, SEARCH_FETCH_SUCCESS,
SEARCH_SHOW, SEARCH_SHOW,
} from '../actions/search'; } from '../actions/search';
@ -38,6 +39,11 @@ export default function search(state = initialState, action) {
case COMPOSE_MENTION: case COMPOSE_MENTION:
case COMPOSE_DIRECT: case COMPOSE_DIRECT:
return state.set('hidden', true); return state.set('hidden', true);
case SEARCH_FETCH_REQUEST:
return state.withMutations(map => {
map.set('results', ImmutableMap());
map.set('submitted', true);
});
case SEARCH_FETCH_SUCCESS: case SEARCH_FETCH_SUCCESS:
return state.set('results', ImmutableMap({ return state.set('results', ImmutableMap({
accounts: ImmutableList(action.results.accounts.map(item => item.id)), accounts: ImmutableList(action.results.accounts.map(item => item.id)),