skip to Main Content

WordFlix – Single Page App tutorial: Step 11 – Loading Screens

Post Series: WordFlix – Super Powered Single Page App Tutorial

Step 11 – Starting Point

  • If you followed the previous steps of the tutorial, you should be able to continue here, but if you’re just jumping in or got lost in the last steps or just want to skip ahead, you can either check-out this branch of the Github repo or change directories to the “11” theme (wp-content/themes/11)

 Create LoadingScreen component

It’s pretty common in Single Page Apps to provide some valuable feedback to the user when things are loading. Apollo provides us with a “data.loading” prop that is true if data is fetching.

We currently are setup to just render a <div> with the word “Loading…” when Apollo indicates that a component is Loading, but it might be nicer UX to show a loading spinner.

So, let’s create a new file “/components/LoadingScreen.js” with the following content:

import React from 'react';
import styled from 'styled-components';
import { Spin } from 'antd';

/**
 * This is the container that holds the spinner when the page is loading
 */
const LoadingWrapper = styled.div`
  display:flex;
  height:calc(100vh - 60px);
  align-items: center;
  justify-content: center;
`;

const LoadingScreen = () => {
  return(
    <LoadingWrapper>
      <Spin size="large" />
    </LoadingWrapper>
  );
}

export default LoadingScreen;

Here we create a very basic component that creates a Styled Component wrapper and renders the Spin component from Ant Design.

Add the LoadingScreen to our MoviePage and MoviesPage

In our MoviePage and MoviesPage components, where we currently have:

return <div>Loading...</div>;

Import the new LoadingScreen component:

import LoadingScreen from './LoadingScreen';

And replace the above loading output with:

return <LoadingScreen/>;

Now we have loading spinners to show the user that something is happening as data is being fetched. Awesome!

Leave a Reply

Share This
Back To Top