From d90ee4f86a212fc67bb9d24552c3f625a6355ad5 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Tue, 6 Nov 2018 17:26:21 +0100
Subject: [PATCH] Show loading more when rows aren't done rendering
---
components/chart/chart.js | 14 +++++++++++++-
components/chart/styles.js | 5 +++++
components/labels.js | 1 +
3 files changed, 19 insertions(+), 1 deletion(-)
diff --git a/components/chart/chart.js b/components/chart/chart.js
index b4b4453f..e5366c9f 100644
--- a/components/chart/chart.js
+++ b/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)
diff --git a/components/chart/styles.js b/components/chart/styles.js
index 8cc044fb..3b883d8d 100644
--- a/components/chart/styles.js
+++ b/components/chart/styles.js
@@ -122,6 +122,11 @@ const styles = {
symptomRow: {
alignItems: 'center',
justifyContent: 'center',
+ },
+ loadingMore: {
+ height: '100%',
+ backgroundColor: 'lightgrey',
+ justifyContent: 'center'
}
}
diff --git a/components/labels.js b/components/labels.js
index 6a9709c6..adb67006 100644
--- a/components/labels.js
+++ b/components/labels.js
@@ -12,6 +12,7 @@ export const shared = {
date: 'Date',
cycleDayWithLinebreak: 'Cycle\nday',
loading: 'Loading ...',
+ loadingMore: 'Loading more ...',
more: 'more',
less: 'less'
}
--
GitLab