Show a Spinner while Submitting a Form in React Native with ActivityIndicator

Instructor: [00:00] On the HeaderView screen, set an onPress on the submit button and make the submit review function, which will automatically submit review to our demo server with fetch.

[00:16] After the server response, we'll just dismiss the model by calling goBack on navigation. This works just fine, but if we look at our demo server is a set timeout for two seconds when a review is posted to simulate a long response time on request.

[00:32] In header-view.js, import ActivityIndicator from React native which we can use to show a spinner while the user is waiting for the response to return. We'll add a bit of state to track whether or not the form is submitting, and we can get the ActivityIndicator with that submitting state.

[00:51] The ActivityIndicator can be small or large and we can specify the color as a prop. We could also add style like a normal view. We'll put some padding around it as well. Then, we just have to set the submitting state to true before we do a post.

[01:11] We're dismissing the entire module after the fetch is over here. We would have to set submitting to false, but we could do here if we wanted to. If we had a catch on this fetch and that's the place to turn off the submitting flag as well.

[01:28] Now when we reload and go to submit our review, we get a spinner for a couple of second before the module is dismissed. The last piece to note is that showing an ActivityIndicator doesn't actually do anything to prevent multiple submissions of the same form.

[01:46] We'll also want to make sure to actually disable the submit button when the form is submitting. Otherwise, we could submit the form multiple times.