Загрузка компонента в React native с Firebase и redux

Question

Нажмите здесь, чтобы посмотреть страницу

Мне нужна ваша помощь здесь. Я хочу добавить индикатор активности с тайм-аутом после нажатия кнопки входа в систему, но кнопка входа уже настроена для функции loginUser ()! Мне просто нужно показать индикатор активности на несколько секунд и войти в систему пользователя при нажатии кнопки! Спасибо, я пытался в течение недели. Я беспомощен Поэтому, пожалуйста, помогите мне!

import React, { Component } from 'react';
import { StyleSheet, View, Text, Alert, TouchableOpacity, ActivityIndicator } from 'react-native';
import { Form, Input, Item, Button, Label, Body, } from 'native-base';
import { login } from "../actions";
import { Actions } from "react-native-router-flux";
import { connect } from "react-redux";
import { colors } from "../../../colors";

class UserLoginForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            email: '',
            password: '',

        };
        this.loginUser = this.loginUser.bind(this);
        this.loginSuccessCallback = this.loginSuccessCallback.bind(this);
        this.loginErrorCallback = this.loginErrorCallback.bind(this);
    }

    forgotPassword() {
        Actions.ForgotPassword();
    };

    loginSuccessCallback(user) {
    };

    loginErrorCallback(error) {
        switch (error.code) {
            case 'auth/user-not-found':
                Alert.alert('Error', 'User not found. New user? SignUp');
                break;
            case 'auth/wrong-password':
                Alert.alert('Error', 'Wrong Password');
                break;
        }
    };

    loginUser() {
        const { email, password } = this.state;
        const data = { email, password };
        this.props.dispatch(login(data, this.loginSuccessCallback, this.loginErrorCallback));
    };
  
    render() {
        return (
            <View style={styles.container}>
                <Form>
                    <Item floatingLabel>
                        <Label>Email</Label>
                        <Input
                            autoCorrect={false}
                            autoCapitalize="none"
                            returnKeyType="done"
                            onChangeText={(email) => this.setState({ email })} />
                    </Item>

                    <Item floatingLabel>
                        <Label>Password</Label>
                        <Input
                            secureTextEntry={true}
                            autoCorrect={false}
                            autoCapitalize="none"
                            returnKeyType="go"
                            onSubmitEditing={this.loginUser}
                            onChangeText={(password) => this.setState({ password })} />
                    </Item>

                    <Button style={styles.loginButton}
                        full
                        rounded
                        onPress={this.loginUser}>
                        <Text style={{ fontWeight: 'bold', color: 'white', fontSize: 20 }}>Login</Text>

                    </Button>

                    <TouchableOpacity onPress={this.forgotPassword}>
                        <Text style={styles.forgotButton}>Forgot Password?</Text>
                    </TouchableOpacity>



<--------------Loading Component ------------------>
                    <View style={styles.loading}>
                        <ActivityIndicator
                            animating={this.state.animating}
                            style={[{ height: 80 }]}
                            color="#C00"
                            size="large"
                            hidesWhenStopped={true} />
                        <Text style={{ color: 'red' }}>loading..</Text>
                    </View>
<------------------------------------------------------------------->



                </Form>
            </View>
        );
    }
}

function mapStateToProps(state, props) {
    return {
        user: state.authReducer.user,
    };
}

export default connect(
    mapStateToProps,
    null
)(UserLoginForm);

const styles = StyleSheet.create({
    container: {
        marginTop: 10
    },
    loginButton: {
        alignSelf: 'center',
        marginTop: 10,
        width: 250
    },
    forgotButton: {
        alignSelf: 'center',
        marginTop: 15,
        color: colors.white
    },
    loading: {
        position: 'absolute',
        opacity: 0.5,
        height: '50%',
        width: '35%',
        backgroundColor: 'black',
        alignSelf: 'center',
        alignItems: 'center',
        borderBottomLeftRadius: 20,
        borderBottomRightRadius: 20,
        borderTopRightRadius: 20,
        borderTopLeftRadius: 20,
    }
})




Login function goes here..

<--------------------------------------------------------------------------------------------------->
import * as t from "./actionTypes";
import {auth} from "../../config/firebase";
import * as api from "./api";

export function register(data, successCB, errorCB) {
    return dispatch => {
        api.register(data, function (success, data, error) {
            if (success) {
                successCB(data);
            } else if (error) errorCB(error);
        });
    };
}

export function checkLoginStatus(callback) {
    return dispatch => {
        auth.onAuthStateChanged(authUser => {
            let isLoggedIn = authUser !== null;
            if (isLoggedIn) {
                api.getUser(authUser, function (success, {exists, user}, error) {
                    if (success) {
                        if (exists) {
                            dispatch({type: t.USER_LOGGED_IN, data: user});
                            callback(true, 'user');
                        }
                        else {
                            api.getEmployee(authUser, function (success, {exists, user}, error) {
                                if (success && exists) {
                                    dispatch({type: t.EMPLOYEE_LOGGED_IN, data: user});
                                    callback(true, 'employee');
                                } else {
                                    dispatch({type: t.LOGGED_OUT});
                                    callback(false);
                                }
                            })
                        }
                    } else if (error) {
                        //unable to get user
                        dispatch({type: t.LOGGED_OUT});
                        callback(false);
                    }
                });
            } else {
                dispatch({type: t.LOGGED_OUT});
                callback(false);
            }
        });
    };
}

export function login(data, successCB, errorCB) {
    return dispatch => {
        api.login(data, function (success, data, error) {
            if (success) {
                if (data.exists) dispatch({type: t.USER_LOGGED_IN, data: data.user});
                successCB(data);
            } else if (error) errorCB(error);
        });
    };
}

export function logout(errorCB) {
    return dispatch => {
        api.logout(function (success, data, error) {
            if (success) {
                dispatch({type: t.LOGGED_OUT});
            } else if (error) errorCB(error);
        });
    };
}

export function loginEmployee(data, successCB, errorCB) {
    return dispatch => {
        api.loginEmployee(data, function (success, data, error) {
            if (success) {
                if (data.exists) dispatch({type: t.EMPLOYEE_LOGGED_IN, data: data.user});
                successCB(data);
            } else if (error) errorCB(error);
        });
    };
}