From 2a07ce4ef2ce8d3a8eaf9586ff89bd6ee30bbc46 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Sun, 26 Aug 2018 18:28:59 +0200
Subject: [PATCH] Show loading message
---
components/chart/chart.js | 12 +++++++++---
1 file changed, 9 insertions(+), 3 deletions(-)
diff --git a/components/chart/chart.js b/components/chart/chart.js
index c56b77ae..02489794 100644
--- a/components/chart/chart.js
+++ b/components/chart/chart.js
@@ -98,8 +98,13 @@ export default class CycleChart extends Component {
onLayout={this.onLayout}
style={{ flexDirection: 'row', flex: 1 }}
>
- {!this.state.chartHeight && <Text>Loading...</Text>}
- {this.state.chartHeight &&
+ {!this.state.chartLoaded &&
+ <View style={{width: '100%', justifyContent: 'center', alignItems: 'center'}}>
+ <Text>Loading...</Text>
+ </View>
+ }
+
+ {this.state.chartHeight && this.state.chartLoaded &&
<View
style={[styles.yAxis, {
height: columnHeight,
@@ -109,7 +114,7 @@ export default class CycleChart extends Component {
{makeYAxisLabels(columnHeight)}
</View>}
- {this.state.chartHeight && makeHorizontalGrid(columnHeight, symptomRowHeight)}
+ {this.state.chartHeight && this.state.chartLoaded && makeHorizontalGrid(columnHeight, symptomRowHeight)}
{this.state.chartHeight &&
<FlatList
@@ -121,6 +126,7 @@ export default class CycleChart extends Component {
keyExtractor={item => item.dateString}
initialNumToRender={15}
maxToRenderPerBatch={5}
+ onLayout={() => this.setState({chartLoaded: true})}
/>
}
</View>
--
GitLab