1
00:00:02,130 --> 00:00:06,200
Now of course when storing an order, it would also be nice if we see a little spinner here

2
00:00:06,210 --> 00:00:11,640
when we click the order now button until this is done and we can implement this as well, we just need to

3
00:00:11,640 --> 00:00:16,030
go to the cart screen which is where we dispatch this action to send an order,

4
00:00:16,050 --> 00:00:20,800
here we dispatch and now dispatch here of course returns a promise in the end,

5
00:00:20,970 --> 00:00:29,020
right because remove from cart, which is the case when we click this button, and order, add order will

6
00:00:29,020 --> 00:00:33,580
return a promise in the end thanks to our change, so dispatch will therefore return a promise,

7
00:00:33,580 --> 00:00:36,780
so it's here where we can control our loading state.

8
00:00:36,940 --> 00:00:41,590
Now to make that a bit more readable, I'll move it out of this anonymous function here and actually create

9
00:00:41,590 --> 00:00:46,150
a new function stored in a constant here in my component

10
00:00:46,160 --> 00:00:53,590
but outside of the jsx tree and I'll name this send order handler or anything like that.

11
00:00:53,660 --> 00:00:56,440
That's the same function I used before,

12
00:00:56,510 --> 00:01:04,520
now I will just mind this to the send order handler and now the idea is simple, here add order will return

13
00:01:04,520 --> 00:01:10,400
a promise as I said, dispatch therefore returns a promise, so we can add async here so that we can again

14
00:01:10,400 --> 00:01:16,440
use async await and manage the loading and possibly also the error state as we did before.

15
00:01:16,460 --> 00:01:23,940
So we just need to import use state from React and of course therefore initialize our state again.

16
00:01:23,940 --> 00:01:33,150
So here we have isLoading and set isLoading and initially that's false and if you want which I'll

17
00:01:33,150 --> 00:01:33,800
not do here

18
00:01:33,810 --> 00:01:39,810
but if you want, you can also add error handling in the same way we did it before with use state error,

19
00:01:39,810 --> 00:01:43,610
maybe use effect to then show an alert and so on,

20
00:01:43,650 --> 00:01:45,530
I'll focus on the loading part.

21
00:01:45,690 --> 00:01:47,970
So now here in send order handler,

22
00:01:48,000 --> 00:01:50,970
I'll call set isLoading and set this to true,

23
00:01:51,210 --> 00:01:56,610
then we await this dispatching, so we wait till this promise is finished

24
00:01:56,610 --> 00:02:02,760
and again this just invisibly wraps the parts thereafter into a then block because thereafter I will

25
00:02:02,760 --> 00:02:04,290
set loading back to false,

26
00:02:04,290 --> 00:02:10,160
we're not loading anymore and now we can use that to show an activity indicator.

27
00:02:10,250 --> 00:02:19,880
So let's import activity indicator from React Native here and what I want to do is here instead of that

28
00:02:19,910 --> 00:02:22,170
order now button, I want to show that indicator

29
00:02:22,190 --> 00:02:30,320
whilst I am loading. So here I can check if isLoading is true, if it is the case, I'll show my activity

30
00:02:30,320 --> 00:02:40,100
indicator with a size of let's say small and a color of colors, which you need to make sure that's imported,

31
00:02:40,150 --> 00:02:45,200
primary and that self closing and otherwise if we're not loading,

32
00:02:45,240 --> 00:02:47,260
well then I will show this button of course.

33
00:02:47,340 --> 00:02:53,690
So here I want to render this button in the else case and now let's give this a try.

34
00:02:53,720 --> 00:02:55,370
Let's save that,

35
00:02:55,430 --> 00:02:59,030
add this to the card maybe twice, click order now,

36
00:02:59,150 --> 00:03:06,560
we saw the spinner for a fraction of a second here and now if we have a look at orders, here's our order.

37
00:03:06,560 --> 00:03:10,250
Now let's make sure that the orders also load when we visit the screen.