add Lazy Load capabilities like lazy load time and the option to render custom loader

Author: ethanshar

demo/src/screens/incubatorScreens/TabControllerScreen/index.js

@@ -1,4 +1,5 @@
 import React, {Component} from 'react';
+import {ActivityIndicator} from 'react-native';
 import {Incubator, Colors, View, Text, Image, Assets, Button} from 'react-native-ui-lib'; //eslint-disable-line
 import _ from 'lodash';
 
@@ -71,6 +72,17 @@ class TabControllerScreen extends Component {
   //   ];
   // }
 
+  renderLoadingPage() {
+    return (
+      <View flex center>
+        <ActivityIndicator size="large"/>
+        <Text text60L marginT-10>
+          Loading
+        </Text>
+      </View>
+    );
+  }
+
   renderTabPages() {
     const Container = USE_CAROUSEL ? Incubator.TabController.PageCarousel : View;
     const containerProps = USE_CAROUSEL ? {} : {flex: true};
@@ -82,7 +94,7 @@ class TabControllerScreen extends Component {
         <Incubator.TabController.TabPage index={1}>
           <Tab2/>
         </Incubator.TabController.TabPage>
-        <Incubator.TabController.TabPage index={2} lazy>
+        <Incubator.TabController.TabPage index={2} lazy lazyLoadTime={1500} renderLoading={this.renderLoadingPage}>
           <Tab3/>
         </Incubator.TabController.TabPage>
         {/* <Incubator.TabController.TabPage index={3}>

src/incubator/TabController/TabPage.js

@@ -2,6 +2,7 @@ import React, {PureComponent} from 'react';
 import {StyleSheet} from 'react-native';
 import PropTypes from 'prop-types';
 import Reanimated from 'react-native-reanimated';
+import _ from 'lodash';
 import TabBarContext from './TabBarContext';
 import {Constants} from '../../helpers';
 
@@ -24,11 +25,21 @@ export default class TabPage extends PureComponent {
     /**
      * Whether this page should be loaded lazily
      */
-    lazy: PropTypes.bool
+    lazy: PropTypes.bool,
+    /**
+     * How long to wait till lazy load complete (good for showing loader screens)
+     */
+    lazyLoadTime: PropTypes.number,
+    /**
+     * Render a custom loading page when lazy loading
+     */
+    renderLoading: PropTypes.func
   };
 
   static defaultProps = {
-    activeOpacity: 0.6
+    activeOpacity: 0.6,
+    lazyLoadTime: 300,
+    renderLoading: _.noop
   };
 
   state = {
@@ -49,16 +60,17 @@ export default class TabPage extends PureComponent {
       this.setState({
         loaded: true
       });
-    }, 300); // tab bar indicator transition time
+    }, this.props.lazyLoadTime); // tab bar indicator transition time
   };
 
   render() {
     const {currentPage} = this.context;
-    const {index, lazy, testID} = this.props;
+    const {index, lazy, renderLoading, testID} = this.props;
     const {loaded} = this.state;
 
     return (
       <Reanimated.View style={this._pageStyle} testID={testID}>
+        {!loaded && renderLoading()}
         {loaded && this.props.children}
         <Code>
           {() => {