Sam Landfried

Load Screens in React

Sam Landfried | Jun 04, 2018

How do you create a load screen in React?

Load screens provide a visual indicator to users that data is being fetched and a useful reminder that the app isn’t frozen. They also can prevent unwanted user interaction with your site. This screencast walks through building a simple load screen in React that will improve user experiences.

Supported Links:

Create React App on GitHub

Subscribers Only

Transcripts are for subscribers. Create an account today to access our collection of screencasts, skill packs, and more.

Subscribers Only

Project files are only available for subscribers. Create an account today to access our collection of screencasts, skill packs, and more.

Need Help?

If you get stuck, try starting a discussion with Big Nerd Ranch experts in the community tab.

Related Screencasts

Explore other screencasts related to this topic.

Testing in Node - Basics

8 minutes

The options available to the Node developer setting up testing for the first time can be overwhelming. There are several tools to choose from, and they can be configured in multiple ways.

Testing in Node - Integration Testing (Part 1)

8 minutes

Integration tests describe a server’s overall behavior and capabilities. These tests can quickly expose failing systems, help developers isolate bugs and make server-sized refactors safer. In this screencast, we’ll show you how to configure the Chai HTTP extension with the existing test suite for the Chattrbox app.

Testing in Node - Coverage

6 minutes

Testing code creates more reliable and maintainable applications. When adding tests to an existing codebase, test coverage reports can help expose which parts of the app are untested. When creating a new test suite alongside a new app, test coverage reports can help guide the creation of valuable tests.

Testing in Node - Integration Testing (Part 2)

6 minutes

Integration tests describe a server’s overall behavior and capabilities. These tests can quickly expose failing systems, help developers isolate bugs and make server-sized refactors safer.

Testing in Node - Stubs and Spies

7 minutes

Testing code creates more reliable and maintainable applications. It’s not always a straightforward process, though. Stubs and spies give us more control of what we can test and how our code behaves when we test it.

HTML5 Drag and Drop

8 minutes

Improve user experiences on your web site by adding drag and drop functionality without any external libraries or frameworks. The Drag and Drop API is part of the core HTML5 spec and allows developers to make their sites more interactive and natural. In this screencast, we'll help you build an HTML5 Drag and Drop tool.