Wunderbar: immediate feedback to convey status

Make immediate GUI feedback to convey the current status, which can be the following:
- typing
- waiting lighthouse results
- waiting claim resolve
- no results or failed.
This commit is contained in:
infinite-persistence 2021-06-23 14:44:10 +08:00 committed by Thomas Zarebczan
parent 36ac9e038d
commit aa8b26b5ca
3 changed files with 25 additions and 6 deletions

View file

@ -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);

View file

@ -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 (
<ComboboxOption value={uri}>
<div className="wunderbar__suggestion">
<div className="media__thumb media__thumb--resolving" />
</div>
</ComboboxOption>
);
}
if (!claim) {
return null;

View file

@ -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 && (
<ComboboxPopover
portal={false}
className={classnames('wunderbar__suggestions', { 'wunderbar__suggestions--mobile': isMobile })}
@ -306,9 +310,12 @@ export default function WunderBarSuggestions(props: Props) {
{uriFromQueryIsValid && !noTopSuggestion ? <WunderbarTopSuggestion query={nameFromQuery} /> : null}
<div className="wunderbar__label">{__('Search Results')}</div>
{results.slice(0, term.length < LIGHTHOUSE_MIN_CHARACTERS ? 0 : isMobile ? 20 : 5).map((uri) => (
<WunderbarSuggestion key={uri} uri={uri} />
))}
{showPlaceholder && term.length > LIGHTHOUSE_MIN_CHARACTERS ? <Spinner type="small" /> : null}
{!showPlaceholder && results
? results.slice(0, isMobile ? 20 : 5).map((uri) => <WunderbarSuggestion key={uri} uri={uri} />)
: null}
{!noBottomLinks && (
<div className="wunderbar__bottom-links">