Loading States

[00:00:00]
>> The kind of last of the many different kinds of use cases that we've been just chatting about over the course of our time together which is like just how hard it is to show a loading indicator when you think about the edge cases, right? If it's your first loading indicator, yeah I show the loading indicator and then I take it down.

[00:00:23]
All right it's one of those things where it's like a fast API is almost the bane of your existence when it comes to implementing a loading indicator, right? Because what you don't want is like a flash of sadness, right? Where especially cuz the thing I work on the portal now, is we have two versions we have a cloud version and we have a open source version you run locally on your machine.

[00:00:46]
We tell you about network latency when it's running on your machine. Real fast let me tell you it's the same UI for both right and so dealing with the idea that you could have a normal API and then a lightning fast API creates a certain number of problems.

[00:01:02]
So, what we're gonna try to do here is we're going to kinda create a fake API response that we can kind of control via this number of milliseconds. We will choose when we want to show a loading indicator cuz again, if it's back real fast, we don't immediately show one then immediately take it down.

[00:01:24]
All right, that's the first edge case. So you wanna deal with the loading indicator. The second one is you can by solving for the I only wanna show the loading indicator if things have been loading for a second, you introduce a new problem. Which is you've just moved your problem forward in time, which is what happens if you show the loading indicator after 1,000 milliseconds.

[00:01:45]
And the data comes back 1,001 milliseconds, right? You're back to your flash of sadness. Sometimes, what we should do in this case is we lie. We lie to our users, we say it's still loading just simply so that we don't flash things and make them uncomfortable, maybe we'll keep it up for what seems just a little, maybe can start loading the data if you want.

[00:02:08]
But like don't just flash and take it down, be gentle with it. So we have the ability for how long it should take, how long we wanna wait until we show a loading indicator and how long that loading indicator should be up for, right? And again, a lot of this is based on the feeling basically you for these values, you tend to adjust them until everyone is happy.

[00:02:35]
But yeah, there's no hard and fast rule, but I'm also not a designer. So we've got the three fields, we've got whether or not we should show a loading indicator, we've got the form itself and we've got this little fake fetch data which I'll show you real quick.

[00:03:02]
It looks at the response time, it logs that it's fetching, it waits however long our fake API request is supposed to wait, and then it just logs to console that it's done and then it completes, right? There's no actual data to show in this case. I could also map it to some fake data if I really wanted to, but this is basically it simulates something that takes however long we have in that top input field.

[00:03:29]
Show loading takes the shows you this really neat loading indicator or nothing at all. I'm basically in this case, making sure we don't accidentally submit the form. And then we've got some cached pieces. All right, so let's start with just the simplest version of this, just to make sure everything works as we expect.

[00:03:54]
So we'll say loading. We'll see say that is from the event when they form, submit and when that happens, pipe it, will tap show loading is true. Just verify that everything works as expected. I put a semicolon in there, when should be a comma. I will say loading.subscribe.

[00:04:27]
I tend to write the domination in the tab because then like, I'm not all the things that happen are contained in there, it's not like cool. Everything happens, like you're putting it there taken down but then the last thing happens subscribe. I don't wanna deal with that. So, we'll say subscribe and now this should when I hit the button.

[00:04:52]
Let's see. Here we go shows loading indicator and this also logs that we're not loading. So now, what we wanna do is show it, load our data, take it down, right? That's the kinda next obvious thing to do here. So, we'll show it, And then in this case, because I was robbed of using an exhaust map in the last example, I'm gonna use my exhaust map.

[00:05:27]
Mostly because this is also a fake situation where they slam on that button, let's see what the time, so let's start a new one over again. Why someone would slam on a button in this case, I don't know. But we'll do that. So we'll see an exhaust map where we will return fetching the data.

[00:05:49]
I could probably do that in line as well. But we're gonna play around with it a little bit. So we'll show the data, we will show the loading, we'll fetch our data and then we will all take down a loading indicator, right. Again this is a naive version for now, and we'll deal with all the edge cases shortly.

[00:06:08]
All right so then, show loading, False, okay. Like this should do the thing. Fetching for five seconds and that takes it down. That works for the happy path, right? When your requests all take five sec, I can't believe I just called that the happy path. When your API's all take at least five, listen, we've all worked API.

[00:06:37]
So take 30 seconds, don't act like you haven't. But even sometimes what I would do for an API that took five seconds, even though it's suboptimal. Okay, like that's cool, but like, what if we wanna delay that we talked about like delay in that loading indicator a little bit.

[00:06:57]
And so what would that look like in this case? Well, there's a few ways that we could do it. We could create like an observable. And like sometimes if I just wanna delay something and tap I could timer it. I'm just gonna create one real quick and then five but I couldn't even yeah would complete at that point.

[00:07:26]
Let's not deviate right now, will delay it for whatever show loadings value is. And then we will tap. So this one will get it and it will basically delay for that amount of time and then it will show it. So what would this look like? Well, now what we could do is this an exhaust map.

[00:08:06]
What we could say is, Can cut, my show loading. And then we'll go fetch the data. Now, what do you think the problem is here? We're basically show the loading after a second and then we're gonna go fetch the data, right? So this is building towards the answers to our problems, but it's not.

[00:08:42]
It's not there just yet. So wait a second. Cuz then we immediately take that off for a second. We could do is cut it. Well let's make a high loading. Right this is not gonna work as we expect. We'll talk about that in a second. I mean, it was gonna work as we expect, it's not gonna work.

[00:09:32]
So we wanna do is concatenate show it, fetch the data, hide it. These are delayed so we're gonna need to do is figure out the kind of the different situations that we need to deal with okay like what happens if the data comes back before we even show the loading indicator right?

[00:09:49]
We're gonna need to time some of these and all like let's do a spoiler alert, do we have a operator that sees which one of these things does the thing first, brace, right? So that will ultimately be a thing that we look at. But let's see it in its not great state first shows up every second we fetch that is back and we have to call that false.

[00:10:19]
>> And then I think that on the show loading needs to be true.
>> Yep, I was talking and typing at the same time and swap those the wrong way. Cool, shows it fetches gets the data back takes it down, like not terrible, but the idea that we even delayed for a second before fetching the data, that's one way to lie to your users.

[00:10:48]
We try to lie gently, we don't like tell egregious lies that hinder performance, we're just trying to protect them.