add placeholder for top wunderbar suggestion

ui/component/wunderbarTopSuggestion/index.js

@@ -1,13 +1,27 @@
 import { connect } from 'react-redux';
-import { doResolveUris, makeSelectClaimForUri } from 'lbry-redux';
+import { doResolveUris, makeSelectClaimForUri, makeSelectIsUriResolving, parseURI } from 'lbry-redux';
 import { makeSelectWinningUriForQuery } from 'redux/selectors/search';
 import WunderbarTopSuggestion from './view';
 
 const select = (state, props) => {
+  const uriFromQuery = `lbry://${props.query}`;
+
+  let uris = [uriFromQuery];
+  let channelUriFromQuery;
+  try {
+    const { isChannel } = parseURI(uriFromQuery);
+
+    if (!isChannel) {
+      channelUriFromQuery = `lbry://@${props.query}`;
+      uris.push(channelUriFromQuery);
+    }
+  } catch (e) {}
+
+  const resolvingUris = uris.some(uri => makeSelectIsUriResolving(uri)(state));
   const winningUri = makeSelectWinningUriForQuery(props.query)(state);
   const winningClaim = winningUri ? makeSelectClaimForUri(winningUri)(state) : undefined;
 
-  return { winningUri, winningClaim };
+  return { resolvingUris, winningUri, winningClaim, uris };
 };
 
 export default connect(select, {

ui/component/wunderbarTopSuggestion/view.jsx

@@ -3,42 +3,42 @@ import React from 'react';
 import LbcSymbol from 'component/common/lbc-symbol';
 import WunderbarSuggestion from 'component/wunderbarSuggestion';
 import { ComboboxOption } from '@reach/combobox';
-import { parseURI } from 'lbry-redux';
 
 type Props = {
   query: string,
   winningUri: ?string,
   doResolveUris: (Array<string>) => void,
+  uris: Array<string>,
+  resolvingUris: boolean,
 };
 
-export default function WunderbarTopClaim(props: Props) {
-  const { query, winningUri, doResolveUris } = props;
-
-  const uriFromQuery = `lbry://${query}`;
-
-  let channelUriFromQuery;
-  try {
-    const { isChannel } = parseURI(uriFromQuery);
-
-    if (!isChannel) {
-      channelUriFromQuery = `lbry://@${query}`;
-    }
-  } catch (e) {}
+export default function WunderbarTopSuggestion(props: Props) {
+  const { query, uris, resolvingUris, winningUri, doResolveUris } = props;
 
+  const stringifiedUris = JSON.stringify(uris);
   React.useEffect(() => {
-    let urisToResolve = [];
-    if (uriFromQuery) {
-      urisToResolve.push(uriFromQuery);
-    }
+    if (stringifiedUris) {
+      const arrayUris = JSON.parse(stringifiedUris);
 
-    if (channelUriFromQuery) {
-      urisToResolve.push(channelUriFromQuery);
+      if (arrayUris.length > 0) {
+        doResolveUris(arrayUris);
+      }
     }
+  }, [doResolveUris, stringifiedUris]);
 
-    if (urisToResolve.length > 0) {
-      doResolveUris(urisToResolve);
-    }
-  }, [doResolveUris, uriFromQuery, channelUriFromQuery]);
+  if (resolvingUris) {
+    return (
+      <div className="wunderbar__winning-claim">
+        <div className="wunderbar__label wunderbar__placeholder-label" />
+
+        <div className="wunderbar__suggestion wunderbar__placeholder-suggestion">
+          <div className="wunderbar__placeholder-thumbnail" />
+          <div className="wunderbar__placeholder-info" />
+        </div>
+        <hr className="wunderbar__top-separator" />
+      </div>
+    );
+  }
 
   if (!winningUri) {
     return null;

ui/scss/component/_wunderbar.scss

@@ -163,7 +163,34 @@
   margin-top: var(--spacing-xs);
 }
 
+.wunderbar__placeholder-suggestion {
+  padding: var(--spacing-xs);
+}
+
+.wunderbar__placeholder-label {
+  width: 30%;
+  height: 1rem;
+  margin-left: var(--spacing-xs);
+  margin-bottom: var(--spacing-m);
+  margin-top: var(--spacing-xs);
+  @include placeholder;
+}
+
+.wunderbar__placeholder-thumbnail {
+  width: 3rem;
+  height: 3rem;
+
+  @include placeholder;
+}
+.wunderbar__placeholder-info {
+  width: 50%;
+  height: 3rem;
+  margin-left: var(--spacing-s);
+  @include placeholder;
+}
+
 [data-reach-combobox-option] {
+  padding: var(--spacing-xs);
   border-radius: var(--border-radius);
 
   &:hover {
@@ -180,7 +207,3 @@
     background-color: var(--color-menu-background--active);
   }
 }
-
-[data-reach-combobox-option] {
-  padding: var(--spacing-xs);
-}