This course teaches all the major concepts you need to build a production ready SaaS application by step by step _building a fully functional application_. The course is divided into two main parts - the _frontend_, which uses Svelte to build an interactive, rich user interface and the _backend_, which uses Express and PostgreSQL to build a server that handles data management.

Svelte is an exciting new frontend UI framework that offers a very developer friendly workflow and easy to learn syntax. Express and PostgreSQL are tried-and-true technologies that provide a rock solid backend.

Across about 7 hours of video instruction with full source code, this course covers everything from setting up your development environment to securing your application with a multi-tenant architecture and ultimately deploying the application to production.

Build a Svelte app with Node.js, Express, and Postgresql

In this course, we'll be creating a full stack SaaS application with Svelte, Express and PostgreSQL

Fullstack Svelte

---
title: Using Svelte to Show and Hide Loading Spinner Icons
description: Using Svelte to Show and Hide Loading Spinner Icons
privateVideoUrl: https://fullstack.wistia.com/medias/v9lfk8jgjl
isPublicLesson: false
code: https://gitlab.com/fullstackio/books/newline-course-apps/blair-googer-fullstack-svelte-app/-/tree/main/code_postgres_(author_original)/module_05/lesson_03/App
---

### 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](https://github.com/RobBrazier/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.

```shell
$ 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:



```html
<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>
    
    <div class="section">
      <Icon spin data="{refresh}" scale="3" />
    </div>
    <table class="table">
      <thead>
    ....more markup
```

This gives us a nice spinner icon. It's not perfectly centered above our table, but we'll deal with this later.

![loading-spinner](https://d2uusema5elisf.cloudfront.net/courses/fullstack-svelte/module_06/lesson_06.03/public/loading-spinner.png)

### Conditional Rendering

To show and hide things in Svelte, we use [if blocks](https://svelte.dev/tutorial/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.

Using Svelte to Show and Hide Loading Spinner Icons