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.

xxxxxxxxxx

$ npm install svelte-awesome

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:

xxxxxxxxxx

<script>

  ... other imports

  import Icon from 'svelte-awesome'

  import { refresh } from 'svelte-awesome/icons'

  ...more code

</script>

​

<div>

    <nav class="breadcrumb" aria-label="breadcrumbs">

    <ul>

      <li>

        <a href="/">Home</a>

      </li>

      <li>

        <a href="/admin/manage-menus">Lunch Menu Administration</a>

      </li>

      <li class="is-active">

        <a href="/#">{$user.schoolName}</a>

      </li>

    </ul>

  </nav>

    <!-- ADD THE ICON HERE UNDER A SECTION DIV -->

    <div class="section">

      <Icon spin data="{refresh}" scale="3" />

    </div>

    <table class="table">

      <thead>

    ....more markup