Merge pull request #186 from lbryio/discover-resolve

display activity indicator for discover and trending items while resolving

app/src/component/fileItem/view.js

@@ -23,7 +23,7 @@ class FileItem extends React.PureComponent {
 
   resolve(props) {
     const { isResolvingUri, resolveUri, claim, uri } = props;
-    
+
     if (!isResolvingUri && claim === undefined && uri) {
       resolveUri(uri);
     }
@@ -47,15 +47,6 @@ class FileItem extends React.PureComponent {
     const isRewardContent = claim && rewardedContentClaimIds.includes(claim.claim_id);
     const channelName = claim ? claim.channel_name : null;
 
-    let description = '';
-    if (isResolvingUri && !claim) {
-      description = 'Loading...';
-    } else if (metadata && metadata.description) {
-      description = metadata.description;
-    } else if (claim === null) {
-      description = 'This address contains no content.';
-    }
-
     return (
       <View style={style}>
         <TouchableOpacity style={discoverStyle.container} onPress={() => {
@@ -65,12 +56,16 @@ class FileItem extends React.PureComponent {
               navigation.navigate({ routeName: 'File', key: uri, params: { uri } });
             }
           }>
-          <FileItemMedia title={title} thumbnail={thumbnail} blurRadius={obscureNsfw ? 15 : 0} resizeMode="cover" />
+          <FileItemMedia title={title}
+                         thumbnail={thumbnail}
+                         blurRadius={obscureNsfw ? 15 : 0}
+                         resizeMode="cover"
+                         isResolvingUri={isResolvingUri} />
           <FilePrice uri={uri} style={discoverStyle.filePriceContainer} textStyle={discoverStyle.filePriceText} />
           <Text style={discoverStyle.fileItemName}>{title}</Text>
           {channelName &&
             <Link style={discoverStyle.channelName} text={channelName} onPress={() => {
-              const channelUri = normalizeURI(channelName); 
+              const channelUri = normalizeURI(channelName);
               navigation.navigate({ routeName: 'File', key: channelUri, params: { uri: channelUri }});
             }} />}
         </TouchableOpacity>

app/src/component/fileItemMedia/view.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Text, Image, View } from 'react-native';
-import fileItemMediaStyle from '../../styles/fileItemMedia'; 
+import { ActivityIndicator, Image, Text, View } from 'react-native';
+import Colors from '../../styles/colors';
+import fileItemMediaStyle from '../../styles/fileItemMedia';
 
 class FileItemMedia extends React.PureComponent {
   static AUTO_THUMB_STYLES = [
@@ -28,14 +29,14 @@ class FileItemMedia extends React.PureComponent {
 
   render() {
     let style = this.props.style;
-    const { title, thumbnail, blurRadius, resizeMode } = this.props;
+    const { blurRadius, isResolvingUri, thumbnail, title, resizeMode } = this.props;
     const atStyle = this.state.autoThumbStyle;
 
     if (thumbnail && ((typeof thumbnail) === 'string')) {
       if (style == null) {
         style = fileItemMediaStyle.thumbnail;
       }
-      
+
       return (
         <Image source={{uri: thumbnail}}
                blurRadius={blurRadius}
@@ -43,14 +44,20 @@ class FileItemMedia extends React.PureComponent {
                style={style} />
       );
     }
-        
+
     return (
       <View style={[style ? style : fileItemMediaStyle.autothumb, atStyle]}>
-        <Text style={fileItemMediaStyle.autothumbText}>{title &&
+        {isResolvingUri && (
+          <View style={fileItemMediaStyle.resolving}>
+            <ActivityIndicator color={Colors.White} size={"large"} />
+            <Text style={fileItemMediaStyle.text}>Resolving...</Text>
+          </View>
+        )}
+        {!isResolvingUri && <Text style={fileItemMediaStyle.autothumbText}>{title &&
             title
               .replace(/\s+/g, '')
               .substring(0, Math.min(title.replace(' ', '').length, 5))
-              .toUpperCase()}</Text>
+              .toUpperCase()}</Text>}
       </View>
     );
   }

app/src/styles/fileItemMedia.js

@@ -1,6 +1,6 @@
 import { StyleSheet, Dimensions } from 'react-native';
 
-const screenDimension = Dimensions.get('window'); 
+const screenDimension = Dimensions.get('window');
 const width = screenDimension.width - 48; // screen width minus combined left and right margins
 
 const fileItemMediaStyle = StyleSheet.create({
@@ -49,6 +49,17 @@ const fileItemMediaStyle = StyleSheet.create({
   autothumbOrange: {
     backgroundColor: '#ffa726'
   },
+  resolving: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center'
+  },
+  text: {
+    color: '#ffffff',
+    fontFamily: 'Metropolis-Regular',
+    fontSize: 16,
+    marginTop: 8
+  },
   thumbnail: {
     flex: 1,
     width: '100%',