897: Making Your App Feel Faster Than It Really Is

Scott and Wes break down the tricks and techniques for making your app feel blazing fast—even when it’s not. From optimistic UI to preload-on-hover, it’s all about perception, not just performance. Show Notes 00:00 Welcome to Syntax! 01:12 Brought to you by Sentry.io. 02:34 Mousedown or pointerdown events. 06:00 UI animations should be fast. 08:00 Animations should not block interaction. 08:20 Animations should be cancellable / reversible. 10:50 Optimistic UI. 12:37 Local Data. 13:36 Delay loading indicators. 14:40 Page loading indicators. 15:47 Preload on hover. 17:13 Calculate mouse trajectory. 18:51 Full page spinner on every change. 20:04 Pixelated spinners. 20:23 Skeleton loaders. 23:43 Photo frames. 25:52 Search on input instead of search on click. 26:46 Progress loaders than move in between steps. 27:31 Community submissions. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Speaker names marked ? are inferred from speaking time and the show’s known hosts — they are not voice-verified.

• 0:00Wes Bos?

  Welcome to Syntax. Today, we're talking about how to make your app feel faster than it actually is. So, we're talking UI improvements, little tips and tricks that you can do to make your app feel faster. There's certainly, we've talked about how to actually make your website faster. We've talked about that quite a bit, but perceived speed is actually really important when you're talking about UI and talking about performance. So, we're going to go through a whole list of things you can do to improve the perceived speed of your website. Welcome, Scott. What's up?

• 0:34Scott Tolinski?

  Hey, I gotta say, if, if your website feels faster, doesn't that mean it's actually faster? Because like, that's, I mean, we can measure numbers and whatever, that it took this amount of time to load, but like, isn't it all about how it feels? I think it's all about how it feels. That's, that's where I'm at.

• 0:55Wes Bos?

  Yeah. Well, like, if it is faster, it feels faster. But if it's the same speed, but it feels faster.

• 1:02Scott Tolinski?

  It's faster.

• 1:03Wes Bos?

  It's faster.

• 1:05Scott Tolinski?

  To me, these are both two, two sides of the same coin, and I think they're both valuable techniques to have in your tool belt. You know what else is a valuable tool in your tool belt is Sentry, because Sentry does more than just tell you if your application is broken. It also tells you if your application is slow, or if it feels slow, because you get all kinds of insights in terms of being able to see just how fast your app is at any given point. You can assess the user misery score for how, just how fast or slow this thing is for the majority of users. And it gives you a nice little user misery bar to say, hey, these are the pages on your site that are slow and potentially have a lot of traffic. So, this is what you should be looking

• 1:49Scott Tolinski?

  at. And then you can further dive into, all right, well, what exactly is taking so long to load on these pages? What are, what are the things? What are the aspects? What do I even start? Are there errors? Right? You can, you can, you know, connect all of those dots together and really understand the visibility, you know, who's getting a bad experience, why, and fix it, because that's ultimately what we're about here. So, check it out at sentry.io/syntax. Sign up using the coupon code TASTYTREAT, all lowercase, all one word, and get two months for free. This podcast is presented by Sentry.

• 2:31Wes Bos?

  Let's get into it.

• 2:33Scott Tolinski?

  Let's get into it.

• 2:34Wes Bos?

  First one we have here is using a mouse down, or probably should be using a pointer down event versus a click. Now, this is not always a good idea.

• 2:44Scott Tolinski?

  Not blanket advice.

• 2:45Wes Bos?

  Certainly got a lot of people angry on Twitter about it. But the the trick here is, is that you can fire things off when somebody mouses down or touches the screen versus when they let go. A click is registered when you let go. A touch is registered when you you let go. So if you listen for the initial start or down, you can make things feel much faster. So Adam Wathan of Tailwind tweeted the other day that he couldn't figure out why his select dropdowns just felt slower than all the other UI libraries out there. And it turns out they were the only one listening for click. The rest of them were listening for pointer down events

• 3:30Wes Bos?

  or mouse down or touch start events. So that's very important. That can make it feel much faster because you you fire off whatever it is you want right away. It can also be really bad UX as well because often I find myself, if it's like a button where you want to navigate somewhere, I'll find myself touching it. And then if you drag your your finger off or if you accidentally touch something just with your finger, that shouldn't necessarily always register an actual action, right? There's this weird thing with with iOS. Apparently iOS still has a 40 millisecond delay in in firing off a click event.

• 4:13Wes Bos?

  For a longest time, we use this thing called fast click, where if you wanted to, like, for example, like checkboxes, right? If you want to tap like three checkboxes, you just want to go boom, boom, boom. Like, that's you're really quick at that. And often if there's a delay in registering that click or that that touch touch event, then you might hit it twice because you think it didn't actually do it. And that's very frustrating UX. So certainly with all the caveats, be very careful with this one. But it is used by lots of websites out there. You might not even realize.

• 4:50Scott Tolinski?

  Yeah, I think this all goes back to the idea of when you.

• 4:56Scott Tolinski?

  Touch something, when you click it,

• 4:58Wes Bos?

  Yeah.

• 4:59Scott Tolinski?

  The website should respond instantly or as fast as possible to anything that you're doing in an interaction. And there's several different types of issues that could be at play for why that might feel slow, some of which we'll talk even more about later on in this episode. But just that like, when you click something, the website should respond. And if you click something and have to wait a second before the page does something or whatever, that makes normal users feel like the thing is broken. Like I clicked it, what's happening? It's also one of those things that makes the, the website feel like it's worse than a native app. Many of the things that we're trying

• 5:43Scott Tolinski?

  to like approach with like native apps is that they're considered to be faster, smoother, whatever, not just because of 60 frames per second, but because almost always when you tap something, something happens, right? And so that, that's a big part of it. Another one here is that animations should be fast. And it's not like every animation, there's certainly some animations that can be slower or more lethargic for specific aesthetic reasons, but we're talking UI animations. And for the longest time, I defaulted to point three seconds for all of my transitions and animations.

• 6:24Wes Bos?

  Way too long.

• 6:25Scott Tolinski?

  Since moved that to point two. Yes, I have since I died, I was like, you know what? Whatever it is, dial it back one more because a lot of people, they, they fall in love with the fact that the thing is animating and they want to see that animation, right? They're like, oh yeah, that's a great, users don't have time for that. And for the most part, you want your animations to be speedy. Definitely something that you don't want to take a second, half a second, any of that stuff, you know?

• 6:53Wes Bos?

  No.

• 6:53Scott Tolinski?

  You know, two tenths of a second, probably fine. Yeah.

• 6:58Wes Bos?

  If you think about it, if you want to do several things very fast, whether it's, let's say you want to open up three boxes and each of those takes an animation, right? 300 milliseconds to click. So that means you're clicking three boxes. It takes you a full second to click three boxes. Whereas like you could probably tap or click those in, I don't know how long, but not, not a second. You could do it much faster. So just start with like point one, point two. It depends obviously what your animation is. If you're sliding an entire thing, that's probably much, can be longer, but these like micro animations, they should be very, very fast.

• 7:39Wes Bos?

  Or, or even like entirely taken off. Like if you look at a lot of the stuff on, on OSX or macOS, when you are moving around, switching windows, there's no animation at all. It simply just pops, happens.

• 7:51Scott Tolinski?

  Yeah. You click the finder icon, finder pops up. And I think that is a big thing is that animations certainly are great for a number of things, but not everything. I, I do like one of the, my big pet peeves is like when you have a hamburger menu and you click it and it's like,

• 8:07Scott Tolinski?

  like, okay, we get it. I just want the menu to open and like, give me, give me a two tenths or one tenth second animation on that thing and call it a day. I don't have time to sit here and wait for your hamburger menu to open.

• 8:20Wes Bos?

  Yeah. On that same point, animation should be like cancelable. The one that drives me crazy is Spotify. If you want to view our stats on the Spotify podcasters, you open up the date input and you click on the back arrow to go back a month. And first of all, you should be able to select custom ranges. But if I want to select three years worth of dates, I gotta hit the back arrow 36 times to go back for three days or for three years. And what happens is I have to click the arrow and I have to wait until the animation finishes and then click it again, because if I click it too quickly. It either breaks the entire thing, have to reload the page,

• 9:03Wes Bos?

  or it just doesn't react to the click as well. So if there is an animation in flight and somebody hits that thing again, especially like you open something and you go, oh, I didn't mean to do that. And you quickly hit the, the close button.

• 9:18Scott Tolinski?

  Yeah.

• 9:18Wes Bos?

  That should react to the action immediately. I also have this on Instagram all the time where you ever accidentally open an ad on like an Instagram story?

• 9:27Scott Tolinski?

  Oh, yeah.

• 9:28Wes Bos?

  Yeah. You know what I do? I just, I quit the app. I'm just like, I'm, I'm sick of this, you know? It's such a flow breaker. I could watch an hours worth of stories and I accidentally touch an ad and it just opens like that in browser web thing. And you can't click X fast enough because the X is in the top left-hand corner. You know, I, I can't reach it with my thumb. I'm too lazy. I just, I quit the entire app. Screw it. And I hope that their stats show that I'm, I'm doing that.

• 9:55Scott Tolinski?

  I, and sadly, I think you're probably the exception there because I, I agree. I'm the same way. I, I hate that stuff. And one thing about animations being cancelable and reversible, another tip with this too, is that it should be, the visual aspect of it should be reversible. Too oftentimes what people do with this kind of stuff is they have an opening animation and a closing animation. The opening goes from zero to 100, the closing goes from 100 to zero. So if you cancel it, it's going to jump up to 100 and then go to zero. Rather than, you know, if you click cancel at 50%, it should stop at 50% and go back to zero. Like it should not start at the endpoint of the animation. It should start where you are.

• 10:41Wes Bos?

  I agree. Yeah. And, and just reverse itself out from there.

• 10:46Scott Tolinski?

  Yeah.

• 10:48Scott Tolinski?

  Skirt. Yeah, for sure. Let's talk about an optimistic UI. Optimistic UI is one of these things that can do what we said just a moment ago and make your application respond the moment that you touch something. So too oftentimes what we're doing is you click a button to perform an action. It goes off and does some kind of fetch or does some kind of data call. It hits the API, it hits a server or something. That thing takes who knows how long, could take a little bit of time, a lot of bit of time.

• 11:18Wes Bos?

  Even, even like 400 milliseconds, like you add something to a list and it needs to refresh the list. You're sitting there being like, did it work?

• 11:25Scott Tolinski?

  Did it work? And so the right answer isn't to put a loading screen here or anything like that. The right answer is to perform the update to the UI the moment that you click something. Like the moment I hit enter, perform the update to the UI and then send that information to the server in the background. And then, once that information comes back, what you're doing is you're either responding to an error state and saying, oops, like something failed and remove the one from the list or whatever, or you're just now in the current state that you're in. Like if you're using an each loop with some IDs and you update that data in any of the modern frameworks, it's not going to re-render that thing. So what you'll want to do is like, let's say I'm adding something to, to a to-do list. I hit enter.

• 12:09Scott Tolinski?

  The framework, even before it kicks off that API call, should be adding that text to the list of data. That way it pops in immediately. And then the, the, this is called optimistic UI. A number of like frameworks have this kind of thing built in. So if you're looking to see if your data fetching loading framework has it in, it's going to be called optimistic UI. But this is one of those things that can make such a big impact in having your app feel more native.

• 12:37Wes Bos?

  Yeah. And even one step further than optimistic UI, and I know you'll like this one, is don't have optimistic UI and just save the data locally and use a sync engine. Yeah. Like the whole idea behind local first is that you just store the data locally. There's no need to, to wait around, right? You get rid of loading states, you get rid of optimistic states. It's simply just immediately updates and then, and then the sync engine will, will update it in the background.

• 13:05Scott Tolinski?

  Yeah. And so optimistic UI is kind of like local data light where you are handling

• 13:11Wes Bos?

  Yes.

• 13:11Scott Tolinski?

  that data change, right?

• 13:13Wes Bos?

  Yeah.

• 13:13Scott Tolinski?

  And you're mon- but with with local data, you're essentially caching that data on device in a database. So therefore, even on page refresh, it's going to be instantaneous or as fast as it possibly can be. And then again, on a change, it's instantaneous or as fast as it can be. And then everything else happens in the background. It's just wonderful.

• 13:36Wes Bos?

  Delay loading indicators if something happens quickly. So we often will show like a spinner when something is is being worked on. But in in a lot of cases, the it's so fast that it actually doesn't make sense to show a loading indicator that something is happening because it's just like a split second where you're showing that like like a quarter of a spinner. And that is kind of like a weird, uh, janky UI, right? So what you can do if you are showing a loader or using like a React suspense or something like that, throw a minimum display value on that.

• 14:16Wes Bos?

  And if it does not need to show, like, like, basically, you would render out your loader. But in the first hundred millisecond life of that component, show nothing. Because in in an ideal circumstance, you you would go from your submission submission state to your your finished state and you don't have to show a loader there because it's so quickly. Same with like changing pages as well. When you change from one page to another, it often makes sense to show like a loading bar on the top. Like I had this with my own website. I developed the whole thing locally. I click on the page. It's it's nice and fast. I have caching and in production, it's nice and fast.

• 14:58Wes Bos?

  But there are some cases where maybe there's no cache hit or maybe somebody's on a really slow connection where you click on something and nothing happens. And and you have you have to provide some sort of like loading indicator that the the page has changed from one to another because you can't make the little browser. Things spin. You can't, you know, normally when you go from a regular HTML page to another HTML page, you can, you can make the browser spin. But when you're using a single page app and you're using Pushstate, you're not actually reloading the page. So you have to show the user that something is happening. So I'm telling you, both show the user that something is happening, but don't show them too quickly because if it is a very fast application,

• 15:40Wes Bos?

  maybe you don't even need to. The way they know that it worked is that it literally worked.

• 15:45Scott Tolinski?

  Yes, right. Totally. Exactly. Another good tip here is preload on hover. So you can have an event to listen for on hover, then fire off your API call, whatever that may be. Many frameworks that like take over data loading do this for you. Even like SvelteKit is like one of the default behavior for links is that when you hover over a link, it's preloading that route. But like Gatsby was one of the first ones to make this a core part of the experience. And one of the things that people really felt when they used a Gatsby site, like even in alpha, when Gatsby was in alpha, back when I was a user, because once something

• 16:26Scott Tolinski?

  goes out of alpha, I'm over it. That's how I work. But so in Gatsby, you'd use a Gatsby site, you'd click something and it would just feel like the fastest darn loading experience on the planet. And part of that was preload on hover being part of the experience out of the box.

• 16:43Wes Bos?

  Yeah, that also comes with some downsides. Like you could be unnecessarily loading pages, which could be expensive for your, your server bill, it could be expensive for your extra users. But in a lot of cases, it's, it's well worth it, especially if you have good caching and your web, your payloads are not very large. Like you're going from, let's say you're going from your contact page to your about page, the like overhead of preloading that is, is almost nothing. And some people, I asked on Twitter, like for some of these tips, some, some people said, calculate the mouse trajectory and preload that. So don't do it on hover. Do it when you think they're about to hover on it. And I-

• 17:27Wes Bos?

  I don't know of any libraries that do this. So if you put them down below in the comments, if you know this, but based on some trigonometry, you can figure out, oh, somebody's they're headed for the about link. Start loading that page, you know?

• 17:42Scott Tolinski?

  There was that famous Amazon blog post when they showed how they they had like invisible triangles so that when you're moused off of a dropdown menu, you

• 17:53Wes Bos?

  Yeah, they had like nested, yeah nested dropdown menus. And if you don't, if you go like in a triangle instead, yeah, that was, that was wild at the time.

• 18:06Scott Tolinski?

  That was wild at the time. I remember thinking like this, these are the smartest people on the planet, but maybe you could do something like that, like have a trajectory triangle. I don't even know how you would do that. Yeah. Yeah, that doesn't make any sense.

• 18:20Wes Bos?

  Some sort of AI with the mouse movements, pipe your, yeah, pipe your users every mouse move. I try, you laugh, but like there's literally libraries out there for that.

• 18:31Scott Tolinski?

  Well, I use the Vision Pro and the entire UI is done with eye tracking. So if I want to type in a search bar, I just look at the search bar and start typing. You look over here and I tap my finger and it clicks on it. So like you get really used to eye tracking doing things for you when you use that headset for sure.

• 18:52Wes Bos?

  One other super annoying thing that I hate on websites, and like this is so clear, probably for most of you, but like throwing up a full page spinner on every single change. So like this especially hits when you're trying to filter products. And like, let's say I'm on like the Home Depot website and I want to filter for three different categories and two different colors. Every single time I check a box, it's like rerunning that. So it throws up a whole spinner and then it brings it back and maybe it's going to change what's available in the sidebar. That's so obnoxious to me and I'd much rather be able to just check the three things I want and then

• 19:36Wes Bos?

  Either have some sort of delay. Oh, he hasn't interacted with the, the filters in two seconds, then run it, or just give me a button to, to actually click search or do it on, I don't know. There's a, there's a couple of different ways to, to approach it, but that super obnoxious, throw up a spinner every single time you change something makes it a slog to have to try to input multiple pieces of information.

• 20:03Scott Tolinski?

  Yeah, yeah, totally.

• 20:04Wes Bos?

  What did I put here? Pixelated spinners. Oh, for some reason.

• 20:07Scott Tolinski?

  What is?

• 20:08Wes Bos?

  This is, it just, we're talking about how to make your website feel faster. Just something about

• 20:15Wes Bos?

  if your spinner is either obnoxious or is pixelated, just makes me mad and it makes me feel like the website is slow.

• 20:23Scott Tolinski?

  Here's something that can feel slow or fast depending on, like, I feel like this thing can be really helpful, but at the same time frustrating skeleton screens, which are like basically like a, a skeleton version of your app, usually missing images, using, missing like the actual text. Yeah. Using gray boxes that sometimes have like a loading indicator. There's nothing more frustrating when it's like a skeleton screen for like 10 seconds or something like that. And, and you're just like, oh, it's so close. But in reality, like, sometimes it's really frustrating because it's just like, oh, that wait, this isn't actually loading. Like, it should be, it should have some sort of like cancelable, like, oh, this is taking too long. It's clearly like, hit it, hit a snag

• 21:04Scott Tolinski?

  or something. I have no idea. Sometimes, this is such a vibe thing to me. Like, I think skeleton loaders can be super useful when done correctly, but also oftentimes not done correctly. Yeah.

• 21:17Wes Bos?

  Yeah, like, like when you're in like a shoddy network environment and you see a skeleton loader, I often think, hmm, am I offline? Am I not have a good connection? And we have APIs and we have network connection APIs for that. And if that's the case, you should be throwing up like a, oh, you're offline right now. Instead of like me having to think that your skeleton loader is.

• 21:45Wes Bos?

  Just telling me that I'm offline. It should be telling me like, ah, I'm just fetching the data right now.

• 21:49Scott Tolinski?

  Yeah, exactly.

• 21:50Wes Bos?

  But that's better than the opposite, which is literally nothing. I'm using FedEx's mobile website right now.

• 21:58Scott Tolinski?

  Dude.

• 21:59Wes Bos?

  And let me show you. Let me show you.

• 22:00Scott Tolinski?

  I know this. I know this experience. I've used this. And I know what you're about to say.

• 22:06Wes Bos?

  All right, ready?

• 22:07Scott Tolinski?

  It is so awful.

• 22:09Wes Bos?

  Okay, am I showing anything sensitive? I don't believe so. All right, watch FedEx's website when I open it up.

• 22:19Wes Bos?

  Look at the footer.

• 22:20Scott Tolinski?

  Your footer.

• 22:20Wes Bos?

  The footer. Oh, there it is. There it is.

• 22:24Scott Tolinski?

  Dude, I knew exactly what you're going to say. I've had this so, this experience so many times in the past, whoever knows that. And I go to it, I'm like, oh, it's the footer. Uh, is this broken? Is this a wrong link? Is this like, oh no, it's just loading. Okay.

• 22:39Wes Bos?

  At least put the text, loading. At least put the, the very least you could do is put the word loading. And the worst case is they say about our company is the first thing that you see when you click on a tracking link for FedEx.

• 22:54Scott Tolinski?

  It's the footer. Yeah. Okay. Your FedEx, you have such a good brand opportunity here. We're delivering your information. Hold one second, you know?

• 23:03Wes Bos?

  Yes.

• 23:04Scott Tolinski?

  Here's a tracking code for your tracking.

• 23:06Wes Bos?

  Little computer on the back of a thing, a little database that's being held by a guy. Yeah, there's so much.

• 23:14Scott Tolinski?

  Yeah, a guy's walking to the computer and the, yeah, you've got options, guys. FedEx, you've got options. You're known for being the company that put the arrow in the logo. Like, we're, we're attention to detail oriented. We put a logo. We put an arrow in our logo.

• 23:27Wes Bos?

  Don't coast on that arrow in your logo. Keep it going.

• 23:31Scott Tolinski?

  Yeah, yeah, just anything. Crazy.

• 23:35Wes Bos?

  That's hilarious that you knew exactly what it was. There's probably a million people listening to this right now being like, "I know!"

• 23:41Scott Tolinski?

  Totally. Yeah, it's very frustrating. Yeah. Oh, another, another thing that Gatsby kind of popularized that I think is occasionally good is if you have large photos or using photos in your interface, you know, sometimes those things can take a little while. A blurred, low-res version of that photo loading first in the exact same spot, to me, looks better than a blank space where that photo is going to be. I mean, you could even have a blank space with a color, but like a blank white space. Okay, so let's go good, better, best. I think best is the thing loading fast. Good is the blurred thing or background color

• 24:21Scott Tolinski?

  that then fades the image in. And then bad is nothing, and then your page loads and then all the content shifts down. Throw that in the trash, because that's garbage. But yeah, do something there for images. The just images popping in left and right, user goes to click on something, the whole thing moves, like, yeah, that's, that's trash talk.

• 24:39Wes Bos?

  Yeah, and especially if you are using a framework that makes you, or you should be embedding the width and height, or at least the aspect ratio of your images, so that when they do load, they don't, you don't get content shift. You have to run a process that figures out how big your images are in order to know how big they are.

• 25:02Scott Tolinski?

  Well, use a aspect ratio. Problem solved.

• 25:05Wes Bos?

  Yeah, I know, but the thing is that like, you have to process all of your images ahead of time in order to understand the width and height of them are, right? Or the aspect ratio. They're the same thing, right? The browser UI will, will take the width and height and make it aspect ratio. But what I'm saying is that you're already doing that to get the width and height of your image when you upload it, or you're storing in a database, or when you're, when you're doing a build, you're figuring all of that out. You can very easily extend that process to generate a base 64 blurred version.

• 25:40Scott Tolinski?

  Yes.

• 25:40Wes Bos?

  Or find the dominant color. There's several of these like blur up techniques that you can do. And I agree as well because otherwise it's just like, what is in this random space?

• 25:51Scott Tolinski?

  Yeah, totally.

• 25:52Wes Bos?

  Search on input instead of search on click. This is, if you ever wonder how search is so fast on some of these websites, it's often because what they're doing is they're firing off the fetch request on like a key down. That's another one. Instead of waiting for key up, do it on key down. And what they're doing is if you keep typing, then they'll just cancel or abort those requests in the background because you're starting a new one. And for a lot of people, it's worth those extra requests versus having to like wait for a user to actually go ahead and hit the search button. Or you can even just

• 26:36Wes Bos?

  like wait for 200 milliseconds after somebody has finished typing, then go ahead and fire it off. So they don't have to go grab their mouse and mouse over and click the search button.

• 26:45Scott Tolinski?

  Word.

• 26:46Wes Bos?

  Another one, progress loaders that move in between steps. So often a progress loader is not going to give you a very clear 0 to 100% of how, how something is doing. It's because there's, there are steps. Like, let's say you want to like resize an image, right? You got to upload it. You have to wait for a job to start. You got to actually resize the image and then you got to send it back. And those five or six steps might be your progress. But if one of them takes a long time, it's often good to, to show the animation moving in between those steps. So the user actually knows that, that something is actually happening.

• 27:30Scott Tolinski?

  Yeah, word.

• 27:30Wes Bos?

  Lastly, I asked on Twitter for some people's tips as well. I thought we'd just go through them and see what our thoughts are. The first one is Jimmy, Jimmy V V says, make the UI bigger so more stuff is below the fold and then stream and suspend that in. I thought that was kind of funny because. With streaming, you can send what you have to the browser as you're still processing it. And this is especially important with this AI stuff that can take seven, eight seconds to generate. So what he's saying is make the UI really big so that as the stuff is streaming in, it's not actually on their, their screen. And you could just

• 28:14Wes Bos?

  show the first one on there, which I thought was a kind of a, a fun way to go about it. Cause that whole, like even just text streaming in and like updating the UI, that's a very hard problem to solve. I don't know that anyone has, has completely nailed it just yet. Cause it is very disorienting when too much is coming in at once.

• 28:35Scott Tolinski?

  It's like, that's like a Nathan for you thing. It's like, he, he's like, all right, here's what we're going to do. We're going to make all your things bigger. So that way.

• 28:44Wes Bos?

  Yeah.

• 28:44Scott Tolinski?

  Yeah.

• 28:45Wes Bos?

  Well, I think it was at Toronto airport many years ago, they were getting such bad reviews because it took forever for their luggage, luggage to come in. This is one of those like business textbooks things. I'm pretty sure I learned this in like, in business school. So what they did is they not, they didn't, they didn't make their baggage any faster. They simply just made the walk to the baggage.

• 29:10Scott Tolinski?

  Yes.

• 29:10Wes Bos?

  Longer. And, and then people stopped complaining about it because like, if you have something to do while you are waiting, it doesn't feel like it is, is taking as long. And that's the reason why they put mini games in some of these, in some video games. That's why if something takes a long time, you could have like a little game for your user to have. Just the perceived speed of something is so important.

• 29:37Scott Tolinski?

  Can I tell you an embarrassing story? We went to Mexico for spring break and when we came back, we were standing at the bear, the baggage carousel at the Denver airport, which does take a while. And All of our bags, except for Courtney's bag, had come out and we all had them. We were standing around and the guy comes over to us and he's like, "Are you missing a bag? What, you know, whatever?" And we're like, "Yeah, her bag hasn't come out yet, so we're just waiting, see if there's anything else coming out. Everybody's long gone." And there's one bag going around on the carousel and he's like, "That's not it?" We're like, "No, we've already looked at this bag three or four times. It's not it."

• 30:18Scott Tolinski?

  And the bag just keeps going around. He's like, "All right, let me go check." He goes off to his computer and as he's checking, I'm like, "Let me just go look at this bag one more time." It was her bag the whole time.

• 30:27Wes Bos?

  No.

• 30:29Scott Tolinski?

  And the poor guy, I had to go up to him and be like, "Hey, man, I'm so sorry. It was actually that bag."

• 30:35Wes Bos?

  Oh, man.

• 30:37Scott Tolinski?

  I swear I looked at it. It was crazy. I, I, I don't know if I was just sleep deprived or what. It was, I felt so embarrassed.

• 30:44Wes Bos?

  Uh, The Pege says, "How some animations are intentionally slowed down to build trust." So this is not perceived speed, but it's perceived trust that, that you have to slow things down to make it look like you're actually doing something?

• 31:01Scott Tolinski?

  Oh, my God.

• 31:02Wes Bos?

  That's kind of interesting. Maybe like when you're submitting, like when you finally submit something like, "Ah, I spent forever saving drafts and now I'm submitting it." Should it, should it take two seconds to, to submit something?

• 31:16Scott Tolinski?

  Oh, my gosh. These are all unethical life pro tips. That's, that's so far. I don't think that's, I, I can't imagine ever needing this kind of thing. I'm sure some people-

• 31:26Wes Bos?

  Checking for security.

• 31:28Scott Tolinski?

  I'm sure there's data to back up that like, this is actually a thing or that this is actually a good thing for some people.

• 31:35Wes Bos?

  Trust is a big thing. You know, like if you want to like, or you're checking your credit or something like that. I don't know. I, I could, I could see it, right? Where it's like, "Oh, that was too fast. I don't know if it actually did anything."

• 31:47Scott Tolinski?

  Oh, yeah. Yeah.

• 31:49Wes Bos?

  AKA Govin says, "Show the result before the spinner?" What the hell does that even mean? One small change that makes a huge difference. Show the result before the spinner. Why is the spinner after?

• 32:04Wes Bos?

  Fake it until it's done loading. I don't know what that one means. I thought I'd throw that in there. See if you have any thoughts.

• 32:10Scott Tolinski?

  I don't. No, I have no idea. I, again, some of these are just like Nathan for you things. These are hilarious.

• 32:15Wes Bos?

  Alex Vipin says, don't add enter animation to popovers, only exit animation.

• 32:22Scott Tolinski?

  Yes.

• 32:22Wes Bos?

  See the Mac OS menu bar and Tailwind Catalyst dropdowns.

• 32:26Scott Tolinski?

  We were just saying that.

• 32:28Wes Bos?

  Yeah.

• 32:28Scott Tolinski?

  Pop it in real quick.

• 32:29Wes Bos?

  Oh, you're right.

• 32:31Scott Tolinski?

  Yeah.

• 32:31Wes Bos?

  The menu bar immediately shows.

• 32:34Scott Tolinski?

  Same with the finder or app opening stuff. The only reason it doesn't do that is if you're opening something that's been minimizing. You're minimizing something.

• 32:43Wes Bos?

  But what's the, what's the idea of only doing, I get it not on the way in because you want it, but on the way out, I guess it gives you context for something is going away.

• 32:54Scott Tolinski?

  Yeah, maybe. Yeah. You want to get it as fast as possible. You want that feedback. You don't want it to wait. Yeah.

• 33:01Wes Bos?

  The context for it coming in is it's literally in front of you. But the context for it going away is, is it fades out. So you understand it's going somewhere?

• 33:11Scott Tolinski?

  Yeah.

• 33:12Wes Bos?

  Interesting.

• 33:13Scott Tolinski?

  ACAV Beats says that skeletons feel slow now. I'd rather just wait to see any content at all, but I am weird. And then I am corgi says, maybe a hot take, but shimmers suck 99% of the time. I'd sooner take a spinner in most cases. When you're saying shimmers, he means like shimmering skeleton screens. Look at all this content. We haven't loaded yet. Look at how it might look. Oh, that's, you know, I'm with you. I'm with you guys both on this one. I think this is so true. And especially when it's like, here are our five items being loaded in skeleton screens. And then once you actually load the item, it's like one thing pops in.

• 33:53Wes Bos?

  Yes.

• 33:53Scott Tolinski?

  It's like, come on, you just show me one, I guess, you know, if you're going to do it at all.

• 33:59Wes Bos?

  Yeah.

• 33:59Scott Tolinski?

  If there's a possibility of it loading less, because then I'm like, where'd all that stuff go? You're going to show me.

• 34:04Wes Bos?

  That's, yeah, that's a really good point. You think like, or if there's no results or one result, yeah. Interesting. Maybe this is the beginning of the backlash. Give me a cute loading indicator, you know? Give me the FedEx truck backing up and unloading my, uh, my results. Or just make your, I think probably both of those are rooted in the websites are actually slow, you know, like FedEx should not take, what, four seconds to show me my, my tracking? It feels like it should be faster than that.

• 34:36Scott Tolinski?

  Yes.

• 34:36Wes Bos?

  Cool. All right. Those are our tips. Let us know your tips down below in the comments. Love to hear what you have to say. And anything else to add there, Scott?

• 34:45Scott Tolinski?

  I got nothing. Work on your app speed, all that stuff. It's important. Don't let you get in slow apps be out there. That's all I got.

• 34:52Wes Bos?

  Peace.