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 onto it. So just a small intro about me. So I'm Nikhil and I'm a software engineer at Postman. I mostly handle stuff around the 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 mention that our users are like, we all know this fact that our users are very fast when it comes to using the UI. 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 users to use our applications faster. But we have this small sort of drawback, right? 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 this is sort of this bottleneck that we want to handle in a subtle way. And that's going to be an essential and sort of an essence of our talk, where if you see this definition, which what Google gives you, the word subtle actually says making use of clever and indirect methods to achieve something. And that's how we're going to play subtle with all these techniques. So let's look at what are tips that I recommend to make our UX better. So the tip number one would be to not to be sitting idle and 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 tip is to what to load when. That is the question. Because although we are having many things in succession that are loaded, 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 would also matter, which should be done by a simple API called suspense list. And third is to be optimistic. And don't worry about all of these techniques. We'll cover them up in a demo, which we'll now see. So all right, 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 app mode, or like you can say an async mode. So if I just give you a small introduction, let me just quickly re-fetch just to be on the safe side. Yes. So there's a profile section. If I go to about me, I see like 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 like an X-tree. So every time I do something, I'm seeing loaders. Now time for tip number one, which is to not to sort of 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, in this case, we were waiting for a screen to load, but in concurrent app, while I was showing you the demo on the left, concurrent mode actually started fetching things in pavlet 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 this 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'll 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, we don't know. But if you see this, like this, this description, I've intentionally added like a, 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, maybe just quickly go ahead and yeah, I need some space here. Okay. So these are these two suspense blocks, right? That they're using. Now let's use suspense list here. So I use suspense list. I give a review order as forwards. 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 is 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're always going to see a description first, and then you're going to see the meta description, which is like a better experience. Like it makes a semantic ordering look better. All right. So that was tip number two. So what to load when? This was the question and this was the answer, right? Now coming up to 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 tweet is loading. But like if someone is on a faster connection, why do you want to show them a loader 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 on a faster connection feel that as if it was already there. So let's see how it happens in the synchronous or the concurrent app. So I click on the next tweet. 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 like show the next tweet in an instant. So like let's see it once again. I click on the next tweet. There's no loader and waiting for some time because the connection is fast and then I see the tweet. All right. So that was tip number three is to be optimistic, like wait for things like as if they're just going to come up and you don't have to like show loaders for like those small instances. 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. So as I've done here on this buttons on click, I've 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 makes sense. Right. All right. So coming back to our top, looks like these three subtle tips can actually help us give us some good amount of experience and like with some smaller wins, like you, like we didn't actually do much, but just apply the small React 18 APIs 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 I would be able to spot 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 APIs like start transition. You're going to love these APIs 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 with us using Postman's careers page and we'll be happy to get you on board. All right. So with this, I will address my case and thank you for listening. See you guys.