From aa8b26b5caba740875b1645dc6920fe037d44bda Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Wed, 23 Jun 2021 14:44:10 +0800
Subject: [PATCH] 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.
---
 ui/component/wunderbarSuggestion/index.js  |  3 ++-
 ui/component/wunderbarSuggestion/view.jsx  | 13 ++++++++++++-
 ui/component/wunderbarSuggestions/view.jsx | 15 +++++++++++----
 3 files changed, 25 insertions(+), 6 deletions(-)

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 (
+      <ComboboxOption value={uri}>
+        <div className="wunderbar__suggestion">
+          <div className="media__thumb media__thumb--resolving" />
+        </div>
+      </ComboboxOption>
+    );
+  }
 
   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 && (
             <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">