circular loading outlet

view/Outlets.js

 import React from 'react';
-import { View, Text, StyleSheet, FlatList, TextInput, Alert, Linking } from 'react-native';
+import { View, Text, StyleSheet, FlatList, TextInput, Alert, Linking, ActivityIndicator } from 'react-native';
 import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler';
 import Spinner from 'react-native-loading-spinner-overlay';
 import { CheckBox } from 'react-native-elements';
@@ -31,7 +31,8 @@ class Outlets extends React.Component {
             spinner: false,
             data_outlet: [],
             outlet_selected: '',
-            data_name: ''
+            data_name: '',
+            indicator:true
         }
     }
 
@@ -113,17 +114,18 @@ class Outlets extends React.Component {
             this.setState({
                 dataOutlets: dataOutlets,
                 data_before_search: dataOutlets,
+              
 
             })
             this.setState({
-                spinner: false,
+                indicator: false
             })
 
         }).catch(error => {
             let response = error.response.data;
             Alert.alert(response.msg);
             this.setState({
-                spinner: false,
+                 indicator: false
             })
         })
     }
@@ -227,7 +229,7 @@ class Outlets extends React.Component {
         return (
 
             <View style={{ flexDirection: 'row', flex: 1,marginRight:10,marginLeft:10,marginBottom:10}}>
-                <View style={styles.content_list}>
+                    <View style={styles.content_list}>
                     <View style={styles.list_addrees}>
                         <Text style={{ fontFamily: 'Gotham-Black', color: '#ccb46c', fontSize: 18,margin:1 }}>{item.name}</Text>
                         <Text style={{ flexWrap: 'wrap', fontFamily: 'Gotham-Light', color: '#b1b1b2' }}>{item.full_address}</Text>
@@ -258,6 +260,7 @@ class Outlets extends React.Component {
                         </View>
                     </View>
                 </View>
+                
             </View>
         );
     }
@@ -312,6 +315,9 @@ class Outlets extends React.Component {
                     </View>
                 </View> */}
                 <View style={styles.body}>
+                {this.state.indicator == true ? (
+                  <ActivityIndicator size="large" color="#c9af6d" style={{margin:20}} />
+                ) : (
                     <FlatList
                         data={_.orderBy(this.state.dataOutlets, ['distance'], ['asc'])}
                         renderItem={this.RenderItem}
@@ -321,6 +327,7 @@ class Outlets extends React.Component {
                         maxToRenderPerBatch={2}
                         onEndReachedThreshold={0.5}
                     />
+                  )}
                 </View>
             </View>
         )