This video is available to students only

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 svelte-awesome.

Svelte-awesome is a Svelte component library based on the popular open-source project Font Awesome. With Svelte-awesome, you have the opportunity to import only the icons you need, which reduces the JavaScript and CSS bundle size of your application.

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 <div class="section">.

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.

loading-spinner

Conditional Rendering#

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.

 

This page is a preview of Fullstack Svelte

No discussions yet