diff --git a/ui/component/wunderbarSuggestion/index.js b/ui/component/wunderbarSuggestion/index.js
index f9bc1274c..10da10419 100644
--- a/ui/component/wunderbarSuggestion/index.js
+++ b/ui/component/wunderbarSuggestion/index.js
@@ -1,9 +1,10 @@
import { connect } from 'react-redux';
-import { makeSelectClaimForUri } from 'lbry-redux';
+import { makeSelectClaimForUri, makeSelectIsUriResolving } from 'lbry-redux';
import WunderbarSuggestion from './view';
const select = (state, props) => ({
claim: makeSelectClaimForUri(props.uri)(state),
+ isResolvingUri: makeSelectIsUriResolving(props.uri)(state),
});
export default connect(select)(WunderbarSuggestion);
diff --git a/ui/component/wunderbarSuggestion/view.jsx b/ui/component/wunderbarSuggestion/view.jsx
index 4752637cb..abe6287cb 100644
--- a/ui/component/wunderbarSuggestion/view.jsx
+++ b/ui/component/wunderbarSuggestion/view.jsx
@@ -10,10 +10,21 @@ import ClaimProperties from 'component/claimProperties';
type Props = {
claim: ?Claim,
uri: string,
+ isResolvingUri: boolean,
};
export default function WunderbarSuggestion(props: Props) {
- const { claim, uri } = props;
+ const { claim, uri, isResolvingUri } = props;
+
+ if (isResolvingUri) {
+ return (
+
+
+
+ );
+ }
if (!claim) {
return null;
diff --git a/ui/component/wunderbarSuggestions/view.jsx b/ui/component/wunderbarSuggestions/view.jsx
index 9a167d553..61a92d6b6 100644
--- a/ui/component/wunderbarSuggestions/view.jsx
+++ b/ui/component/wunderbarSuggestions/view.jsx
@@ -18,6 +18,7 @@ import { useHistory } from 'react-router';
import { formatLbryUrlForWeb } from 'util/url';
import Yrbl from 'component/yrbl';
import { SEARCH_OPTIONS } from 'constants/search';
+import Spinner from 'component/spinner';
const LBRY_PROTOCOL = 'lbry://';
const WEB_DEV_PREFIX = `${URL_DEV}/`;
@@ -95,6 +96,9 @@ export default function WunderBarSuggestions(props: Props) {
topUrisToTest.push(uriFromQuery);
}
+ const isTyping = debouncedTerm !== term;
+ const showPlaceholder = isTyping || loading;
+
function handleSelect(value) {
if (!value) {
return;
@@ -297,7 +301,7 @@ export default function WunderBarSuggestions(props: Props) {
value={term}
/>
- {isFocused && results && results.length > 0 && (
+ {isFocused && (
: null}
{__('Search Results')}
- {results.slice(0, term.length < LIGHTHOUSE_MIN_CHARACTERS ? 0 : isMobile ? 20 : 5).map((uri) => (
-
- ))}
+
+ {showPlaceholder && term.length > LIGHTHOUSE_MIN_CHARACTERS ? : null}
+
+ {!showPlaceholder && results
+ ? results.slice(0, isMobile ? 20 : 5).map((uri) => )
+ : null}
{!noBottomLinks && (