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 && (