Preload tabs

components/Crypto/index.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { getCrypto } from '../../store/actions/'
+import { preLoad } from '../../helpers/preLoad'
 
 import List from '../List'
 
@@ -11,7 +12,7 @@ class Crypto extends Component {
  const { crypto, tabs } = this.props
 
  if (tabs.index !== prevProps.tabs.index) {
- if (crypto.loading === null && tabs.index === 6) {
+ if (crypto.loading === null && preLoad(6)) {
  this.props.getCrypto()
  }
  }

components/Gainers/index.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { getGainers } from '../../store/actions/'
+import { preLoad } from '../../helpers/preLoad'
 
 import List from '../List'
 
@@ -11,7 +12,7 @@ class Gainers extends Component {
  const { gainers, tabs } = this.props
 
  if (tabs.index !== prevProps.tabs.index) {
- if (gainers.loading === null && tabs.index === 3) {
+ if (gainers.loading === null && preLoad(3)) {
  this.props.getGainers()
  }
  }

components/Home/index.js

@@ -98,10 +98,6 @@ class Home extends Component {
  />
  )
 
- componentDidUpdate() {
- console.log(this.props.tab.index)
- }
-
  render = () => (
  <View style={styles.container}>
  <TabView

components/Losers/index.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { getLosers } from '../../store/actions/'
+import { preLoad } from '../../helpers/preLoad'
 
 import List from '../List'
 
@@ -11,7 +12,7 @@ class Losers extends Component {
  const { losers, tabs } = this.props
 
  if (tabs.index !== prevProps.tabs.index) {
- if (losers.loading === null && tabs.index === 4) {
+ if (losers.loading === null && preLoad(4)) {
  this.props.getLosers()
  }
  }

components/MostActive/index.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { getMostActive } from '../../store/actions/'
+import { preLoad } from '../../helpers/preLoad'
 
 import List from '../List'
 
@@ -11,7 +12,7 @@ class MostActive extends Component {
  const { mostActive, tabs } = this.props
 
  if (tabs.index !== prevProps.tabs.index) {
- if (mostActive.loading === null && tabs.index === 5) {
+ if (mostActive.loading === null && preLoad(5)) {
  this.props.getMostActive()
  }
  }

components/Sectors/index.js

@@ -6,6 +6,7 @@ import { connect } from 'react-redux'
 import { Colors } from '../../constants'
 import { getSectors } from '../../store/actions/'
 import { upOrDownSymbol, formatPercentage, positiveOrNegative } from '../../helpers/priceFormat'
+import { preLoad } from '../../helpers/preLoad'
 import { sectorIcons } from '../../helpers/sectorIcons'
 import { globalStyles } from '../../styles'
 
@@ -16,7 +17,7 @@ class Sectors extends Component {
  const { sectors, tabs } = this.props
 
  if (tabs.index !== prevProps.tabs.index) {
- if (sectors.loading === null && tabs.index === 2) {
+ if (sectors.loading === null && preLoad(2)) {
  this.props.getSectors()
  }
  }

components/Stock/Chart/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import { Dimensions, StyleSheet } from 'react-native'
-import { Text, View } from 'native-base'
+import { Spinner, Text, View } from 'native-base'
 import { connect } from 'react-redux'
 import { LineSegment, VictoryChart, VictoryAxis, VictoryLabel, VictoryLine, VictoryTheme } from 'victory-native'
 import Touchable from 'react-native-platform-touchable'
@@ -52,7 +52,12 @@ class Chart extends Component {
  const { chart, quote } = this.props.stock.data
  const { width } = Dimensions.get('window')
 
- if (chart.length === 0) return null
+ if (chart.length === 0 || this.props.stock.loading)
+ return (
+ <View style={styles.spinner}>
+ <Spinner color={Colors.TEXT_DARK} />
+ </View>
+ )
 
  const _chart = chart
  .filter(interval => interval.close || interval.marketClose)
@@ -66,7 +71,7 @@ class Chart extends Component {
  const lineSegment = <LineSegment style={svgStyles.chartGrid} type={'grid'} />
 
  return (
- <View>
+ <View style={{ height: 250 }}>
  <View style={styles.rangesContainer}>
  {this.state.ranges.map((range, index) => (
  <Touchable
@@ -114,6 +119,10 @@ class Chart extends Component {
 }
 
 const styles = StyleSheet.create({
+ spinner: {
+ height: 250,
+ justifyContent: 'center'
+ },
  chart: {
  marginBottom: -10,
  marginTop: -36

components/Stock/index.js

@@ -1,9 +1,8 @@
 import React, { Component } from 'react'
 import { Platform, RefreshControl, StyleSheet } from 'react-native'
-import { Content, Text, Spinner, View } from 'native-base'
+import { Content, Text, View } from 'native-base'
 import { connect } from 'react-redux'
 
-import { Colors } from '../../constants'
 import { getStock } from '../../store/actions/'
 
 import Search from '../Search'
@@ -21,8 +20,7 @@ class Stock extends Component {
  const { chart, quote } = this.props.stock.data
  const { error, loading } = this.props.stock
 
- const isLoading = !error && loading
- const isSucess = !error && !loading && chart && quote
+ const isSucess = !error && chart && quote
  const isError = error && !loading
 
  return (
@@ -50,11 +48,6 @@ class Stock extends Component {
  <Text>{error}</Text>
  </View>
  )}
- {isLoading && (
- <View style={[styles.container, styles.center]}>
- <Spinner color={Colors.TEXT_DARK} />
- </View>
- )}
  </View>
  )
  }

helpers/preLoad.js

@@ -0,0 +1 @@
+export const preLoad = index => (index === index - 1 || index === index || index === index + 1 ? true : false)