# Add a \<Loading> component

One great thing about Frontity is that a lot of the content is pre-fetched into the state so page transitions are virtually instant. Sometimes, however, the content is not already in the state and Frontity must fetch it from the WordPress REST API.

Doing this is not instant. You can see this by selecting the `About Us` menu option. Depending on your network speed you may notice a slight delay and the content area of our page remains empty.

{% hint style="info" %}
If you're not noticing this delay you could try emulating a slow network connection in the network tab of your browser's Dev Tools.

Also don't forget to reload the home page so that the state is cleared and refreshed.
{% endhint %}

Whenever there's a delay such as occurs while data is being fetched it's a good idea to indicate to the user that something is actually happening, so let's add a `<Loading>` component.

Create a new file in the `components` directory and call it `loading.js`. Add the following code:

```jsx
// File: /packages/my-first-theme/src/components/loading.js

import React from "react"
import { styled, keyframes } from "frontity"

const Loading = () => <Spinner />

export default Loading

const spin = keyframes`
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
`

const Spinner = styled.div`
  border: 12px solid #eee;
  border-top: 12px solid steelblue;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: ${spin} 2s linear infinite;
`
```

As well as `styled` we also import `keyframes` from `frontity`. This function works in a similar way to `styled` and takes a tagged template literal as it's argument. See [our docs](https://docs.frontity.org/api-reference-1/frontity#keyframes) for more info.

Here we're passing in the animation frames that we want, and assigning it to a variable `spin` which we then go on to use in the `animation` property of our `<Spinner>` component.

Note that the `<Loading>` component doesn't need to access the state so we don't need to pass it to the `connect` higher order component when we export it.

Now we need to display it. Let's add it as the first item in the `<Switch>` component that's within our `<Root>` component. Remember that we also need to import the component.

```javascript
// File: /packages/my-first-theme/src/components/index.js

// ...
import Loading from "./loading"

// ...
  <Main>
    <Switch>
      <Loading when={data.isFetching} />
      <List when={data.isArchive} />
      <Page when={data.isPage} />
      <Post when={data.isPost} />
      <Page when={data.isDestinations} />
    </Switch>
  </Main>
// ...
```

Now as we transition between pages our loading spinner is displayed whenever data is being fetched in the background. Sweet! 👌

![Frontity in the browser](https://frontity.org/wp-content/uploads/2021/04/frontity-tutorial-loader.gif)

{% hint style="info" %}
By the way, our loader was based on [the one described here](https://www.w3schools.com/howto/howto_css_loader.asp).
{% endhint %}

{% hint style="success" %}
**Check you're on the right track** by comparing your changes with [the ones in this commit](https://github.com/frontity-demos/tutorial-hello-frontity/commit/dd7463b3b3d79c23cba7a1763d5fb23af64936fd).
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tutorial.frontity.org/part7-finishing-touches/add-a-loading-component.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.