Show loading more when rows aren't done rendering

2018-11-06 17:26:21 +01:00
parent 1f1c6ed6fa
commit d90ee4f86a
3 changed files with 19 additions and 1 deletions
@@ -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)