Interactive UI Transitions

[00:00:00]
>> Brian Holt: So transitions, these next three, they're actually somewhat similar, just kind of in goals, but they all have to do with perceived performance that we're actually not going to make React more faster, right? We're gonna make it so that the user feels more performance, right? So let's hop into transitions.

[00:00:22]
This particular problem here happens to me a lot. How many of you have buttons on your remotes that have Netflix or Hulu or Uncle Pete's Streaming Services, I called it here, and you go to press a button and you accidentally press the wrong one, right? And you spend the worst 15 seconds of your life, waiting for this app to load so that you can close it and get to the actual thing that you meant to, right?

[00:00:45]
And just panicking, pressing the button, unwilling to waste 15 more seconds on this. This particular problem where you click something, the UI does something and you're locked into a state until it finishes loading is exactly what transitions are for. It's essentially like, I'm gonna just start doing something larger underneath the scene.

[00:01:02]
A good example of this is changing pages. But I'm still going to leave the UI reactive so that the user can change their mind or do something else, right? That's the entire purpose of transitions, keep your UI responsive while you're doing something larger under the hood. Yeah, so same thing, you've been on a website, maybe your banking website, my banking website does this where, I'll click on send a transfer or something like that, and I accidentally click get a new mortgage or something like that.

[00:01:35]
And I'm like, no, I don't need another mortgage, I have a house, thank you very much. So yeah, we're trying to annoy our users less. So this is what transitions are for, they keep you eyes interactive while loading is happening. So we're gonna build a little app. I've made an intentionally slow APIs to kind of exaggerate this.

[00:01:54]
And then we're gonna be using this really fun useTransition hook, and it makes the whole thing not terribly hard to do. So we're gonna open this project here, and I have the starter, and we're gonna be opening transitions, right? So I'm gonna open that in my VS Code editor, transitions.

[00:02:22]
So another very similar-looking project here, this is gonna be a scoreboard app, so we're gonna be able to look at the various different scores for different teams. So I have a server.js here, really all it's doing is it's keeping track of seven different games. So home and away for each one of them and then some interval, right?

[00:02:46]
So every 10 to 60 seconds, it's going to increment a score for each players or for each team.
>> Brian Holt: And then this WAIT_TIME here, so you can mess with these, feel free to change these numbers if you wanna make it feel different. Every API request is artificially slowed down by five seconds so that you can have time to see the transitions happening.

[00:03:09]
So just to get this running to show you what it looks like, if you go into transitions and you just say npm run, I think it's dev:server, something like that, you'll get something that looks like this. And you can see here, they all start out at 1, 1, and then over time, they'll start changing scores.

[00:03:31]
>> Brian Holt: Cool, so you can just leave that running, there's no harm in just leaving that running. We'll eventually come over here as well. I can just create another terminal, and I'm gonna say npm run dev:client and this will run vite. No, you have to do npm install as well.

[00:03:49]
Make sure you do that, and then run npm run dev:client.
>> Brian Holt: Okay, and now I can open this ,and you can see it just says transitions. So we need to go actually code up our app here. Other pieces of code in here that might be interesting to you, this is all the teams.

[00:04:10]
This is just used by server.js, but feel free to modify them if you're feeling funny. This is a very normal Vite config, it's doing a proxy so that we can make a request through port 3000. And there's a bunch of images here that were definitely generated by ChatGPT.

[00:04:33]
Okay, Client, this is literally the same as the last one, and then App.jsx, that is what we see there. And then, obviously, there's a style.css which has all the styles.
>> Brian Holt: Okay, so that's the starter template. You've run npm install, we've run both dev:server and dev:client. And everything else is pretty standard React project.

[00:05:01]
So there is one API endpoint. In fact, we can even just look at it if you want to. localhost:5173/score, and then you just say game= some number between 1 and 7. And we should get back a response. And notice that it takes a while, that's from the artificial slowdown.

[00:05:20]
And it'll give you the score for the Memory Leaks versus the Garbage Collectors.
>> Brian Holt: Okay, so we'll be using this API.