loading bar Card number di account

view/Account.js

@@ -9,7 +9,8 @@ import {
     TouchableOpacity,
     Alert,
     Button,
-    ImageBackground
+    ImageBackground,
+    ActivityIndicator
 } from 'react-native';
 
 import { StackActions } from '@react-navigation/native';
@@ -41,7 +42,8 @@ class Account extends React.Component {
             premium: "",
             my_lat: 0,
             my_long: 0,
-            full_name: ''
+            full_name: '',
+            indicator: true
         }
     }
 
@@ -49,6 +51,9 @@ class Account extends React.Component {
 
         this._getProfile()
         this._unsubscribe = this.props.navigation.addListener('focus', () => {
+            this.setState({
+                indicator: true
+            })
             this._getProfile()
         });
     }
@@ -144,7 +149,8 @@ class Account extends React.Component {
                 img_card: img_card,
                 expire_date: expire,
                 premium: premium,
-                full_name: full_name
+                full_name: full_name,
+                indicator: false
             })
 
         }).catch(error => {
@@ -239,6 +245,12 @@ class Account extends React.Component {
                                     <View style={styles.Card}>
                                         <View style={styles.card}>
                                             <View style={styles.card}>
+                                                {
+                                                    this.state.indicator ? (
+                                                        <Card style={{ padding: 50, alignContent: 'center' }}>
+                                                            <ActivityIndicator style={{ justifyContent: "center" }} size="large" color="#c9af6d" />
+                                                        </Card>
+                                                    ) : (
                                                             <Card style={{ padding: 20, alignContent: 'center' }}>
                                                                 <View style={{ flexDirection: 'row', flex: 1, paddingBottom: 5 }}>
                                                                     <View style={{ flex: 0.5 }}>
@@ -280,6 +292,8 @@ class Account extends React.Component {
                                                                     </View>
                                                                 </View>
                                                             </Card>
+                                                        )
+                                                }
                                             </View>
                                         </View>
                                     </View>

view/Home.js

@@ -65,9 +65,10 @@ class Home extends React.Component {
       this._account();
       if (this.props.outlet_id == '' && this.props.name_outlet == '' && this.props.outlet_detailadress == '') {
         this._getPermissions()
+        
       } else {
         this.setState({
-          indicator: false
+          indicator: false,
         })
       }
       this._renderCarousell()
@@ -376,8 +377,8 @@ class Home extends React.Component {
               {
                 this.state.indicatorProfileCard == true ? (
                   <View style={styles.card}>
-                    <Card style={{ padding: 20, margin: 10, alignContent: 'center' }}>
-                      <ActivityIndicator style={{ top: 20, justifyContent: "center" }} size="large" color="#c9af6d" />
+                    <Card style={{ padding: 50, margin: 10, alignContent: 'center' }}>
+                      <ActivityIndicator style={{ justifyContent: "center" }} size="large" color="#c9af6d" />
                     </Card>
                   </View>
                 ) :