Activity Indicator

[00:00:00]
>> Kadi Kraman: And actually, one thing that I wanted to show you that I didn't add initially in the example app is that, when we reload we actually get this little, so this is like an overdue state. But when we open it it's initially white and then it flicks to the red state.

[00:00:18]
And the reason that's happening is because we are using use effect to asynchronously fetch from storage, but the initial state that we have is that it is not overdue, so it's like this default state. And this normally isn't a problem because this method of using asyncStorage, so this is how it works kind of under the hood.

[00:00:40]
And it's useful to know that this is how it works, but in usual production applications you would use a state management library, which will then handle the fetching for you. And then you can keep your splash screen up while you're fetching, and things like that. But in our case, we can actually do something simple and just show a loading spinner while things are being fetched so we wouldn't get this flicker.

[00:01:06]
So I'm gonna just quickly show you how you might do that. So in your app native, you have this built-in component, it's called an activity indicator. [COUGH] Just before I return, I'm going to just to show you, do a view and render the activity indicator in there. So this is what it looks like, let me just style it a little bit better.

[00:01:38]
So styles, activityIndicatorContainer, that was a long style name.
>> Kadi Kraman: So let's give it a background color of white.
>> Kadi Kraman: And let's to justify a content center and an item center and a flex 1, we do recognize styles so much, so just to go through them, because it's such a common thing.

[00:02:19]
So flex 1 says, make this container fill the entire size of the parent.
>> Kadi Kraman: And then justifyContent center says, center this item in the parent. So if you've ever used justifontent center and it's not centering, it's because you haven't done the flex1. So the container isn't even as big as you were expecting.

[00:02:54]
So I have written these three styles about a billion times in my life I think, and I think that is it. So okay, so what we can do now is we can add another useState to whether or not we are done fetching our initial state. So let's just say is loading and set is loading.

[00:03:20]
There'll be a useState, and it will start with true.
>> Kadi Kraman: And in our useState where we set the initial count as state, let's also do setIsLoading false.
>> Kadi Kraman: Here in our return, we can do if isloading, we can return early out of our function. And do this little full screen loading thing.

[00:03:57]
>> Kadi Kraman: [COUGH] I've forgotten there is one more thing. So it's actually, it's not ready until we have set this use effect, mm-hm. Okay, so actually, it's finished loading when the first interval has been set. This is interesting.
>> Kadi Kraman: It's always tricky when you have initial state, as well okay, let's put the letter that is loading here.

[00:04:30]
So if there is a last, be a timestamp.
>> Kadi Kraman: Okay, so would that work?
>> Kadi Kraman: Okay, so this does work it actually wouldn't work now with the initial load because if we didn't have a last completed timestamp, then it would load forever. We can add some additional handling to this, but I'm not going to do it right now.

[00:05:13]
I think the idea was to show that you could do like a full screen loading state and this is what and that does.
>> Kadi Kraman: Okay, CountDownStatus so let's actually put it in here. So let's put the isloading in the CountDownStatus. Would that make sense yes?
>> Kadi Kraman: Okay, we actually needed two parameters here.

[00:05:52]
This is what happens when you add things to your course that you weren't planning on. But it's interesting, okay, so we actually have two statuses here. So we have whether we've fetched it from storage and then whether we've actually set this interval.
>> Kadi Kraman: So in our CountDownStatus, we have isloading to whether it's been fetched from start.

[00:06:17]
So let's do that I do wanna get this right?
>> Kadi Kraman: I guess so I'm gonna call this, okay and then,
>> Kadi Kraman: We call an axis, these from here.
>> Kadi Kraman: I'm gonna leave it as is for the time being, so this will work if you've had at least one time you've pressed this button.

[00:06:54]
>> Kadi Kraman: All right, and make sure that it works on my phone.