The Subtle Art of "Subtle Loading"!

Hey everyone, hope you all are having a good time. So I'm now today in this session, I'll be talking about the topic, the Subtle Art of Subtle Loading. So without wasting any time let's get right on to it.

So just a small intro about me. So here I'm Nikit and I'm a Software Engineer at Postman. I mostly handle stuff around design systems at Postman. Postman's just a platform and Postman on the web. You can find me on Twitter or on GitHub. I'd love to connect, it would be a good chat.

All right so before diving in, I just want to like mention that our users are like, like we all know this fact that our users are very fast when it comes like using the UI. They don't want to, they don't want to wait for anything. They just want to use things in a flash and this is where a small bottleneck comes in because we as developers do want to cater to this request because we want the user to use our applications faster, but we have this small sort of drawback, because we have to fetch something from a server and that's why we show them some loading screens on the page which the users definitely don't like. And like this is sort of this bottleneck that we want to handle in a subtle way and that's going to be like an essential and sort of an essence of our talk, where like if you see this definition, which what Google gives you, the word subtle actually says like making use of clever and indirect methods to achieve something. And like that's how we're gonna play subtle with all these techniques.

So let's quickly look at like what are tips that I recommend to make our UX better. So tip number one would be to not to be sitting idle and like keep fetching something, whether it's UI or whether it's data, just keep on fetching. Don't wait for anything. And we'll be using a small technique for concurrent mode and suspense to handle this case. Second step is to what to load when. That is the question because we, although we are having many things in such a succession a succession, but we want to load a thing which is semantically having a better meaning if you load one thing first and then the other thing in the next round. So semantically the loading sequence should also matter, which should be done by a simple API called suspense list. And third is to be optimistic and we don't worry about all of these techniques. We'll cover them, cover them up in a demo, which we'll now see. So without wasting any time, let's quickly jump in.

Okay, so if you see here I have two applications, one running on synchronous mode and other one running in the concurrent mode or like you can say an async mode. So if I just give you a small introduction, just to be on the safe side. Yes, so there's a profile section. If I go to About Me, I see a nice loader and then the data fetches and my About Me section gets loaded. Similarly is the thing for a tweet. So there's a small button, I click on it and I see a next tweet.

So every time I do something, I'm seeing loaders. Now time for tip number one, which is to not to do a waterfall thing where we wait for something to load and then we render the nested down components. So if you look at the concurrent app now here, like in this case, we were waiting for a screen to load but in concurrent app, while I was showing you what that demo on the left concurrent mode actually started fetching things in Babylon. Because concurrent mode can help you switch between tasks that are more in priority. So in this case, if I go to About Me section, would I see a loader or not? Because should everything be loaded? Because concurrent mode was like working async to fetch the data in succession it was not waiting for any loading to happen. So if I go to About Me section, no loader. I didn't see any loader coming in. So it seems like it was already there. Similarly for the Tweet section. It seems like this was also there. I didn't see any loader. All right, perfect. So this was tip number one.

Now, let's jump on with tip number two, which is inside this About Me section. Now, let me hide the synchronous mode and go to concurrent app. Now, if you see, I reload this app and I now let me go to the About Me section. Now, you will see two loaders, but the second sentence is coming first and then the first description comes up later, like it can happen because both of your Async API calls can be in a race condition, right? Like whichever loads first, you don't know, but if you see this like this, this description, I've intentionally added like like an Easter egg that the spelling is wrong. But in a meta description, I want to tell people that hey, now, the spelling is this and not that. So the loading sequence that I talked about comes into picture.

So the ideal experience should be like no matter which loads like which comes up first, like which API response is coming first. You want to show the first thing as a description and then you want to show a meta description, right? No matter when they look. So if we go towards the code, let me just quickly go ahead. Yeah, I need some space here. Okay. So these are these two suspense blocks, right? That we're using now, let's use suspense list here. So I use suspense list. I give a revealed order as forward. Now this like what does this mean? This says that okay, no matter what loads first or what loads afterwards always load the first thing which the description always show the first things first and other thing afterwards. So I save it. So yeah, let's save this up. And now let's refresh. Now what you'll observe is like no matter what comes first or what comes afterwards you'll always you're always going to see your description first. And then you're going to see the meta description which is like a better experience like it makes a semantic order look better. All right, so that was tip number two.

So what will load when this was the question and this was the answer right now coming up tip number three that is inside the tweet section. Now, let me just toggle on synchronous mode to show you the difference. Now if you see here, I have to like click on this button and then I show a loader to like show the next to this loading. But like if someone is on a faster connection, why do you want to show them a little like for like some milliseconds you can like just like not show a loader like that's a subtle way of handling the scenario like so that the users are faster Connection feel that as if it was already there. So let's see how it happens in the syncronous or the in the concurrent app. So I click on the next week. I just like make it disabled for some time and I wait for the data if it's coming or not. So like I just let's show the next week in an instant. So like, let's see, once again, I click on the next week.

There's no loader. I'm waiting for some time because the Connection is fast and then I see the tree. All right. So that was it. Number three is to be optimistic like wait for things like as if they just going to come up and you don't have to actually load us for like those small instances. Right? And this was using the use transition like the start transition API that we use.

So like just to give a gist. I just use a start transition which gives me a function. So like you can use this function to wrap everything all of your state updates inside this function like as I have done here on this buttons on click. I have wrapped everything under the start transition and it waits for like this millisecond amount of time. So it says that okay, if the data loads within this amount of time, I'll not show a loader but if it takes longer than this only then I'll start to see a loader which is like kind of make sense. Right.

All right. So coming back to our top looks like these three tips can actually help us give us some good amount of experience like with some smaller wins. Like you like we didn't actually do much but just applied to small react 18's API's and we were able to get some subtle API experience. So is this production ready would be I think your next question that hey now, when can I try this out in my apps. So a good news for the folks who want to try it out that react 18 has like recently been published and it's now available on npm. So feel free to try it out use concurrent mode suspense and a PSI start transition. You're going to love these APS and I'm super excited about it. And just as a side note we at postman are also really passionate about like building great things and making the lives of users easier using the platform. So if you would want to be a part of our journey feel free to connect connect with us using Postman's careers page and we'll be happy to get you on board. All right. So with this I will rest my case and thank you for listening.