a conditional. Let's make it gray. Large is fine. Let's make sure to import that. Okay, and let's see how that looks. Okay. Let me just add a margin-top on it, so let's say margin-top: 8, okay, and that's fine. So now we want to load this conditionally, so let's add a ternary here. So let's say isLoading, which we'll add in a second, as a piece of state. So if it's loading, then go ahead and render this ActivityIndicator, okay, but if it's

So let's say isLoading, which we'll add in a second, as a piece of state. So if it's loading, then go ahead and render this ActivityIndicator, okay, but if it's not, then go ahead and load the FlatList. So let's close that out here, after our FlatList, and let's add the curly, okay. So save that, and let's add our isLoading state. So back up here, let's duplicate this, let's say isLoading, setIsLoading, and by default, let's make it true, since when the screen loads, it is in a loading state, and then once our Axios call resolves, we can set it to false. So right here, let me just get rid of this, actually, let me leave that for now. So setIsLoading, false, and same for the error case, okay.

So right here, let me just get rid of this, actually, let me leave that for now. So set isLoading, false, and same for the error case, okay. So now we can see the Loading Indicator, and then it disappears when the data is loaded. Not sure what this warning is, let me just try reloading again, okay, so that warning is gone. So now, for pullToRefresh, we just have to add two props on our flatList. So let's go to the flatList, let's add it after this one. So the first prop is called refreshing, and we'll assign this to a piece of state called isRefreshing, which we'll make in a second, and the other one is called onRefresh, and this will call this method that we assign it when we refresh, or pullToRefresh.

isRefreshing, which we'll make in a second, and the other one is called onRefresh, and this will call this method that we assign it when we refresh, or pullToRefresh. So let's call it handleRefresh. So let's add that piece of state, similar to isLoading, but it now isRefreshing, okay, and this will be false by default, and let's set it, actually, let's make our method first called handleRefresh, we'll put it after this, handleRefresh, let me just move this up, and what we're gonna do in here is set that piece of state, so set isRefreshing, it's gonna be true here, and then we wanna call this getAllTweets method to refetch the data from the server, so getAllTweets, and now we can set isLoading, or sorry, isRefreshing to false here, okay, and same for the error case, okay.

the server, so getAllTweets, and now we can set isLoading, or sorry, isRefreshing to false here, okay, and same for the error case, okay. So that should be it. If I pull down on the app, we get the activity indicator, and the app does refresh. So let's just do a test here, let me open up my database, let's add a new tweet here, let me just say userId one, this is a new tweet, create that now, update that now, okay, back to our app, if I pull to refresh, we should see that new tweet at the top. And we do, cool, there it is. So yeah, pretty straightforward, the FlatList already has this functionality built in, so we can easily make use of it.

So yeah, pretty straightforward, the flatlist already has this functionality built in, so we can easily make use of it. In the next video, we'll take a look at another pattern, which is infinite scroll, so as we scroll down, new tweets get loaded. So let's stop this, let's make a commit, as always, I only made changes to the front end, so that's good, we can get rid of the sleep here, maybe we'll put it back in the next video when we work on infinite scroll, but we can say git commit, pull to refresh.