Показывать сообщение о пустом списке только после того, как загрузчик завершится в React Native с использованием плоского списка

У меня есть плоский список, который получает источник данных в виде состояния. На самом деле, это данные из firebase, и я использую избыточность. Итак, данные извлекаются в действиях, и с помощью обратного вызова я получаю данные для состояния.

Чего я хочу добиться, так это того, что, когда данные из API не найдены, в представлении должно отображаться пустое сообщение со списком. На самом деле, я добился этого, используя «ListEmptyComponent». Но происходит то, что экран начинается с пустого сообщения, а счетчик загружается под ним, а затем, если данные найдены, сообщение исчезает, как и счетчик.

Но то, что я хотел, это то, что когда представление отображается, первое, что все должны увидеть, это счетчик, а затем, если скрывается пустой счетчик данных, отображается сообщение о пустом списке.

Как этого добиться?

Мои действия:

export const fetchOrderHistory = (phone, callback) => {
return (dispatch) => {
    dispatch({ type: START_SPINNER_ACTION_FOR_ORDER_HISTORY })
    firebase.database().ref('orders/'+phone)
    .on('value', snapshot => {
        const snapShotValue = snapshot.val();
        callback(snapShotValue);
        dispatch ({ type: ORDER_HISTORY_FETCHED , payload: snapshot.val()});
        dispatch({ type: STOP_SPINNER_ACTION_FRO_ORDER_HISTORY })
    });

};

};

Мой плоский список и счетчик:

<FlatList
                        data = {this.state.historyOfOrders}
                        keyExtractor = {item => item.uid}
                        ListEmptyComponent = {this.onListEmpty()}
                        renderItem = {({ item }) => (
                            <Card
                            containerStyle = {{ borderRadius: 5 }}
                            >
                            <View style = {styles.topContainerStyle}>
                                    <View>
                                        <TouchableOpacity
                                        onPress = {() => this.props.navigation.navigate('ViewOrderScreen', {itemsOfOrder: item}) }
                                        >
                                            <View style = {styles.viewOrderContainer}>
                                            <View style = {styles.viewOrderTextContainer}>
                                                <Text style = {styles.viewOrderTextStyle}>View Order</Text>
                                            </View>
                                            <Icon 
                                            name='ios-arrow-forward'
                                            type='ionicon'
                                            color='#ff7675'
                                            />
                                            </View>
                                        </TouchableOpacity>
                                    </View>
                                </View>
                            </View>
                        </Card> 
                        )}
                    />

                    {this.props.isSpinnerLoading &&
                    <View style = {styles.loading}>
                        <ActivityIndicator size = "large" color = "#03A9F4"/>
                    </View> }

Мой обратный вызов в componentWillMount, который установил состояние:

 componentWillMount() {
   this.props.fetchOrderHistory((this.props.phone), (snapShotValue)=> {
        const userOrderHistory = _.map(snapShotValue, (val,uid) => ({uid, ...val}))
        this.setState({ historyOfOrders: userOrderHistory })
   });
}

Мое сообщение EmptyList:

onListEmpty = () => {
   return <View style = {{ alignSelf: 'center' }}>
        <Text style = {{ fontWeight: 'bold', fontSize: 25 }}>No Data</Text>
    </View>
}

Мое состояние:

state = { historyOfOrders: "" }

Я получаю значения счетчика от редукторов, используя mapStateToProps.

Пожалуйста, проведите меня через