Alert after fullscreen loading indicator - reactjs

Question

I need to display a fullscreen loading indicator while a request is being processed, in case request fails I might need to show an Alert with an error message immediately after the loading indicator is dismissed. Using a Modal to show the loading indicator works great on Android but unless a delay is added between dismissing the loading indicator and displaying the Alert iOS is going to hang up, which is a known issue.
To solve this problem I've created a View-based ProgressHUD component to display loading indicator and put it as an App component child below all other components like this:
<View style={{ flex: 1 }}>
<AuthScreensStack />
<ProgressHUD isLoading={false} />
</View>
The indicator itself works as expected and nothing hangs up. The problem I'm facing now is deciding how to toggle this ProgressHUD. I'm using redux-saga middleware so I could probably move the ProgressHUD outside of App component into something like a LayoutComponent and connect it to the redux storage to observe some isLoading flag, but that will require me to add an additional action to each of my sagas, which will make them messy. Ideally I would like to have control over the ProgressHUD in each of the screens that need to use it but rendering it in them will render below navigation bar / above tab bar. Is there a way, perhaps, to render a View over the entire app's window from within a screen that's displayed via react-navigation's navigator? Any suggestions on how to handle this would be greatly appreciated.

Answer 1

Since you're already using redux-saga, therefore you can chain it in the generators.
Considering an action such as loadingOverlayVisible triggers the Modal with the loading indicator
Either you can customize it in your saga where your firing it as
export function * submit() {
try {
yield put(loadingOverlayVisible(true)) // Modal Open
const result = yield call(sampleApiCall)
yield put(loadingOverlayVisible(false)) // Modal Close
if(result && result.ok) {
yield call(Alert.alert, 'Success', 'Success Response') // Alert Called
//... Other stuff
}
} catch(ex) {
yield call(Alert.alert, 'Success', 'Success Response') // Alert Called
}
}
OR
Make a separate middleware for ajax request interceptor such as
export function * interceptor({url, params}) {
try {
yield put(loadingOverlayVisible(true)) // Modal Open
const result = yield call(sampleApiCall)
yield put(loadingOverlayVisible(false)) // Modal Close
} catch(ex) {
throw ex // Either handle it here or in your other generators
}
}