Now of course when storing an order, it would also be nice if we see a little spinner here
when we click the order now button until this is done and we can implement this as well, we just need to
go to the cart screen which is where we dispatch this action to send an order,
here we dispatch and now dispatch here of course returns a promise in the end,
right because remove from cart, which is the case when we click this button, and order, add order will
return a promise in the end thanks to our change, so dispatch will therefore return a promise,
so it's here where we can control our loading state.
Now to make that a bit more readable, I'll move it out of this anonymous function here and actually create
a new function stored in a constant here in my component
but outside of the jsx tree and I'll name this send order handler or anything like that.
That's the same function I used before,
now I will just mind this to the send order handler and now the idea is simple, here add order will return
a promise as I said, dispatch therefore returns a promise, so we can add async here so that we can again
use async await and manage the loading and possibly also the error state as we did before.
So we just need to import use state from React and of course therefore initialize our state again.
So here we have isLoading and set isLoading and initially that's false and if you want which I'll
not do here
but if you want, you can also add error handling in the same way we did it before with use state error,
maybe use effect to then show an alert and so on,
I'll focus on the loading part.
So now here in send order handler,
I'll call set isLoading and set this to true,
then we await this dispatching, so we wait till this promise is finished
and again this just invisibly wraps the parts thereafter into a then block because thereafter I will
set loading back to false,
we're not loading anymore and now we can use that to show an activity indicator.
So let's import activity indicator from React Native here and what I want to do is here instead of that
order now button, I want to show that indicator
whilst I am loading. So here I can check if isLoading is true, if it is the case, I'll show my activity
indicator with a size of let's say small and a color of colors, which you need to make sure that's imported,
primary and that self closing and otherwise if we're not loading,
well then I will show this button of course.
So here I want to render this button in the else case and now let's give this a try.
Let's save that,
add this to the card maybe twice, click order now,
we saw the spinner for a fraction of a second here and now if we have a look at orders, here's our order.
Now let's make sure that the orders also load when we visit the screen.