Showing Loading Spinner Icons
Using Svelte to Show and Hide Loading Spinner Icons
Loading Spinner Icons#
To improve our user experience, we can toggle loading icons while the Svelte client-side application is making network calls. For the purposes of this course, we are going to use a library called
We'll start with the
refresh icon as our loading spinner, but we will probably use more icons later to make the application more intuitive.
To get going, install
svelte-awesome in the frontend project.
Then we need to import the main
Icon component and the required icon and add the markup to the template.
Try it out by putting the
refresh icon above the table in the
LunchMenuAdmin component. We can add the
spin property to make it an animated spinner and add
scale="3" to make it bigger. To give it a little padding, we wrap the
Icon component with a
Here's an abbreviation of what to do:
This gives us a nice spinner icon. It's not perfectly centered above our table, but we'll deal with this later.
To show and hide things in Svelte, we use if blocks. In the case of our loading spinner, we need a boolean property
loading to use as the condition of the
if block: if loading, show the spinner, else, show the table.