Show loading more when rows aren't done rendering

components/chart/chart.js

@@ -196,9 +196,11 @@ export default class CycleChart extends Component {
             renderItem={this.renderColumn}
             keyExtractor={item => item}
             initialNumToRender={15}
-            maxToRenderPerBatch={5}
             windowSize={30}
             onLayout={() => this.setState({chartLoaded: true})}
+            onEndReached={() => this.setState({end: true})}
+            ListFooterComponent={<LoadingMoreView end={this.state.end}/>}
+            updateCellsBatchingPeriod={800}
           />
         }
       </View>
@@ -206,6 +208,16 @@ export default class CycleChart extends Component {
   }
 }
 
+function LoadingMoreView(props) {
+  return (
+    <View style={styles.loadingMore}>
+      {!props.end &&
+        <AppText>{labels.loadingMore}</AppText>
+      }
+    </View>
+  )
+}
+
 function getTodayAndPreviousDays(n) {
   const today = new Date()
   today.setHours(0)

components/chart/styles.js

@@ -122,6 +122,11 @@ const styles = {
   symptomRow: {
     alignItems: 'center',
     justifyContent: 'center',
+  },
+  loadingMore: {
+    height: '100%',
+    backgroundColor: 'lightgrey',
+    justifyContent: 'center'
   }
 }
 

components/labels.js

@@ -12,6 +12,7 @@ export const shared = {
   date: 'Date',
   cycleDayWithLinebreak: 'Cycle\nday',
   loading: 'Loading ...',
+  loadingMore: 'Loading more ...',
   more: 'more',
   less: 'less'
 }