diff --git a/app/components/autocomplete/autocomplete_section_header.js b/app/components/autocomplete/autocomplete_section_header.js
index e469573c3..b15c7f482 100644
--- a/app/components/autocomplete/autocomplete_section_header.js
+++ b/app/components/autocomplete/autocomplete_section_header.js
@@ -3,7 +3,7 @@
 
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import {View} from 'react-native';
+import {ActivityIndicator, View} from 'react-native';
 
 import FormattedText from 'app/components/formatted_text';
 import {makeStyleSheetFromTheme, changeOpacity} from 'app/utils/theme';
@@ -12,11 +12,12 @@ export default class AutocompleteSectionHeader extends PureComponent {
     static propTypes = {
         defaultMessage: PropTypes.string.isRequired,
         id: PropTypes.string.isRequired,
+        loading: PropTypes.bool,
         theme: PropTypes.object.isRequired,
     };
 
     render() {
-        const {defaultMessage, id, theme} = this.props;
+        const {defaultMessage, id, loading, theme} = this.props;
         const style = getStyleFromTheme(theme);
 
         return (
@@ -27,6 +28,7 @@ export default class AutocompleteSectionHeader extends PureComponent {
                         defaultMessage={defaultMessage}
                         style={style.sectionText}
                     />
+                    {loading && <ActivityIndicator size='small'/>}
                 </View>
             </View>
         );
@@ -37,13 +39,17 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
     return {
         section: {
             justifyContent: 'center',
-            paddingLeft: 8,
+            paddingHorizontal: 8,
             backgroundColor: changeOpacity(theme.centerChannelColor, 0.1),
+            borderTopWidth: 1,
+            borderTopColor: changeOpacity(theme.centerChannelColor, 0.2),
+            flexDirection: 'row',
         },
         sectionText: {
             fontSize: 12,
             color: changeOpacity(theme.centerChannelColor, 0.7),
             paddingVertical: 7,
+            flex: 1,
         },
         sectionWrapper: {
             backgroundColor: theme.centerChannelBg,
diff --git a/app/components/autocomplete/channel_mention/channel_mention.js b/app/components/autocomplete/channel_mention/channel_mention.js
index c2ad660cd..36c628f6a 100644
--- a/app/components/autocomplete/channel_mention/channel_mention.js
+++ b/app/components/autocomplete/channel_mention/channel_mention.js
@@ -82,18 +82,14 @@ export default class ChannelMention extends PureComponent {
         }
 
         if (matchTerm !== this.props.matchTerm) {
-            // if the term changed and we haven't made the request do that first
             const {currentTeamId} = this.props;
             this.runSearch(currentTeamId, matchTerm);
-            return;
         }
 
-        if (requestStatus !== RequestStatus.STARTED &&
-            (myChannels !== this.props.myChannels || otherChannels !== this.props.otherChannels ||
-                privateChannels !== this.props.privateChannels || publicChannels !== this.props.publicChannels ||
-                directAndGroupMessages !== this.props.directAndGroupMessages ||
-                myMembers !== this.props.myMembers || deletedPublicChannels !== this.props.deletedPublicChannels)) {
-            // if the request is complete and the term is not null we show the autocomplete
+        if (matchTerm === '' || (myChannels !== this.props.myChannels || otherChannels !== this.props.otherChannels ||
+        privateChannels !== this.props.privateChannels || publicChannels !== this.props.publicChannels ||
+        directAndGroupMessages !== this.props.directAndGroupMessages ||
+        myMembers !== this.props.myMembers || deletedPublicChannels !== this.props.deletedPublicChannels)) {
             const sections = [];
             if (isSearch) {
                 if (publicChannels.length) {
@@ -102,6 +98,7 @@ export default class ChannelMention extends PureComponent {
                         defaultMessage: 'Public Channels',
                         data: publicChannels.filter((cId) => myMembers[cId]),
                         key: 'publicChannels',
+                        hideLoadingIndicator: true,
                     });
                 }
 
@@ -111,6 +108,7 @@ export default class ChannelMention extends PureComponent {
                         defaultMessage: 'Private Channels',
                         data: privateChannels,
                         key: 'privateChannels',
+                        hideLoadingIndicator: true,
                     });
                 }
 
@@ -129,10 +127,11 @@ export default class ChannelMention extends PureComponent {
                         defaultMessage: 'My Channels',
                         data: myChannels,
                         key: 'myChannels',
+                        hideLoadingIndicator: true,
                     });
                 }
 
-                if (otherChannels.length) {
+                if (otherChannels.length || requestStatus === RequestStatus.STARTED) {
                     sections.push({
                         id: t('suggestion.mention.morechannels'),
                         defaultMessage: 'Other Channels',
@@ -145,7 +144,6 @@ export default class ChannelMention extends PureComponent {
             this.setState({
                 sections,
             });
-
             this.props.onResultCountChange(sections.reduce((total, section) => total + section.data.length, 0));
         }
     }
@@ -191,6 +189,7 @@ export default class ChannelMention extends PureComponent {
             <AutocompleteSectionHeader
                 id={section.id}
                 defaultMessage={section.defaultMessage}
+                loading={!section.hideLoadingIndicator && this.props.requestStatus === RequestStatus.STARTED}
                 theme={this.props.theme}
             />
         );