Welcome back.
So at the beginning of the restructuring, we created a loading variable in the main view model, which
we have not collected from the UI.
We'll see how it can help us manage to request when it's in the loading state.
So whenever we click on something, you see there is a little bit of time it takes until this data is
loaded.
So this depends on your internet connection, for example, maybe also on the speed of your phone and
so forth.
So this is something obviously also on the news API.
So how quickly they will be able to provide the data and so forth.
So this is something that I want to make sure that we see that there is something happening where we
see a little loading spindle or a progress indicator that says, Hey, there's something happening in
the background.
So let's check it out.
So let's go ahead and create a file in our components package, in this file, we're going to create
a composable.
Which will be loading the UI.
And it's just going to be a box.
Let's import box here with a modifier where I'm going to say that it should filled the max size.
So modifier fill max.
Well, fill max size this one here, as well as the content alignment, should be set to alignment center.
So I want this to be displayed in the center, all aligned into the center.
So the content of it and then we need to have content for this to make sense.
So let's just use something called circular progress indicator.
So this is another composable which will just display a little progress composable.
So now let's do the same thing for an error.
Why?
So whenever there's an error, it should display the error UI.
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
composable, obviously.
So let's add composable here.
And it should instead of displaying this cycle of progress indicator, it should display a text and
let's import text here, and that text should be an error has occurred.
And please try again later.
Something like this.
All right, and what's wrong with the Kurds?
OK, they are.
All right.
So this will show a text as an error message in the middle of the screen when there is an error.
So now we need to set the state.
So in our main view model, Katie, we already create a certain getter for loading state and setting
the value.
True, before launching to view model scope.
So let's add the following code to our Arrows state as well.
So we have this is loading and we see here is loading.
And now we need to have the same thing for our arrows state.
So we just do that.
And I'm going to say is error, which will also be will be a mutable state flow and is error is going
to be of type state flow, which I'm going to set with the getter.
We could also do it like this.
Get this going to be an is error here or on the score is error.
So this one here, so when we're getting, we're getting this is arable was setting.
We're setting this public is a say state.
So now we need to catch any error that occurs while the request is being processed.
This will be generic and can be improved.
So the quarantine helps to manage exceptions using quarantine, exception handler.
So let's go ahead and set such an error handler up, so well, error handler, which will be a cold
routine exception handler.
This one here where I'm just going to get an error.
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.
OK, so that's what the exception handler gives me.
It gives me a cold routine context and the thrall.
So I'm just going to work with the Froebel and I'm going to check if the error is an exception.
And if that's the case, then I'm going to set the error value to be true because his error, if you
recall some mutable state flaw of type Boolean.
All right.
And while this is error without the underscore, is a state of type Boolean.
So this will be our error handler.
And now in our get top articles, for example, when we are launching our call routine, we can all
use this.
OK, so here we're going to use our dispatchers Io, plus our error handler, so we can just do it like
this.
We could just add this error handler with a plus here.
So since we are using a call routine for processing the request we can use to call and see an exception
handler as the attached was attached to our dispatchers.
And we can do that now for all of them.
So we do that, you get articles by category.
So let's add our error handler here as well.
Then good article by where's that here?
Source.
So let's add our error handler in there as well.
So now in our top news.
That's the Swan here.
Top news, Katina, not this one, top news.
K t file in this one here would create the loading state and Arab state as a parameter.
So let's add that in here.
I'm going to say is error, which will be a mutable state of type Boolean.
And then when would that appear?
So in this else blog or after this blog, what we can do is when it's loading that value.
And what do we get this is loading from?
And where's this loading coming from?
Well, actually, let's also pass it here.
So is loading is going to also be a mutable state of immutable state of a Boolean that we need to pass
to our top news?
OK, now we can use this loading and then we can use his error.
So when his error value, then load the error UI.
And otherwise, and this is the area why we need to import that and otherwise.
So if none of that is the case, so here else that is where we want to load this lazy column, OK,
because otherwise we don't want to load it.
We only want to load it once.
It's not loading.
So once the loading period part is over, that's when lazy columns should be loaded, which will be
this this lazy column, for example, or this one here?
All right, so now in our news up.
And you said, Katie, yeah.
Here you will find the.
Now we get an error here at the bottom right.
So here are composable with the NAF Graph bowler isn't very happy, so we need to pass is loading here
as well.
So is loading, which will be a mutable state of Boolean.
As well as his error.
Which will be a mutable state of bullion.
That's what we're passing.
And now we can use them in our composable here.
So now I can said is loading to be is loading and is error to be is error.
So whatever we're passing will be the values of our top news, because our top news, as you recall.
That's where we added those two, right?
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
need to collect it and specifically in our navigation up here.
So here we need to collect our loading variable.
So file loading by view model that is loading to collect as state.
And we too important for it to work.
And we need to do the same thing with the Arrow.
So while arrow by view model that is error thought collect as state.
Accordingly, we need to set those so here after our query, state inside of our NAF host here we can
go ahead and set our is loading or create is loading, which will be the mutable state of our loading
variable.
But we just set up here.
So this one that we get from is loading from our view model because our view model has the is loading
parameter, right?
So that's the state flow that we have set up and we're using all the time with is loading value and
so forth, right?
So we're setting the value each time that we are lowering something to true and when we're not loading,
we're setting it to false.
But on our news app.
We can use it.
So here I've set up, it's loading.
Now I need to set up this as well.
So ball is error will be also mutable state of error.
All right.
And now we can pass those to our bottom navigation because you see here we're getting an error because
we're not passing it.
So let's pass those two values.
So is error will be or is error just prepared?
So the error of our bottom navigation and the is loading will be the is loading.
So you see, I'm using a different order, but that's fine as long as I'm using named parameters.
All right, now, our sources
and its sources, Katie needs to get the error.
So here we are passing the view model so far, but wouldn't it need to pass?
Is loading in this area here?
It's loading, which will be a mutable state of a Boolean, and we need to do the same thing for his
error.
So his error, which will be immutable state of a Boolean as well.
OK.
Like this.
And now, accordingly, we can use it inside of our sources, so further down here.
Inside of this it's statement.
So here.
Instead of our top bar and the scaffold of our sources, so this is the source page, right?
So here we can say when we are loading.
So when is loading is value or when is loading spell you this true?
Then load the UI.
So loading UI and then else, if Arrow is the case, so is his error of value, then load the error
UI and retain portals.
So error UI, as well as loading UI, that's important too.
And then otherwise in the alts blog, that's where we want to run all of this.
Like this, and here we need to add terror.
Order arrow, not the arrow.
All right.
Now, at the same time, in categories, we need to do the same thing, so here in categories CD, we
allow two categories.
We only want to display the lazy column.
So inside of our order, let's roll inside of our column.
We only want to do that as long as well as soon as we have our loading done.
So when is a loading value?
Then we want to load UI loading UI.
Like so now obviously, we need to pass this to our categories as well.
So here are categories when we are creating them, we need to parse is error as well as is loading.
So is loading, which will be of type mutable state.
And bullion.
So let's import beautiful state here.
And then the same goes for is Iran, which will be a mutable state bullion.
OK, now we can use our loading, we can use loading UI, which we need to import.
And then in the other case, so when it's not is loading when instead it is is error value, then we
need to load our error UI.
And if none of those two is the case on the block, that's where we'll want to unload the lazy roll.
So in here?
OK.
And now in our news app, we should get an error here at the bottom because we're not passing everything
that we need to pass.
So on one hand, the source here, for example, it's not getting there is loading, which is our loading
and is error, which is our error that we set up earlier.
So here.
We get it from our bottom navigation here, you see, is loading and error.
And we're just passing it to our sources, which in internally needs it to then keep on loading whenever
we need to load something.
So now the category itself also need that.
So here we need to parse is error as well as is loading.
All right.
So that's what our categories needs.
So if you look at our categories, you see it needs on fact category, it needs to view more, but it
also needs as loading and error.
So now we have set it up for all of our classes, I think.
Now let's see if it's going to display correctly.
All right.
An error has occurred.
Please try again.
Let's see if the categories work or the sources.
And then before we run this application and our main view model, we need to set our is loading value
to falls, and the same goes for our IS error.
So in our view model, we have this loading and is it wrong?
And then there's another thing we need to change.
And that is each time that we get something from the internet, once we were using our our call routines,
we need to make sure that this part is, well, this is a loading value.
Two Falls is part of the call routine because if it's down here, it will be executed basically just
directly after it starts with this call routine.
Not once the call routine is done, but if we put the code inside of it, it will only be executed once
a call routine is done.
Because that's what this call routine really does is it says, OK, I understand this thing.
I'm going to try to do it in the background.
Just keep on going with the next line.
So what it would do is it would directly set this loading value to false.
But I want it to be consequential.
It was sequentially inside of the call routine.
So only once this is done, I'm going to do this.
OK, so that's what the call routine is for.
So now we need to do the same thing here.
We need to only only load it once we are done getting to articles by category.
And same goes for when we are getting the article by source.
So here I'm going to run it here and when we're getting the searched articles as well.
So only then will I execute it.
So at this point, let me see if this fixes everything, fixes everything.
So, yeah, now the thing is, we can't really test it with our super, super fast internet because
it's too fast.
So what we can do is we can change it to edge.
All right.
Super slow internet.
So let's try again if we have like super edge internet, OK, as it seems, they even have to go to
GP3, which is like super slow because the thing is like the data that we're getting is super little.
And that's why it's very fast.
So if I said it to press and then I go to my application.
So let me be a little quicker here.
It's actually too fast.
Even so, let me slow it down, even I'm well, let's say the signal strength is poor.
Now, let's run it again.
Well, it's still loading it too fast, but yeah, I just had a second where we could actually see the
loading spindle.
So let's see if age as I don't even know what that is.
But yeah, let's let's try that.
Let's run it again.
Yeah, there you saw it for just a brief second.
There was this little indicated as little spindle.
So let me set it up to be like the slowest that there is GSM.
So this must have been the internet from the 90s.
So there was a spindle.
Yeah, you you saw it for a second there, OK?
So yeah, and now we have the spindle whence once there is something loading and if we should get an
error, we're going to see an error as well.
So overall, it seems to do what we wanted to do.
All right.
So that's pretty much it for our new supplication using and.