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:
parent
36ac9e038d
commit
aa8b26b5ca
3 changed files with 25 additions and 6 deletions
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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">
|
||||
|
|
Loading…
Reference in a new issue