From 8a0fa1b2850cb8fb8197a262204544fec7f5cdbf Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 21 Mar 2021 16:09:50 -0500
Subject: [PATCH] Display loading animation during search

---
 .../compose/components/search_results.js      | 24 +++++--------------
 .../containers/search_results_container.js    |  1 +
 app/soapbox/reducers/search.js                |  6 +++++
 3 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/app/soapbox/features/compose/components/search_results.js b/app/soapbox/features/compose/components/search_results.js
index ca0d56b11..c7838f96a 100644
--- a/app/soapbox/features/compose/components/search_results.js
+++ b/app/soapbox/features/compose/components/search_results.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import AccountContainer from '../../../containers/account_container';
@@ -8,35 +7,24 @@ import StatusContainer from '../../../containers/status_container';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import Hashtag from '../../../components/hashtag';
 import Icon from 'soapbox/components/icon';
-import WhoToFollowPanel from '../../ui/components/who_to_follow_panel';
-import { getFeatures } from 'soapbox/utils/features';
+import LoadingIndicator from 'soapbox/components/loading_indicator';
 
-const mapStateToProps = state => ({
-  features: getFeatures(state.get('instance')),
-});
-
-export default @connect(mapStateToProps)
-@injectIntl
+export default @injectIntl
 class SearchResults extends ImmutablePureComponent {
 
   static propTypes = {
     results: ImmutablePropTypes.map.isRequired,
-    features: PropTypes.object,
+    submitted: PropTypes.bool,
     intl: PropTypes.object.isRequired,
   };
 
-  state = {
-    isSmallScreen: (window.innerWidth <= 895),
-  }
-
   render() {
-    const { results, features } = this.props;
-    const { isSmallScreen } = this.state;
+    const { results, submitted } = this.props;
 
-    if (results.isEmpty() && isSmallScreen) {
+    if (submitted && results.isEmpty()) {
       return (
         <div className='search-results'>
-          {features.suggestions && <WhoToFollowPanel />}
+          <LoadingIndicator />
         </div>
       );
     }
diff --git a/app/soapbox/features/compose/containers/search_results_container.js b/app/soapbox/features/compose/containers/search_results_container.js
index f9637861a..046e374ac 100644
--- a/app/soapbox/features/compose/containers/search_results_container.js
+++ b/app/soapbox/features/compose/containers/search_results_container.js
@@ -5,6 +5,7 @@ import { fetchSuggestions, dismissSuggestion } from '../../../actions/suggestion
 const mapStateToProps = state => ({
   results: state.getIn(['search', 'results']),
   suggestions: state.getIn(['suggestions', 'items']),
+  submitted: state.getIn(['search', 'submitted']),
 });
 
 const mapDispatchToProps = dispatch => ({
diff --git a/app/soapbox/reducers/search.js b/app/soapbox/reducers/search.js
index ec3191def..4a0a729a1 100644
--- a/app/soapbox/reducers/search.js
+++ b/app/soapbox/reducers/search.js
@@ -1,6 +1,7 @@
 import {
   SEARCH_CHANGE,
   SEARCH_CLEAR,
+  SEARCH_FETCH_REQUEST,
   SEARCH_FETCH_SUCCESS,
   SEARCH_SHOW,
 } from '../actions/search';
@@ -38,6 +39,11 @@ export default function search(state = initialState, action) {
   case COMPOSE_MENTION:
   case COMPOSE_DIRECT:
     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:
     return state.set('results', ImmutableMap({
       accounts: ImmutableList(action.results.accounts.map(item => item.id)),