Using Svelte to Show and Hide Loading Spinner Icons

[00:00 - 00:14] Hello, welcome back. In this lesson, we're going to work on sort of a cosmetic feature, and we're going to show a loading spinner icon when we're doing network calls.

[00:15 - 00:35] So this will indicate to the users that the application is fetching some data and to kind of wait until it's done. These for the purposes of this course, we're going to use a library called Svel te Awesome, which is based on the popular open source project, Font Awesome.

[00:36 - 00:47] And one cool thing about Svelte Awesome is that it lets you import only the icons you need. So Font Awesome has hundreds of icons, but we only really need a couple.

[00:48 - 01:04] And so we'll be able to only import the ones we need, which will reduce our JavaScript and CSS bundle size, which is kind of nice as well. So we're going to start with the refresh icon, and we'll use that as a loading spinner.

[01:05 - 01:14] And to get going, we need to install Svelte Awesome. So copy that and head over to the command line.

[01:15 - 01:39] And if you install Svelte Awesome, and then restart the front end. And so wherever we want to use one of these icons, we're going to need to import the icon component itself, and then import the icon we want.

[01:40 - 01:47] So in our case, we want the refresh icon. So we're going to need both of these imports.

[01:48 - 02:00] And the other thing we're going to do with this is use Svelte Conditional Rend ering. So we're going to create some loading flags to toggle the icon on and off.

[02:01 - 02:10] So let's see it started here. We'll just show the icon above the table.

[02:11 - 02:19] So in our lunch menu admin, this is where we previously added the table there. Let's add these icons.

[02:20 - 02:32] So we've added those imports. And then what we're going to do is add icon right above the table.

[02:33 - 02:39] So paste that into there. And we'll give it a property of spin.

[02:40 - 02:48] We'll tell it what icon we want to use. We want to use a refresh, and then we'll scale it up to size three so that it's a little bit bigger.

[02:49 - 02:52] So check that out. So there's our spinner icon.

[02:53 - 03:00] And we haven't set up the conditional rendering part yet. So it's just sitting there, spinning indefinitely.

[03:01 - 03:17] OK, so what we're going to do next is use if blocks. And so we're going to say if loading show the spinner icon else show our table.

[03:18 - 03:29] So let's go ahead and add this if block. We're going to add that right there.

[03:30 - 03:41] Then we'll add the else to the table. And then at the end of the table, make sure to close that if block.

[03:42 - 03:50] OK. And we're referring to a state variable here called loading.

[03:51 - 03:57] So we need to add that variable. And we'll just go ahead and initialize it as true.

[03:58 - 04:04] So that'll cause this block to be rendered. So it'll cause our loading flag to show up first.

[04:05 - 04:23] And then inside our on mount asynchronous call, once we're done awaiting our API call, then we'll toggle the flag to false. And at that point, this felt will automatically handle the reactivity and hide the loading flag and show the table.

[04:24 - 04:36] So let's give this a try. So right here under lunch week list, we'll initialize our loading state.

[04:37 - 04:45] And then right here, once we get our data back, we'll set it to false. Now our back end is really fast.

[04:46 - 05:05] So we're probably going to very briefly see this. So when we repress the page, it's so fast that we can't hardly see it, but it is there.

[05:06 - 05:22] Now if you want to just try something, you can introduce an artificial slowdown . So we can do this new promise technique, and we could either put this on the back end in the router, or for example, we could put it on the front end.

[05:23 - 05:33] I'll just show you on the front end since we're working in there right now. So if we add this, we'll wait two seconds before we toggle this flag off.

[05:34 - 05:49] And so that should actually let us see the spinner for a second. And so that kind of simulates a two second network call.

[05:50 - 06:05] And that's a nice short lesson, but we worked on another important Svelte concept. So using if blocks to toggle loading spinners and really anything on and off the DOM.

[06:06 - 06:16] And you probably noticed just now when we were working in here, we've hard coded localhost 3000 in this API call. And so this is no good for production.

[06:17 - 06:32] So what we're going to do in the next lesson is configure roll up to provide an API root URL environment variable. And we'll externalize our configuration so that we don't have to hard code our host name there.

[06:33 - 06:34] So thank you and we'll see you next time.