Merge pull request #186 from lbryio/discover-resolve

display activity indicator for discover and trending items while resolving

app/src/component/fileItem/view.js

@@ -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,7 +56,11 @@ 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 &&

app/src/component/fileItemMedia/view.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Text, Image, View } from 'react-native';
+import { ActivityIndicator, Image, Text, View } from 'react-native';
+import Colors from '../../styles/colors';
 import fileItemMediaStyle from '../../styles/fileItemMedia';
 
 class FileItemMedia extends React.PureComponent {
@@ -28,7 +29,7 @@ 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')) {
@@ -46,11 +47,17 @@ class FileItemMedia extends React.PureComponent {
 
     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

@@ -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%',