Suspense Exercises

Let's get some practice with Suspense! All of the exercises on this page use the same project:

Vapor Games

Let's suppose we're building a game manager. As it stands, the user faces a blank white screen until the content has loaded:

Your mission is to update the code so that a placeholder UI is rendered while the data is being loaded:

To help you on this quest, you've been given a helper component, LibraryGameCardSkeleton. You can use it to create a loading state.

A range function has also been provided in /src/utils.js.

Acceptance Criteria:

When the games data is loading, 12 LibraryGameCardSkeleton elements should be rendered in the place of the current LibraryGameCard elements.
The “15 games in library” paragraph can be omitted from the loading state.

The relevant route for this exercise is /src/app/01-vapor.

Solution:

Solution code (success)

The solution I showed in the video involves creating the following loading.js file:

import React from 'react';

import { range } from '@/utils';
import LibraryGameCardSkeleton from '@/components/LibraryGameCardSkeleton';

async function VaporLoading() {
  return (
    <section className="max-width-wrapper">
      <header className="library-header">
        <h1>My games</h1>
      </header>

      <div className="game-grid">
        {range(12).map((num) => (
          <LibraryGameCardSkeleton key={num} />
        ))}
      </div>
    </section>
  );
}

export default VaporLoading;

As I mentioned in the video, this solution does have one potential gotcha: there's quite a bit of repeated markup between the page.js and loading.js files.

We can solve this by creating a new ArticleWrapper component, which collects that shared UI. You can see the code for this approach on Github:

Vapor alternative solution (opens in new tab)

Artist Interview with Comments

In this exercise, a comments section has been added to our “Artist Interview” application:

Unfortunately, it takes a few seconds to load these comments, and right now, that process is blocking the page from loading. Once again, your mission is to use Suspense to improve the loading experience.

You can use the provided <Spinner> component as a loading state:

Acceptance Criteria:

The server shouldn't wait for the comments before sending the first chunk of HTML.
A spinner should be shown as the fallback for the comments.

The relevant route for this exercise is /src/app/02-interview.

Solution:

Small correction: Since we're moving the async work to a new Comments component, the parent InterviewExercises component doesn't need to be async anymore. This change has been applied to the solution code below:

I used to work for a company called Gatsby Inc, creators of the Gatsby.js framework. I spent some time working on the gatsbyjs.org homepage, and I was surprised to learn that the site's main navigation was loaded from Contentful, a :

Screenshot of the Gatsby homepage, with an annotation pointing at the main navigation which reads “These links were loaded from a CMS”

This approach makes a lot of sense. It empowers the marketing team to make changes to the site's navigation without having to pester a developer. They edit the links in Contentful/WordPress/Sanity/whatever, and the website updates automatically.

In practice, what this means is that we no longer have the navigation links hardcoded in the JSX. They need to be fetched from the CMS.

In this exercise, we'll work on a landing page for a fictional Platform-as-a-Service company, WebBase:

Your mission is to use Suspense to improve the page-load experience. Specifically, the initial HTML should not include any navigation links, in the header or the footer:

The relevant route for this exercise is /src/app/03-web-base.

Acceptance Criteria:

The initial HTML should be sent immediately, without waiting for the getNavLinks method to complete.
In the server terminal, a message is logged twice on every request, Requesting navigation links from CMS. This message should only be logged once per request.

Solution:

Suspense Exercises

Vapor Games

Artist Interview with Comments

WebBase CMS Navigation