diff --git a/web/settings/relationship/user-list.css b/web/settings/relationship/user-list.css --- a/web/settings/relationship/user-list.css +++ b/web/settings/relationship/user-list.css @@ -29,3 +29,9 @@ row-gap: 8px; height: 625px; } + +.emptyList { + text-align: center; + margin-top: 8px; + color: var(--text-background-tertiary-default); +} diff --git a/web/settings/relationship/user-list.react.js b/web/settings/relationship/user-list.react.js --- a/web/settings/relationship/user-list.react.js +++ b/web/settings/relationship/user-list.react.js @@ -62,6 +62,14 @@ const usersWithENSNames = useENSNames(users); const userRows = React.useMemo(() => { + if (usersWithENSNames.length === 0 && searchText.length > 0) { + return ( +
+ No results. Please try searching a different username. +
+ ); + } + const UserRow = userRowComponent; return usersWithENSNames.map(user => ( )); - }, [userRowComponent, usersWithENSNames, onMenuVisibilityChange]); + }, [ + usersWithENSNames, + searchText.length, + userRowComponent, + onMenuVisibilityChange, + ]); const containerClasses = classNames(css.userListContainer, { [css.noScroll]: isMenuVisible,