reactivated the old loading indicator

app/components/Common/ModalDialog/ProgressModal.native.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Alert, Modal, View } from 'react-native';
+import { useSelector } from 'react-redux';
+
+import { getProgressModelState } from '../../../reducers/modelDialogReducer';
+import LoadingIndicator from '../LoadingIndicator';
+
+const ProgressModal = () => {
+  // This component will re-render anytime progressModalState is updated in redux
+  const isOpen = useSelector(getProgressModelState);
+  const backgroundColor = 'rgba(255,255,255,0.5)';
+
+  return (
+    <Modal
+      animationType={'slide'}
+      transparent
+      visible={isOpen}
+      elevation="10"
+      onRequestClose={() => {
+        Alert.alert('Loading cancelled in between');
+      }}
+    >
+      <View
+        style={{
+          flex: 1,
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          elevation: 10,
+          backgroundColor
+        }}
+      >
+        <LoadingIndicator />
+      </View>
+    </Modal>
+  );
+};
+
+export default ProgressModal;

app/containers/Navigators/AppDrawerNavigatorContainer.js

@@ -8,6 +8,7 @@ import { getAccessToken } from '../../utils/user';
 import { loadUserProfile } from '../../actions/loadUserProfileAction';
 import { currentUserProfileSelector } from '../../selectors';
 import LoadingIndicator from '../../components/Common/LoadingIndicator';
+import ProgressModal from '../../components/Common/ModalDialog/ProgressModal.native';
 import { View } from 'react-native';
 import EStyleSheet from 'react-native-extended-stylesheet';
 import { fetchpledgeEventsAction } from '../../actions/pledgeEventsAction';
@@ -99,6 +100,7 @@ class AppDrawerNavigatorContainer extends Component {
       return (
         <View style={{ flex: 1 }}>
           <this._AppNavigator />
+          <ProgressModal />
         </View>
       );
     }