winning claim style pass

ui/component/commentsList/view.jsx

@@ -211,7 +211,9 @@ function CommentList(props: Props) {
         <>
           <CommentCreate uri={uri} />
 
-          {!isFetchingComments && hasNoComments && <Empty text={__('That was pretty deep. What do you think?')} />}
+          {!isFetchingComments && hasNoComments && (
+            <Empty padded text={__('That was pretty deep. What do you think?')} />
+          )}
 
           <ul className="comments" ref={commentRef}>
             {comments &&

ui/component/common/empty.jsx

@@ -1,20 +1,17 @@
 // @flow
 import React from 'react';
+import classnames from 'classnames';
 
 type Props = {
   text: ?string,
+  padded?: boolean,
 };
 
-class Empty extends React.PureComponent<Props> {
-  static defaultProps = {
-    text: '',
-  };
-
-  render() {
-    const { text } = this.props;
+export default function Empty(props: Props) {
+  const { text = '', padded = false } = props;
 
   return (
-      <div className="empty__wrap">
+    <div className={classnames('empty__wrap', { 'empty__wrap--padded': padded })}>
       <div>
         {text && (
           <div className="empty__content">
@@ -24,7 +21,4 @@ class Empty extends React.PureComponent<Props> {
       </div>
     </div>
   );
-  }
 }
-
-export default Empty;

ui/component/searchTopClaim/index.js

@@ -1,14 +1,20 @@
 import { connect } from 'react-redux';
-import { doResolveUris, doClearPublish, doPrepareEdit, selectPendingIds } from 'lbry-redux';
-import { makeSelectWinningUriForQuery } from 'redux/selectors/search';
+import { doResolveUris, doClearPublish, doPrepareEdit, selectPendingIds, makeSelectClaimForUri } from 'lbry-redux';
+import { makeSelectWinningUriForQuery, makeSelectIsResolvingWinningUri } from 'redux/selectors/search';
 import SearchTopClaim from './view';
 import { push } from 'connected-react-router';
 import * as PAGES from 'constants/pages';
 
-const select = (state, props) => ({
-  winningUri: makeSelectWinningUriForQuery(props.query)(state),
+const select = (state, props) => {
+  const winningUri = makeSelectWinningUriForQuery(props.query)(state);
+
+  return {
+    winningUri,
+    winningClaim: winningUri ? makeSelectClaimForUri(winningUri)(state) : undefined,
+    isResolvingWinningUri: props.query ? makeSelectIsResolvingWinningUri(props.query)(state) : false,
     pendingIds: selectPendingIds(state),
-});
+  };
+};
 
 const perform = dispatch => ({
   beginPublish: name => {

ui/component/searchTopClaim/view.jsx

@@ -10,20 +10,30 @@ import I18nMessage from 'component/i18nMessage';
 import { useHistory } from 'react-router';
 import LbcSymbol from 'component/common/lbc-symbol';
 import { DOMAIN } from 'config';
-import Yrbl from 'component/yrbl';
 
 type Props = {
   query: string,
-  winningUri: ?Claim,
+  winningUri: ?string,
   doResolveUris: (Array<string>) => void,
   hideLink?: boolean,
   setChannelActive: boolean => void,
   beginPublish: string => void,
   pendingIds: Array<string>,
+  isResolvingWinningUri: boolean,
+  winningClaim: ?Claim,
 };
 
 export default function SearchTopClaim(props: Props) {
-  const { doResolveUris, query = '', winningUri, hideLink = false, setChannelActive, beginPublish } = props;
+  const {
+    doResolveUris,
+    query = '',
+    winningUri,
+    winningClaim,
+    hideLink = false,
+    setChannelActive,
+    beginPublish,
+    isResolvingWinningUri,
+  } = props;
   const uriFromQuery = `lbry://${query}`;
   const { push } = useHistory();
   let name;
@@ -60,9 +70,12 @@ export default function SearchTopClaim(props: Props) {
     }
   }, [doResolveUris, uriFromQuery, channelUriFromQuery]);
 
+  if (winningUri && !winningClaim && isResolvingWinningUri) {
+    return null;
+  }
+
   return (
-    <section className="search">
-      <header className="search__header">
+    <div className="search__header">
       {winningUri && (
         <div className="claim-preview__actions--header">
           <a
@@ -70,13 +83,7 @@ export default function SearchTopClaim(props: Props) {
             href="https://lbry.com/faq/trending"
             title={__('Learn more about LBRY Credits on %DOMAIN%', { DOMAIN })}
           >
-              <I18nMessage
-                tokens={{
-                  lbc: <LbcSymbol />,
-                }}
-              >
-                Most supported %lbc%
-              </I18nMessage>
+            <LbcSymbol prefix={__('Most supported')} />
           </a>
         </div>
       )}
@@ -86,7 +93,6 @@ export default function SearchTopClaim(props: Props) {
             hideRepostLabel
             uri={winningUri}
             type="large"
-              placeholder="publish"
             properties={claim => (
               <span className="claim-preview__custom-properties">
                 <ClaimEffectiveAmount uri={winningUri} />
@@ -96,29 +102,21 @@ export default function SearchTopClaim(props: Props) {
         </div>
       )}
       {!winningUri && uriFromQuery && (
-          <div className="empty empty--centered">
-            <Yrbl
-              type="happy"
-              title={__('Whoa!')}
-              small
-              subtitle={
+        <div className="card card--section help--inline">
           <I18nMessage
             tokens={{
               repost: (
-                      <Button
-                        button="link"
-                        onClick={() => push(`/$/${PAGES.REPOST_NEW}?to=${name}`)}
-                        label={__('Repost')}
-                      />
+                <Button button="link" onClick={() => push(`/$/${PAGES.REPOST_NEW}?to=${name}`)} label={__('Repost')} />
+              ),
+              publish: (
+                <span>
+                  <Button button="link" onClick={() => beginPublish(name)} label={'publish'} />
+                </span>
               ),
-                    publish: <Button button="link" onClick={() => beginPublish(name)} label={'publish'} />,
-                    name: <strong>name</strong>,
             }}
           >
             You have found the edge of the internet. %repost% or %publish% your stuff here to claim this spot.
           </I18nMessage>
-              }
-            />
         </div>
       )}
       {!hideLink && winningUri && (
@@ -135,7 +133,6 @@ export default function SearchTopClaim(props: Props) {
           />
         </div>
       )}
-      </header>
-    </section>
+    </div>
   );
 }

ui/component/yrbl/index.jsx

@@ -11,7 +11,6 @@ type Props = {
   className?: string,
   actions?: Node,
   alwaysShow?: boolean,
-  small: boolean,
 };
 
 const yrblTypes = {
@@ -25,7 +24,7 @@ export default class extends React.PureComponent<Props> {
   };
 
   render() {
-    const { title, subtitle, type, className, actions, small, alwaysShow = false } = this.props;
+    const { title, subtitle, type, className, actions, alwaysShow = false } = this.props;
 
     const image = yrblTypes[type];
 
@@ -33,7 +32,7 @@ export default class extends React.PureComponent<Props> {
       <div className="yrbl__wrap">
         <img
           alt="Friendly gerbil"
-          className={classnames(small ? 'yrbl--small' : 'yrbl', className, {
+          className={classnames('yrbl', className, {
             'yrbl--always-show': alwaysShow,
           })}
           src={`${image}`}

ui/redux/selectors/search.js

@@ -9,6 +9,7 @@ import {
   SETTINGS,
   isClaimNsfw,
   makeSelectPendingClaimForUri,
+  makeSelectIsUriResolving,
 } from 'lbry-redux';
 import { createSelector } from 'reselect';
 
@@ -143,3 +144,22 @@ export const makeSelectWinningUriForQuery = (query: string) => {
     }
   );
 };
+
+export const makeSelectIsResolvingWinningUri = (query: string = '') => {
+  const uriFromQuery = `lbry://${query}`;
+  let channelUriFromQuery;
+  try {
+    const { isChannel } = parseURI(uriFromQuery);
+    if (!isChannel) {
+      channelUriFromQuery = `lbry://@${query}`;
+    }
+  } catch (e) {}
+
+  return createSelector(
+    makeSelectIsUriResolving(uriFromQuery),
+    channelUriFromQuery ? makeSelectIsUriResolving(channelUriFromQuery) : () => {},
+    (claim1IsResolving, claim2IsResolving) => {
+      return claim1IsResolving || claim2IsResolving;
+    }
+  );
+};

ui/scss/component/_empty.scss

@@ -11,6 +11,10 @@
   }
 }
 
+.empty__wrap--padded {
+  padding: var(--spacing-xl) 0;
+}
+
 .empty__text {
   color: var(--color-text-empty);
   font-style: italic;

ui/scss/component/_media.scss

@@ -30,32 +30,6 @@
     max-width: 100%;
     white-space: nowrap;
   }
-
-  // This is terrible and should not be removed
-  .icon {
-    margin-right: var(--spacing-xs) / 2;
-    margin-bottom: -0.08rem;
-  }
-}
-
-.media__uri--inline {
-  @extend .media__uri;
-  position: relative;
-  transform: none;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.media__uri--right {
-  @extend .media__uri;
-  right: 0;
-}
-
-.media__uri--right--yt-badge {
-  @extend .media__uri--right;
-  @media (max-width: $breakpoint-small) {
-    display: none;
-  }
 }
 
 //  M E D I A