add empty view to CustomAlgorithms screen

2 files changed, 43 insertions, 34 deletions

diff --git a/src/view/com/algos/AlgoItem.tsx b/src/view/com/algos/AlgoItem.tsx
index 987bfd68d..e475624c5 100644
--- a/src/view/com/algos/AlgoItem.tsx
+++ b/src/view/com/algos/AlgoItem.tsx
@@ -11,6 +11,7 @@ import {AlgoItemModel} from 'state/models/feeds/algo/algo-item'
 const AlgoItem = observer(
   ({item, style}: {item: AlgoItemModel; style?: StyleProp<ViewStyle>}) => {
     const pal = usePalette('default')
+
     return (
       <View style={[styles.container, style]} key={item.data.uri}>
         <View style={[styles.headerContainer]}>
@@ -19,7 +20,7 @@ const AlgoItem = observer(
           </View>
           <View style={[styles.headerTextContainer]}>
             <Text style={[pal.text, s.bold]}>
-              {item.data.displayName ?? 'Feed name'}
+              {item.data.displayName ? item.data.displayName : 'Feed name'}
             </Text>
             <Text style={[pal.textLight, styles.description]}>
               {item.data.description ??
diff --git a/src/view/screens/CustomAlgorithms.tsx b/src/view/screens/CustomAlgorithms.tsx
index 05951f98e..b838660df 100644
--- a/src/view/screens/CustomAlgorithms.tsx
+++ b/src/view/screens/CustomAlgorithms.tsx
@@ -44,45 +44,46 @@ const CustomAlgorithms = withAuthRequired(
     )
 
     return (
-      <CenteredView style={{flex: 1}}>
+      <CenteredView style={[s.flex1]}>
         <ViewHeader title="Custom Algorithms" showOnDesktop />
-        {!savedFeeds.hasContent || savedFeeds.isEmpty ? (
-          <View style={[pal.border, !isDesktopWeb && s.flex1]}>
-            <View style={[pal.viewLight]}>
+        <FlatList
+          style={[!isDesktopWeb && s.flex1]}
+          data={savedFeeds.feeds}
+          keyExtractor={item => item.data.uri}
+          refreshControl={
+            <RefreshControl
+              refreshing={savedFeeds.isRefreshing}
+              onRefresh={() => savedFeeds.refresh()}
+              tintColor={pal.colors.text}
+              titleColor={pal.colors.text}
+            />
+          }
+          onEndReached={() => savedFeeds.loadMore()}
+          renderItem={({item}) => <AlgoItem key={item.data.uri} item={item} />}
+          initialNumToRender={15}
+          ListFooterComponent={() => (
+            <View style={styles.footer}>
+              {savedFeeds.isLoading && <ActivityIndicator />}
+            </View>
+          )}
+          ListEmptyComponent={() => (
+            <View
+              style={[
+                pal.border,
+                !isDesktopWeb && s.flex1,
+                pal.viewLight,
+                styles.empty,
+              ]}>
               <Text type="lg" style={[pal.text]}>
                 You don't have any saved feeds. To save a feed, click the save
                 button when a custom feed or algorithm shows up.
               </Text>
             </View>
-          </View>
-        ) : (
-          <FlatList
-            style={[!isDesktopWeb && s.flex1]}
-            data={savedFeeds.feeds}
-            keyExtractor={item => item.data.uri}
-            refreshControl={
-              <RefreshControl
-                refreshing={savedFeeds.isRefreshing}
-                onRefresh={() => savedFeeds.refresh()}
-                tintColor={pal.colors.text}
-                titleColor={pal.colors.text}
-              />
-            }
-            onEndReached={() => savedFeeds.loadMore()}
-            renderItem={({item}) => (
-              <AlgoItem key={item.data.uri} item={item} />
-            )}
-            initialNumToRender={15}
-            ListFooterComponent={() => (
-              <View style={styles.footer}>
-                {savedFeeds.isLoading && <ActivityIndicator />}
-              </View>
-            )}
-            extraData={savedFeeds.isLoading}
-            // @ts-ignore our .web version only -prf
-            desktopFixedHeight
-          />
-        )}
+          )}
+          extraData={savedFeeds.isLoading}
+          // @ts-ignore our .web version only -prf
+          desktopFixedHeight
+        />
       </CenteredView>
     )
   }),
@@ -94,4 +95,11 @@ const styles = StyleSheet.create({
   footer: {
     paddingVertical: 20,
   },
+  empty: {
+    paddingHorizontal: 20,
+    paddingVertical: 20,
+    borderRadius: 16,
+    marginHorizontal: 24,
+    marginTop: 10,
+  },
 })