Handle Loading State with Remix useTransition
Slow networks can be debilitating to your applications. Right now, our application doesn't handle slow networks at all. To help with this, Remix has the transition state to show the user that we are making network requests and working on things.
In this application, we are going to use useTransition to check if we are currently submitting a request, like making a new post.
Kent C. Dodds: [0:00] If we create a new post and we're on a really slow network, we're not going to have the best experience. Let's slow our network down to a 3G connection, and we're going to make a post called The GT Rocks. The-gt-rocks is going to be our post slug. This thing can go forever because its battery is huge. Now watch closely when I hit Create Post.
[0:25] We don't get an indication that it is responding to us. We need to give some sort of feedback to the user that a post is indeed being created. What we're going to do is hook into Remix's transition state so that we can let the user know that we are responding, we are making network requests and things so they can just hang tight while we create the blog post for them.
[0:50] What we're going to do is, get what's called a transition from Remix, useTransition. This is going to come from @remix-run/react. Then we can determine whether a transition is happening due to a form submission by simply accessing the transition.submission.
[1:09] This submission has a bunch of things on it like the formData, the action, and all sorts of things we can use to determine whether the submission is for this particular form. For us right now, we're going to say that, if there's a transition and it has a submission on it, we're pretty confident that this form is the reason that we're making this transition from one page to another.
[1:31] We can base our isCreating state off of that. We'll say, isCreating. We'll booleanify this thing. If that thing exists, then we know we're in a creating state. Then we'll come all the way down here to our Create Post. We'll say if we're in a isCreating state, we'll say Creating. Otherwise,
[1:49] If is creating state, we'll say creating. . . Otherwise, we'll say, Create Post. We'll also add a disabled prop on this button to say isCreating because we've already got our disabled styles here. With that now, if we come back over here, let's refresh, slow this thing down, get rid of all of that.
[2:05] We'll say the Pint X four travel, the-pint-x-for-travel, "Too bad, it's too big for plane travel," which is a shame. Now, if we click on Create Post, we're going to get Creating. . ., so we're getting some feedback to the user. We're disabling the buttons, so they can't submit it again. Then we get redirected to the post admin.
[2:32] In review, the way that we add some pending UI is we simply bring in useTransition, which is coming from @remix-run/react. That is going to tell us about all the transitions that are happening on the page, whether it be from form submissions or link clicks.
[2:46] We're going to determine whether we're creating based on whether there is a transition that has a form submission as a part of it. Then, we're going to use that to determine whether to include disabled and what the submission button should actually say.
[3:01] If there is any errors of any kind, then this will get rolled back for us automatically. If we come over here, create a new post, and we slow all this down again or we're still slowed down, we say create post. It's going to say Creating. . . When the errors come back, it is no longer in a creating state, and we can see and fix our errors.