Simulating blocking UI
Before we learn about the Transition Hook, let’s first introduce the problem that it attempts to solve: blocking UI. When certain components are computationally intensive, rendering them may cause the whole user interface to be unresponsive. This can result in a bad user experience, as users cannot do anything else while the components are rendering.
We are now going to implement a comment section in our blog to simulate blocking UI.
Implementing a (purposefully slow) Comment component
We start by implementing a Comment component, which we make slow on purpose to simulate a computationally expensive component.
Let’s get started implementing the Comment component:
- Copy the
Chapter07_1
folder to a newChapter07_2
folder by executing the following command:$ cp -R Chapter07_1 Chapter07_2
- Open the new
Chapter07_2
folder in VS Code. - Create a new
src/components/comment/
folder. - Create a new...