1
00:00:00,820 --> 00:00:01,589
Welcome back.

2
00:00:01,890 --> 00:00:08,010
So at the beginning of the restructuring, we created a loading variable in the main view model, which

3
00:00:08,010 --> 00:00:09,900
we have not collected from the UI.

4
00:00:10,320 --> 00:00:14,430
We'll see how it can help us manage to request when it's in the loading state.

5
00:00:14,670 --> 00:00:19,950
So whenever we click on something, you see there is a little bit of time it takes until this data is

6
00:00:19,950 --> 00:00:20,310
loaded.

7
00:00:20,580 --> 00:00:25,350
So this depends on your internet connection, for example, maybe also on the speed of your phone and

8
00:00:25,350 --> 00:00:25,910
so forth.

9
00:00:25,920 --> 00:00:30,560
So this is something obviously also on the news API.

10
00:00:30,570 --> 00:00:35,250
So how quickly they will be able to provide the data and so forth.

11
00:00:35,580 --> 00:00:41,790
So this is something that I want to make sure that we see that there is something happening where we

12
00:00:41,790 --> 00:00:47,760
see a little loading spindle or a progress indicator that says, Hey, there's something happening in

13
00:00:47,760 --> 00:00:48,390
the background.

14
00:00:48,900 --> 00:00:49,890
So let's check it out.

15
00:00:51,890 --> 00:00:57,350
So let's go ahead and create a file in our components package, in this file, we're going to create

16
00:00:57,350 --> 00:00:58,370
a composable.

17
00:01:00,380 --> 00:01:03,780
Which will be loading the UI.

18
00:01:05,720 --> 00:01:07,520
And it's just going to be a box.

19
00:01:08,780 --> 00:01:17,840
Let's import box here with a modifier where I'm going to say that it should filled the max size.

20
00:01:17,840 --> 00:01:19,790
So modifier fill max.

21
00:01:21,440 --> 00:01:31,310
Well, fill max size this one here, as well as the content alignment, should be set to alignment center.

22
00:01:31,310 --> 00:01:36,350
So I want this to be displayed in the center, all aligned into the center.

23
00:01:36,350 --> 00:01:41,240
So the content of it and then we need to have content for this to make sense.

24
00:01:41,450 --> 00:01:47,180
So let's just use something called circular progress indicator.

25
00:01:47,660 --> 00:01:53,990
So this is another composable which will just display a little progress composable.

26
00:01:56,670 --> 00:01:59,610
So now let's do the same thing for an error.

27
00:01:59,700 --> 00:02:00,060
Why?

28
00:02:00,060 --> 00:02:02,940
So whenever there's an error, it should display the error UI.

29
00:02:03,480 --> 00:02:10,770
So I'm just going to go ahead and call this error UI and this will also be a box and this will be a

30
00:02:10,770 --> 00:02:11,790
composable, obviously.

31
00:02:12,030 --> 00:02:13,710
So let's add composable here.

32
00:02:15,310 --> 00:02:22,040
And it should instead of displaying this cycle of progress indicator, it should display a text and

33
00:02:22,060 --> 00:02:29,260
let's import text here, and that text should be an error has occurred.

34
00:02:31,930 --> 00:02:35,140
And please try again later.

35
00:02:35,320 --> 00:02:36,040
Something like this.

36
00:02:37,920 --> 00:02:40,530
All right, and what's wrong with the Kurds?

37
00:02:41,450 --> 00:02:42,270
OK, they are.

38
00:02:43,050 --> 00:02:43,410
All right.

39
00:02:43,590 --> 00:02:50,520
So this will show a text as an error message in the middle of the screen when there is an error.

40
00:02:51,300 --> 00:02:52,770
So now we need to set the state.

41
00:02:53,040 --> 00:03:00,660
So in our main view model, Katie, we already create a certain getter for loading state and setting

42
00:03:00,660 --> 00:03:01,380
the value.

43
00:03:01,620 --> 00:03:04,020
True, before launching to view model scope.

44
00:03:04,530 --> 00:03:08,280
So let's add the following code to our Arrows state as well.

45
00:03:08,820 --> 00:03:12,660
So we have this is loading and we see here is loading.

46
00:03:13,050 --> 00:03:16,800
And now we need to have the same thing for our arrows state.

47
00:03:17,070 --> 00:03:18,930
So we just do that.

48
00:03:19,770 --> 00:03:29,280
And I'm going to say is error, which will also be will be a mutable state flow and is error is going

49
00:03:29,280 --> 00:03:35,670
to be of type state flow, which I'm going to set with the getter.

50
00:03:36,660 --> 00:03:37,860
We could also do it like this.

51
00:03:38,070 --> 00:03:43,980
Get this going to be an is error here or on the score is error.

52
00:03:44,850 --> 00:03:48,150
So this one here, so when we're getting, we're getting this is arable was setting.

53
00:03:48,150 --> 00:03:50,820
We're setting this public is a say state.

54
00:03:51,630 --> 00:03:56,040
So now we need to catch any error that occurs while the request is being processed.

55
00:03:56,310 --> 00:03:58,200
This will be generic and can be improved.

56
00:03:58,560 --> 00:04:02,460
So the quarantine helps to manage exceptions using quarantine, exception handler.

57
00:04:04,990 --> 00:04:13,330
So let's go ahead and set such an error handler up, so well, error handler, which will be a cold

58
00:04:13,330 --> 00:04:17,230
routine exception handler.

59
00:04:18,310 --> 00:04:21,760
This one here where I'm just going to get an error.

60
00:04:21,880 --> 00:04:26,020
So first I get a variable that I'm not going to use and then I get an error that I'm going to use.

61
00:04:26,410 --> 00:04:28,450
OK, so that's what the exception handler gives me.

62
00:04:28,480 --> 00:04:30,830
It gives me a cold routine context and the thrall.

63
00:04:30,850 --> 00:04:37,550
So I'm just going to work with the Froebel and I'm going to check if the error is an exception.

64
00:04:38,680 --> 00:04:44,920
And if that's the case, then I'm going to set the error value to be true because his error, if you

65
00:04:44,920 --> 00:04:47,930
recall some mutable state flaw of type Boolean.

66
00:04:48,910 --> 00:04:49,330
All right.

67
00:04:49,570 --> 00:04:54,160
And while this is error without the underscore, is a state of type Boolean.

68
00:04:54,820 --> 00:04:56,740
So this will be our error handler.

69
00:04:57,370 --> 00:05:02,490
And now in our get top articles, for example, when we are launching our call routine, we can all

70
00:05:02,510 --> 00:05:03,070
use this.

71
00:05:03,790 --> 00:05:10,720
OK, so here we're going to use our dispatchers Io, plus our error handler, so we can just do it like

72
00:05:10,720 --> 00:05:10,960
this.

73
00:05:10,960 --> 00:05:13,630
We could just add this error handler with a plus here.

74
00:05:13,870 --> 00:05:19,750
So since we are using a call routine for processing the request we can use to call and see an exception

75
00:05:19,750 --> 00:05:23,380
handler as the attached was attached to our dispatchers.

76
00:05:26,710 --> 00:05:28,780
And we can do that now for all of them.

77
00:05:29,020 --> 00:05:33,290
So we do that, you get articles by category.

78
00:05:33,400 --> 00:05:36,100
So let's add our error handler here as well.

79
00:05:36,820 --> 00:05:41,380
Then good article by where's that here?

80
00:05:41,890 --> 00:05:42,450
Source.

81
00:05:43,120 --> 00:05:45,460
So let's add our error handler in there as well.

82
00:05:48,270 --> 00:05:49,770
So now in our top news.

83
00:05:53,840 --> 00:05:55,280
That's the Swan here.

84
00:05:55,310 --> 00:05:57,650
Top news, Katina, not this one, top news.

85
00:05:59,310 --> 00:06:06,660
K t file in this one here would create the loading state and Arab state as a parameter.

86
00:06:06,930 --> 00:06:08,550
So let's add that in here.

87
00:06:09,510 --> 00:06:16,410
I'm going to say is error, which will be a mutable state of type Boolean.

88
00:06:22,170 --> 00:06:24,540
And then when would that appear?

89
00:06:24,780 --> 00:06:34,470
So in this else blog or after this blog, what we can do is when it's loading that value.

90
00:06:36,720 --> 00:06:38,760
And what do we get this is loading from?

91
00:06:39,540 --> 00:06:41,670
And where's this loading coming from?

92
00:06:41,700 --> 00:06:45,000
Well, actually, let's also pass it here.

93
00:06:45,000 --> 00:06:54,780
So is loading is going to also be a mutable state of immutable state of a Boolean that we need to pass

94
00:06:55,200 --> 00:06:56,250
to our top news?

95
00:06:57,130 --> 00:07:01,070
OK, now we can use this loading and then we can use his error.

96
00:07:01,080 --> 00:07:06,750
So when his error value, then load the error UI.

97
00:07:09,680 --> 00:07:15,650
And otherwise, and this is the area why we need to import that and otherwise.

98
00:07:15,680 --> 00:07:23,740
So if none of that is the case, so here else that is where we want to load this lazy column, OK,

99
00:07:23,750 --> 00:07:28,420
because otherwise we don't want to load it.

100
00:07:28,790 --> 00:07:30,350
We only want to load it once.

101
00:07:30,350 --> 00:07:31,230
It's not loading.

102
00:07:31,340 --> 00:07:36,290
So once the loading period part is over, that's when lazy columns should be loaded, which will be

103
00:07:36,290 --> 00:07:40,490
this this lazy column, for example, or this one here?

104
00:07:44,320 --> 00:07:46,120
All right, so now in our news up.

105
00:07:48,700 --> 00:07:50,110
And you said, Katie, yeah.

106
00:07:50,410 --> 00:07:51,660
Here you will find the.

107
00:07:51,670 --> 00:07:53,860
Now we get an error here at the bottom right.

108
00:07:53,920 --> 00:08:01,240
So here are composable with the NAF Graph bowler isn't very happy, so we need to pass is loading here

109
00:08:01,240 --> 00:08:01,690
as well.

110
00:08:02,140 --> 00:08:07,990
So is loading, which will be a mutable state of Boolean.

111
00:08:09,270 --> 00:08:11,430
As well as his error.

112
00:08:13,450 --> 00:08:17,170
Which will be a mutable state of bullion.

113
00:08:19,120 --> 00:08:20,290
That's what we're passing.

114
00:08:20,620 --> 00:08:23,200
And now we can use them in our composable here.

115
00:08:23,650 --> 00:08:31,300
So now I can said is loading to be is loading and is error to be is error.

116
00:08:32,600 --> 00:08:37,280
So whatever we're passing will be the values of our top news, because our top news, as you recall.

117
00:08:37,520 --> 00:08:39,260
That's where we added those two, right?

118
00:08:40,159 --> 00:08:45,080
So in our top news up, that's where we're going to use it now and then also in our top news app, we

119
00:08:45,080 --> 00:08:50,150
need to collect it and specifically in our navigation up here.

120
00:08:50,720 --> 00:08:57,080
So here we need to collect our loading variable.

121
00:08:57,440 --> 00:09:09,200
So file loading by view model that is loading to collect as state.

122
00:09:14,080 --> 00:09:16,300
And we too important for it to work.

123
00:09:17,500 --> 00:09:19,180
And we need to do the same thing with the Arrow.

124
00:09:19,300 --> 00:09:27,820
So while arrow by view model that is error thought collect as state.

125
00:09:31,800 --> 00:09:40,230
Accordingly, we need to set those so here after our query, state inside of our NAF host here we can

126
00:09:40,230 --> 00:09:51,780
go ahead and set our is loading or create is loading, which will be the mutable state of our loading

127
00:09:51,780 --> 00:09:52,200
variable.

128
00:09:52,590 --> 00:09:53,670
But we just set up here.

129
00:09:54,420 --> 00:10:02,100
So this one that we get from is loading from our view model because our view model has the is loading

130
00:10:02,310 --> 00:10:03,120
parameter, right?

131
00:10:03,210 --> 00:10:09,600
So that's the state flow that we have set up and we're using all the time with is loading value and

132
00:10:09,600 --> 00:10:10,400
so forth, right?

133
00:10:10,410 --> 00:10:15,480
So we're setting the value each time that we are lowering something to true and when we're not loading,

134
00:10:15,480 --> 00:10:16,500
we're setting it to false.

135
00:10:17,160 --> 00:10:18,570
But on our news app.

136
00:10:20,460 --> 00:10:21,780
We can use it.

137
00:10:21,900 --> 00:10:24,180
So here I've set up, it's loading.

138
00:10:24,600 --> 00:10:26,490
Now I need to set up this as well.

139
00:10:26,820 --> 00:10:32,310
So ball is error will be also mutable state of error.

140
00:10:34,620 --> 00:10:35,140
All right.

141
00:10:35,160 --> 00:10:40,710
And now we can pass those to our bottom navigation because you see here we're getting an error because

142
00:10:41,010 --> 00:10:42,060
we're not passing it.

143
00:10:42,180 --> 00:10:44,400
So let's pass those two values.

144
00:10:44,610 --> 00:10:48,450
So is error will be or is error just prepared?

145
00:10:48,720 --> 00:10:54,990
So the error of our bottom navigation and the is loading will be the is loading.

146
00:10:54,990 --> 00:10:59,580
So you see, I'm using a different order, but that's fine as long as I'm using named parameters.

147
00:11:02,950 --> 00:11:04,570
All right, now, our sources

148
00:11:07,300 --> 00:11:11,470
and its sources, Katie needs to get the error.

149
00:11:11,650 --> 00:11:15,240
So here we are passing the view model so far, but wouldn't it need to pass?

150
00:11:15,250 --> 00:11:16,540
Is loading in this area here?

151
00:11:16,600 --> 00:11:23,650
It's loading, which will be a mutable state of a Boolean, and we need to do the same thing for his

152
00:11:23,650 --> 00:11:23,980
error.

153
00:11:24,490 --> 00:11:28,870
So his error, which will be immutable state of a Boolean as well.

154
00:11:30,740 --> 00:11:31,120
OK.

155
00:11:33,320 --> 00:11:33,840
Like this.

156
00:11:35,150 --> 00:11:43,180
And now, accordingly, we can use it inside of our sources, so further down here.

157
00:11:46,220 --> 00:11:48,200
Inside of this it's statement.

158
00:11:48,290 --> 00:11:48,950
So here.

159
00:11:51,170 --> 00:11:56,180
Instead of our top bar and the scaffold of our sources, so this is the source page, right?

160
00:11:56,840 --> 00:11:59,570
So here we can say when we are loading.

161
00:11:59,600 --> 00:12:06,590
So when is loading is value or when is loading spell you this true?

162
00:12:06,590 --> 00:12:08,240
Then load the UI.

163
00:12:09,110 --> 00:12:20,510
So loading UI and then else, if Arrow is the case, so is his error of value, then load the error

164
00:12:20,510 --> 00:12:24,970
UI and retain portals.

165
00:12:25,040 --> 00:12:29,290
So error UI, as well as loading UI, that's important too.

166
00:12:30,080 --> 00:12:37,010
And then otherwise in the alts blog, that's where we want to run all of this.

167
00:12:39,530 --> 00:12:43,350
Like this, and here we need to add terror.

168
00:12:44,660 --> 00:12:46,970
Order arrow, not the arrow.

169
00:12:48,260 --> 00:12:48,690
All right.

170
00:12:51,020 --> 00:12:56,870
Now, at the same time, in categories, we need to do the same thing, so here in categories CD, we

171
00:12:57,230 --> 00:12:58,760
allow two categories.

172
00:12:59,240 --> 00:13:02,540
We only want to display the lazy column.

173
00:13:03,080 --> 00:13:06,710
So inside of our order, let's roll inside of our column.

174
00:13:07,010 --> 00:13:13,010
We only want to do that as long as well as soon as we have our loading done.

175
00:13:13,370 --> 00:13:18,770
So when is a loading value?

176
00:13:19,460 --> 00:13:24,800
Then we want to load UI loading UI.

177
00:13:25,520 --> 00:13:29,960
Like so now obviously, we need to pass this to our categories as well.

178
00:13:29,990 --> 00:13:35,980
So here are categories when we are creating them, we need to parse is error as well as is loading.

179
00:13:36,020 --> 00:13:41,690
So is loading, which will be of type mutable state.

180
00:13:44,170 --> 00:13:45,550
And bullion.

181
00:13:45,880 --> 00:13:47,980
So let's import beautiful state here.

182
00:13:49,380 --> 00:13:55,290
And then the same goes for is Iran, which will be a mutable state bullion.

183
00:13:57,290 --> 00:14:01,880
OK, now we can use our loading, we can use loading UI, which we need to import.

184
00:14:01,910 --> 00:14:14,210
And then in the other case, so when it's not is loading when instead it is is error value, then we

185
00:14:14,210 --> 00:14:16,070
need to load our error UI.

186
00:14:18,500 --> 00:14:25,310
And if none of those two is the case on the block, that's where we'll want to unload the lazy roll.

187
00:14:26,000 --> 00:14:26,780
So in here?

188
00:14:32,030 --> 00:14:32,540
OK.

189
00:14:32,570 --> 00:14:39,380
And now in our news app, we should get an error here at the bottom because we're not passing everything

190
00:14:39,380 --> 00:14:40,600
that we need to pass.

191
00:14:40,610 --> 00:14:48,560
So on one hand, the source here, for example, it's not getting there is loading, which is our loading

192
00:14:48,560 --> 00:14:51,860
and is error, which is our error that we set up earlier.

193
00:14:52,400 --> 00:14:53,150
So here.

194
00:14:54,340 --> 00:14:58,390
We get it from our bottom navigation here, you see, is loading and error.

195
00:14:58,570 --> 00:15:06,310
And we're just passing it to our sources, which in internally needs it to then keep on loading whenever

196
00:15:06,310 --> 00:15:07,480
we need to load something.

197
00:15:08,530 --> 00:15:11,830
So now the category itself also need that.

198
00:15:11,980 --> 00:15:16,530
So here we need to parse is error as well as is loading.

199
00:15:19,340 --> 00:15:19,790
All right.

200
00:15:20,420 --> 00:15:22,080
So that's what our categories needs.

201
00:15:22,130 --> 00:15:26,570
So if you look at our categories, you see it needs on fact category, it needs to view more, but it

202
00:15:26,570 --> 00:15:28,280
also needs as loading and error.

203
00:15:28,970 --> 00:15:31,850
So now we have set it up for all of our classes, I think.

204
00:15:32,660 --> 00:15:35,630
Now let's see if it's going to display correctly.

205
00:15:42,250 --> 00:15:42,710
All right.

206
00:15:42,730 --> 00:15:43,750
An error has occurred.

207
00:15:44,290 --> 00:15:45,190
Please try again.

208
00:15:45,220 --> 00:15:47,590
Let's see if the categories work or the sources.

209
00:15:51,770 --> 00:15:59,960
And then before we run this application and our main view model, we need to set our is loading value

210
00:15:59,960 --> 00:16:03,700
to falls, and the same goes for our IS error.

211
00:16:03,700 --> 00:16:07,520
So in our view model, we have this loading and is it wrong?

212
00:16:07,880 --> 00:16:10,070
And then there's another thing we need to change.

213
00:16:10,430 --> 00:16:17,960
And that is each time that we get something from the internet, once we were using our our call routines,

214
00:16:18,530 --> 00:16:23,440
we need to make sure that this part is, well, this is a loading value.

215
00:16:23,450 --> 00:16:31,070
Two Falls is part of the call routine because if it's down here, it will be executed basically just

216
00:16:31,070 --> 00:16:34,200
directly after it starts with this call routine.

217
00:16:34,200 --> 00:16:39,940
Not once the call routine is done, but if we put the code inside of it, it will only be executed once

218
00:16:39,950 --> 00:16:40,940
a call routine is done.

219
00:16:41,810 --> 00:16:46,960
Because that's what this call routine really does is it says, OK, I understand this thing.

220
00:16:46,970 --> 00:16:49,280
I'm going to try to do it in the background.

221
00:16:49,490 --> 00:16:51,300
Just keep on going with the next line.

222
00:16:51,320 --> 00:16:54,920
So what it would do is it would directly set this loading value to false.

223
00:16:55,460 --> 00:16:58,160
But I want it to be consequential.

224
00:16:58,170 --> 00:17:00,650
It was sequentially inside of the call routine.

225
00:17:00,650 --> 00:17:02,930
So only once this is done, I'm going to do this.

226
00:17:03,530 --> 00:17:05,270
OK, so that's what the call routine is for.

227
00:17:05,630 --> 00:17:07,730
So now we need to do the same thing here.

228
00:17:07,819 --> 00:17:16,490
We need to only only load it once we are done getting to articles by category.

229
00:17:16,490 --> 00:17:21,230
And same goes for when we are getting the article by source.

230
00:17:22,400 --> 00:17:27,530
So here I'm going to run it here and when we're getting the searched articles as well.

231
00:17:28,040 --> 00:17:30,230
So only then will I execute it.

232
00:17:30,620 --> 00:17:35,870
So at this point, let me see if this fixes everything, fixes everything.

233
00:17:36,260 --> 00:17:42,860
So, yeah, now the thing is, we can't really test it with our super, super fast internet because

234
00:17:42,860 --> 00:17:43,880
it's too fast.

235
00:17:44,300 --> 00:17:48,200
So what we can do is we can change it to edge.

236
00:17:48,500 --> 00:17:48,920
All right.

237
00:17:48,920 --> 00:17:49,820
Super slow internet.

238
00:17:49,820 --> 00:17:55,430
So let's try again if we have like super edge internet, OK, as it seems, they even have to go to

239
00:17:55,620 --> 00:18:01,970
GP3, which is like super slow because the thing is like the data that we're getting is super little.

240
00:18:02,270 --> 00:18:04,010
And that's why it's very fast.

241
00:18:04,010 --> 00:18:08,600
So if I said it to press and then I go to my application.

242
00:18:08,840 --> 00:18:10,700
So let me be a little quicker here.

243
00:18:15,070 --> 00:18:16,050
It's actually too fast.

244
00:18:16,880 --> 00:18:22,460
Even so, let me slow it down, even I'm well, let's say the signal strength is poor.

245
00:18:23,470 --> 00:18:25,210
Now, let's run it again.

246
00:18:28,450 --> 00:18:34,870
Well, it's still loading it too fast, but yeah, I just had a second where we could actually see the

247
00:18:34,870 --> 00:18:35,860
loading spindle.

248
00:18:36,640 --> 00:18:40,260
So let's see if age as I don't even know what that is.

249
00:18:40,450 --> 00:18:41,980
But yeah, let's let's try that.

250
00:18:43,120 --> 00:18:44,140
Let's run it again.

251
00:18:44,980 --> 00:18:47,350
Yeah, there you saw it for just a brief second.

252
00:18:47,680 --> 00:18:50,230
There was this little indicated as little spindle.

253
00:18:50,950 --> 00:18:55,200
So let me set it up to be like the slowest that there is GSM.

254
00:18:55,210 --> 00:18:57,850
So this must have been the internet from the 90s.

255
00:18:58,630 --> 00:18:59,790
So there was a spindle.

256
00:18:59,800 --> 00:19:02,020
Yeah, you you saw it for a second there, OK?

257
00:19:03,010 --> 00:19:09,250
So yeah, and now we have the spindle whence once there is something loading and if we should get an

258
00:19:09,250 --> 00:19:11,050
error, we're going to see an error as well.

259
00:19:11,380 --> 00:19:16,180
So overall, it seems to do what we wanted to do.

260
00:19:16,630 --> 00:19:16,930
All right.

261
00:19:16,930 --> 00:19:20,220
So that's pretty much it for our new supplication using and.