Skeletons Exercise

[00:00:00]
>> So node dev 8 and we'll come over to exercise 8. Now we're talking about skeletons and not like skeletons in the closet but like UI skeletons. I actually missed out on an opportunity to put a skeleton, your skeleton. There we go. Tada, there you go. There's your skeleton.

[00:00:25]
So loading spinners are awesome. We can do a little bit better and we're going to improve this experience further by making it so you're actually let's get on here so I can demonstrate that for you and koddy@remix.run, Kody loves you. So when you go between these different customers, I want to be able to render something over here instantly.

[00:00:51]
Getting that spinner up there, that's great and all, but the user might not notice it like so maybe there's an argument to be had for improving the user experience by making it more obvious or something, talk to your designer. But it would be nicer to have a more co located loading experience.

[00:01:10]
And so if I click on this, it should render some sort of skeleton UI here, that's the desired outcome for this specific situation. That's not always the desired outcome. It actually can be nice to click on this and be like, you know what, actually, I want to go to that invoice, right?

[00:01:27]
So while it's transitioning, making use of what you have now might be better than seeing just nonsense until that other page loads. So it's not 100% of the time skeletons are better. This is more of the art side of making a web app. But for our case, we're going to say that it's better to instantly update this and show a skeleton for the invoices.

[00:01:51]
Interesting thing here is that we actually have all the information we need for this part of the app before we even go to the loader for this customer ID to get that information because we literally just loaded it over here in the parent. So the parent already knows and we could click on this and instantly show the email address and the name of our customer.

[00:02:11]
And then just have the slow part which is the invoices and the the part we don't have yet be the skeleton. So that's what our skeleton does, it accepts the name of the company and the email as prompts and then shows the skeleton for the invoices. So that is your job I've wrote this skeleton for you and your job is just to make it so that as the user clicks on these different customers you can send that customer's information to the skeleton.

[00:02:39]
And you can know that you need to render the skeleton, when we're in a loading state. The interesting thing here, is that we're actually going to be rendering the skeleton instead of the outlet, when we're transitioning. So we actually say, the heck with my children, was just such a, what a jerk for a parent, but that's what they were saying.

[00:02:59]
Like, I don't care if I have children. I'm not rendering, don't render those I'm just going to render the skeleton instead. So have a good time with that this is in the customers route and yeah, rock on with exercise 8.