Fix file card stream loading text

ui/js/component/fileCardStream/index.js

@@ -17,6 +17,9 @@ import {
 import {
   makeSelectFileInfoForUri,
 } from 'selectors/file_info'
+import {
+  makeSelectResolvingUri,
+} from 'selectors/content'
 import FileCardStream from './view'
 
 const makeSelect = () => {
@@ -24,6 +27,8 @@ const makeSelect = () => {
   const selectFileInfoForUri = makeSelectFileInfoForUri()
   const selectMetadataForUri = makeSelectMetadataForUri()
   const selectSourceForUri = makeSelectSourceForUri()
+  const selectResolvingUri = makeSelectResolvingUri()
+
   const select = (state, props) => ({
     claim: selectClaimForUri(state, props),
     fileInfo: selectFileInfoForUri(state, props),
@@ -32,6 +37,7 @@ const makeSelect = () => {
     hasSignature: false,
     metadata: selectMetadataForUri(state, props),
     source: selectSourceForUri(state, props),
+    isResolvingUri: selectResolvingUri(state, props),
   })
 
   return select

ui/js/component/fileCardStream/view.jsx

@@ -56,24 +56,36 @@ class FileCardStream extends React.Component {
       return null;
     }
 
-    // if (!this.props.metadata) {
-    //   return null
-    // }
+    const {
+      metadata,
+      isResolvingUri,
+      navigate,
+      hidePrice,
+      claim,
+    } = this.props
 
     const uri = lbryuri.normalize(this.props.uri);
-    const metadata = this.props.metadata;
     const isConfirmed = !!metadata;
     const title = isConfirmed ? metadata.title : uri;
     const obscureNsfw = this.props.obscureNsfw && isConfirmed && metadata.nsfw;
     const primaryUrl = 'show=' + uri;
+    let description = ""
+    if (isConfirmed) {
+      description = metadata.description
+    } else if (isResolvingUri) {
+      description = "Loading..."
+    } else {
+      description = <span className="empty">This file is pending confirmation</span>
+    }
+
     return (
       <section className={ 'card card--small card--link ' + (obscureNsfw ? 'card--obscured ' : '') } onMouseEnter={this.handleMouseOver.bind(this)} onMouseLeave={this.handleMouseOut.bind(this)}>
         <div className="card__inner">
-          <a href="#" onClick={() => this.props.navigate(primaryUrl)} className="card__link">
+          <a href="#" onClick={() => navigate(primaryUrl)} className="card__link">
             <div className="card__title-identity">
               <h5 title={title}><TruncatedText lines={1}>{title}</TruncatedText></h5>
               <div className="card__subtitle">
-                { !this.props.hidePrice ? <span style={{float: "right"}}><FilePrice uri={lbryuri.normalize(this.props.uri)} /></span>  : null}
+                { !hidePrice ? <span style={{float: "right"}}><FilePrice uri={uri} /></span>  : null}
                 <UriIndicator uri={uri} metadata={metadata} contentType={this.props.contentType}
                               hasSignature={this.props.hasSignature} signatureIsValid={this.props.signatureIsValid} />
               </div>
@@ -82,11 +94,7 @@ class FileCardStream extends React.Component {
             <div className="card__media" style={{ backgroundImage: "url('" + metadata.thumbnail + "')" }}></div>
             }
             <div className="card__content card__subtext card__subtext--two-lines">
-                <TruncatedText lines={2}>
-                  {isConfirmed
-                    ? metadata.description
-                    : <span className="empty">This file is pending confirmation.</span>}
-                </TruncatedText>
+                <TruncatedText lines={2}>{description}</TruncatedText>
             </div>
           </a>
           {this.state.showNsfwHelp && this.state.hovered

ui/js/component/fileTileStream/index.js

@@ -20,6 +20,9 @@ import {
 import {
   selectObscureNsfw,
 } from 'selectors/app'
+import {
+  makeSelectResolvingUri,
+} from 'selectors/content'
 import FileTileStream from './view'
 
 const makeSelect = () => {
@@ -29,6 +32,7 @@ const makeSelect = () => {
   const selectAvailabilityForUri = makeSelectAvailabilityForUri()
   const selectMetadataForUri = makeSelectMetadataForUri()
   const selectSourceForUri = makeSelectSourceForUri()
+  const selectResolvingUri = makeSelectResolvingUri()
 
   const select = (state, props) => ({
     claim: selectClaimForUri(state, props),
@@ -38,6 +42,7 @@ const makeSelect = () => {
     obscureNsfw: selectObscureNsfw(state),
     metadata: selectMetadataForUri(state, props),
     source: selectSourceForUri(state, props),
+    resolvingUri: selectResolvingUri(state, props),
   })
 
   return select

ui/js/page/discover/view.jsx

@@ -18,7 +18,7 @@ const FeaturedCategory = (props) => {
     <h3 className="card-row__header">{category}
     {category && category.match(/^community/i) && <ToolTip label="What's this?" body={communityCategoryToolTipText} className="tooltip--header" />}
     </h3>
-    {names && names.map(name => <FileTile key={name} displayStyle="card" uri={name} />)}
+    {names && names.map(name => <FileTile key={name} displayStyle="card" uri={lbryuri.normalize(name)} />)}
   </div>
 }
 

ui/js/selectors/content.js

@@ -96,3 +96,19 @@ export const shouldFetchPublishedContent = createSelector(
     return true
   }
 )
+
+export const selectResolvingUris = createSelector(
+  _selectState,
+  (state) => state.resolvingUris || []
+)
+
+const selectResolvingUri = (state, props) => {
+  return selectResolvingUris(state).indexOf(props.uri) != -1
+}
+
+export const makeSelectResolvingUri = () => {
+  return createSelector(
+    selectResolvingUri,
+    (resolving) => resolving
+  )
+}