diff --git a/app/soapbox/features/aliases/index.js b/app/soapbox/features/aliases/index.js index d094c116d..b2653ca6f 100644 --- a/app/soapbox/features/aliases/index.js +++ b/app/soapbox/features/aliases/index.js @@ -22,6 +22,7 @@ const messages = defineMessages({ const mapStateToProps = state => ({ aliases: state.getIn(['meta', 'pleroma', 'also_known_as']), searchAccountIds: state.getIn(['aliases', 'suggestions', 'items']), + loaded: state.getIn(['aliases', 'suggestions', 'loaded']), }); export default @connect(mapStateToProps) @@ -34,7 +35,7 @@ class Aliases extends ImmutablePureComponent { } render() { - const { intl, aliases, searchAccountIds } = this.props; + const { intl, aliases, searchAccountIds, loaded } = this.props; const emptyMessage = ; @@ -42,9 +43,17 @@ class Aliases extends ImmutablePureComponent { -
- {searchAccountIds.map(accountId => )} -
+ { + loaded && searchAccountIds.size === 0 ? ( +
+ +
+ ) : ( +
+ {searchAccountIds.map(accountId => )} +
+ ) + }
item.id))); + return state + .setIn(['suggestions', 'items'], ImmutableList(action.accounts.map(item => item.id))) + .setIn(['suggestions', 'loaded'], true); case ALIASES_SUGGESTIONS_CLEAR: return state.update('suggestions', suggestions => suggestions.withMutations(map => { map.set('items', ImmutableList()); map.set('value', ''); + map.set('loaded', false); })); default: return state; diff --git a/app/styles/components/aliases.scss b/app/styles/components/aliases.scss index 85145488a..a9888a85b 100644 --- a/app/styles/components/aliases.scss +++ b/app/styles/components/aliases.scss @@ -11,6 +11,11 @@ .account__avatar { cursor: default; } + + &.empty-column-indicator { + min-height: unset; + overflow-y: unset; + } } &_search {