8 ms·
PleaseWait.js – Show your users a beautiful loading page while your app loads
- mindcrime 12y agoIs it just me, or does anybody else think that it's a problem that the world even needs this in the first place? I expect splash screens and slightly longer load times from desktop apps... if I click on a link to something in my browser, not so much. TBH, if a page/app takes more than a second or two to load, I assume there's something wrong with it (or my net connection).
- ranty 12y agoExactly. Splash screens are so 1995 - we need to be getting users to something useful as fast as possible.
- RobertKerans 12y agoGames fair enough; I understand the temptation, but Jesus, just spit out a static page and load the rest in as and when needed.
- jhdavids8 12y agoFor SPAs, something like this can be quite useful for a few reasons: branding (see Slack's and Asana's cool examples), having in-app authentication on any page (see the login form example on the demo page), and yes, showing some sort of notification while a good bit of data loads in the background. For the majority of sites, I agree this may be overkill, but if you have a SPA that needs to load a good bit of data on the user's first use of your app (and verify authentication), this can (hopefully) be useful.
- masukomi 12y agoYou missed the point. If you "need to load a good bit of data on the user's first use" you've already failed. I've been coding professionally for about 20 years now and the only reason i've ever seen for loading a bit of data on the initial hit, is that the developer didn't spend the time to think about how to load the necessary pieces incrementally, as they were needed by the user. Instead they designed a system that needed a whole pile of crap on startup even if the user didn't.
- jhdavids8 12y agoI certainly agree. There are almost always ways to avoid "loading a good bit of data on the user's first use". But for your traditional SPA, it's quite common that you need to make a few AJAX calls to your backend API in order to fetch some data to show to the user. This was built for mostly that case, not for the "let's block the user's screen for 5+ seconds while we do unnecessary data fetches" case. Edit: I misspoke when I said "a good bit of data" in my original response. I simply meant any API calls to your backend.
- at-fates-hands 12y agoAgreed. There's so many tools right now to find out exactly what your page or app is using and how to minimize what you're serving. Sure, it takes some effort, but your users will thank you in the end.
- jalpino 12y agoI tend to disagree with the statement that you've already failed if you decide to eagerly load resources before they are used or needed. Take queue from Google or others who pre-fetch resources based on anticipated usage. In the world of SPAs and client-side heavy apps, combining resources into a single or logically grouped set of resources is common practice to cut down on the amount of overhead that many http(s) calls impose. Also, the intended use of PleaseWait.js doesn't have to be used to stall while client side resources are brought down. This concept could easily be used for long running, server side processing.
- xatnys 12y agoCertainly, with web applications you would want the least amount of latency possible. This is a normal UX scenario -- as you indicated, there are factors which can simply be out of the hands of the application such as network connectivity. In cases like that, indicating to the user that something is happening makes for a better experience than not doing anything, or in the worst case (which certainly shouldn't happen these days) blocking the user's browser.
- mQu 12y agoNot realy. A user with a slow connection will know that and wait (because the problem will be global). Adding a preloader is just bloat that will make the site load even longer (and just piss off the user as he'll know that some of his scare bandwith was lost on the shiny spinning wheel).
- xatnys 12y agoAside from the reality that a user won't always know their connection is slow / has slowed (particularly when it comes to bad routing between server and client), this is also typically used in cases where you are utilizing XHR. Given that they're done in the background, the browser won't indicate them being made outside of dev tools. If they're asynchronous, again ideally they will take place as quickly as possible. This is unfortunately not something that can be relied upon.
- Animats 12y agoIs it just me, or does anybody else think that it's a problem that the world even needs this in the first place? I agree. If you need this, go back and look at what you're loading. Do you really need all that CSS? Does that Javascript really need to be executed? Do you need it just to get started? Do you really need 15 tracking cookies and a Flash bug?
- adnanh 12y agoSome (legacy?) web applications written in flash (using Flex SDK for example) still require some time to download, considering that the binary of 2mb takes at least a few seconds to download, showing a splash screen to a user instead of the blank page would be much better than having user to wonder if the page/app is going to load at all, like in [1]. [1] http://www.socialexplorer.com/6f4cdab7a0/explore http://www.socialexplorer.com/6f4cdab7a0/explore
- zaidf 12y agoIt's very common for certain features in enterprise apps to take 5-30seconds to load. Most enterprise report generation features require a few seconds for a lot of the queries, for example.
- steve_barham 12y agoClick Here to Skip Intro
- mQu 12y agoWhy is this any different than Flash preloaders just a moment ago? And even worse - it doesn't show any progress so there isn't any user feedback. Every (bad) pattern seems to repeat itself. Just using current-cool-tech. I would much more appreciate that dev time would be put into a framework that allows graceful enchancement by deferring loading more heavy components and to allow user to interact with the site ASAP. Having a skeleton project for gulp (or any other system) that shows how to properly split big, non essential, components and lazy load them would go much further to ease developing big applications and smoothen UX. EDIT: typos.
- jhdavids8 12y agoUsing PleaseWait to actually show progress can be achieved by simply updating the loading HTML to show a number percentage, but we may update the API to make this easier in the future. And I agree that a skeleton project to show proper modularization of different components would be great! Our blog just started an Angular series, so we'll try to write one on how we split up our large Angular enterprise app in this regard :)
- mQu 12y agoBut it's missing the point - just like other comments said - if you need this you're doing it wrong. I sure was guilty of big sites just as much as the next guy. It just saddens me that insted of promoting what we've learned it the past years and applying to current projects we're doomed to repeat bad UX from before.
- jhdavids8 12y agoMaybe you're right, but I certainly think there are some valid cases where this could be useful. I'm not saying use it in every project, or use it as a workaround to a larger architectural issue, but if you have a single page app that does not render templates on the server, showing something like this while you make a few AJAX calls and compile the data returned into your client-side templates isn't the worse thing in the world. Slack and Asana do similar things, and I would hardly say that their engineering teams did a ton wrong. We actually built this because we're customers of both and enjoyed the screens they showed, so we wanted to see if we could make a generic library that others could use to do the same.
- fiatjaf 12y ago"You look nice today". This habit of saying horribly false compliments to the user is an awful trend that is affecting programmers everywhere. See https://www.npmjs.com/login https://www.npmjs.com/login, for example.
- ddoolin 12y agoLike the AMC theatres pre-show messages where it says something along the lines of "Thank you for being _absolutely amazing!_" Makes me cringe SO HARD every time. Why are we telling people they're amazing for existing? Haven't we identified the issue with much of today's youth is that their egos were often overinflated by their parents, teachers, etc, leading to problems of entitlement and whatever else that entails?
- jobposter1234 12y agoI suspect it's because people feel better about themselves and have a happier outlook when they receive compliments. These warm fuzzies are associated with the product / setting, positively affecting people's opinion of the service. I'm not sure why you're confused -- is it because things aren't the way that you think they should be? To me, the explanation above is pretty concise and fits the situation neatly.
- ddoolin 12y agoI guess I wasn't seriously questioning the reasons why they would do it. It does make sense but isn't there some point where complimenting your customers to make them feel all warm could go "too far"? I'm pretty laid back with not very high expectations of customer service (not a pessimistic person, just easy to please) and it just comes off as rather excessive, at least with the way it's presented. This probably comes off as looking the gift horse in the mouth but at some point it does come off as excessive, like when I get bum rushed to be helped the second I look at a product in a department store.
- collyw 12y ago
- ddoolin 12y agoI'll be the odd one out and say that the presentation is actually gorgeous. It's really not a whole lot of extra resources that need to be pulled in to do it, either. You could do it in a few lines of HTML/CSS if you were so inclined. That said, I will agree that the use case is very small (page opening) and for most these days even showing this for more than 2 or 3 seconds might lead to some wrong assumptions and showing it for only a split second would be odd/no good/etc.
- jacquesm 12y agoThe best loading page is the one that I never see.
- mcav 12y agoNot every app can load instantly. Better to have a reasonable loading screen than an ugly, flickery, reflowy startup experience.
- forrestthewoods 12y agoNo. It's not beautiful. Stop saying that! That word is so overused in software that it is no devoid of all meaning. It's a loading screen. It's perhaps even a nice looking loading screen. Well, it's not ugly. It is missing a lot of functionality though. But it's less rage inducing than the spinning pin wheel so that's good I guess. 2015 would be a better year if we all agreed to stop using the word beautiful with respect to any and all things digital.
- pdabbadabba 12y agoCan a loading screen not be beautiful? Would the world really be a better place if we all said "very pretty" instead of "beautiful"? Maybe you just don't like it as much as other people do. That just means your tastes differ, not that others are abusing language.
- nirvdrum 12y agoCalling everything beautiful diminishes the value of the word. And most apps posted to HN are described as beautiful. It's mostly just become filler text now. Worse, this judgment isn't coming from an impartial critic, but usually the author himself/herself. Maybe it's a cultural thing, but not telling others how to judge your product was drilled into me. Also, being beautiful isn't an inherently valuable attribute. If your product is utterly useless, but good looking, then it's still utterly useless. Some form of user study about the utility of the aesthetic design would be a nice addition in these sorts of declarations. I don't think the issue is with this project per se, but the trend in the presentation of these sorts of "show HN" posts.
- marrs 12y agoI suspect the parent is disappointed by the lack of ambition, or maybe thinks that the PleaseWait authors are just trying to get eyeballs on their site. The animations are pretty bog-standard, let's be honest. I'd stretch to calling them aesthetically pleasing, but there's no way I'd describe them as beautiful.
- eudoxus 12y agoSo you don't think UI/UX design can be beautiful? I Agree that it takes alot for me to use the word "Beautiful" in the context of software aka Code. But design isn't code. And although I do think this library is supporting the case of being lazy and not optimizing your code and load times. I do think its beautiful. Just my 2 ¢
- finid 12y agoIf your page takes that long to load to the point where you want to use PleaseWait.js, that's an indication that you need to optimize your page so that it loads faster.
- pdabbadabba 12y agoYes but, in the mean time, why not also use PleaseWait.js?
- chavesn 12y agoThis is very beautiful, and it's great -- no, essential -- to think of your users! But speaking of that, please THINK of your users and despise loading times. Hate them with a passion. As they say, kill them with fire! Do NOT make them prettier, it only makes it easy to think it's OK. It is not OK! Your app can load faster. Way faster. It's easier than you think. And even if it's not, it's worth it. When you have done everything you can do to speed up the loading time, NOW you can think about loading screens. Except, don't make it a loading screen. Fake it. Make it look like you loaded faster than you did: - Let the fastest content load asynchronously with the slower content. - Is caching for your entire app too hard? Start by caching the entry points from previous visits and show that (although beware of unsettling flashes/jumps in data!) - If that's too hard, fake it with a screenshot from the last view the user saw (it's been done -- iOS apps). Once you've done all the above, and exhausted every other idea that you can think of because you know your users better then I do... ... then, only then, you can think -- for maybe an hour or two -- about making the gap a nicer experience. But remember, it must be a NICE experience. BEAUTIFUL does not always equal NICE. And until that gap is gone, never cross this item off your list! [Disclaimer: To the creators of this module, I'm not saying your time has been wasted. I'm only talking to app owners, not to you! Thanks for thinking of how to make bad things better! ]
- 72deluxe 12y agoWhat's wrong with an animated GIF? Is this a problem that needs to be solved? I thought it was solved in the early 90s? On a positive note, those animations would be great if they were GIFs - they're nice.
- arscan 12y agoAh, funny, I came up with a similar name for a little script I published last week named PleaseRotate.js [1]. It displays a message to mobile users if they are viewing the site in the wrong orientation. I wouldn't recommend it for most sites, but it has its uses (I use it on tech demos that I build). [1] https://github.com/arscan/pleaserotate.js https://github.com/arscan/pleaserotate.js
- bbcbasic 12y agoFunny not long ago there was a HN comment saying this would be a good idea (https://news.ycombinator.com/item?id=8765778 https://news.ycombinator.com/item?id=8765778) Of course it all depends how keen your users are to wait for the thing. If it is an online game and they clicked a link to play it then they may be happy to wait. For most sites this would make me hit the back button if it didn't load in 5 seconds.
- TickleSteve 12y agoNOOOOOOoooooooo!!! Wrong thinking! just make it load quicker!
- TheAceOfHearts 12y agoYou know what's even better? Having server-side rendering that delegates to the client on load so you can avoid this kind of thing all-together. Looking at you react, stay awesome!
- mavdi 12y agoI used to be a Flash developer, now a Javascript developer. Everything that was raised as an issue with flash (except web's open nature) is now an issue with Javascript development today. Preloaders, skip intros, single page apps, browser back button issues, SEO incompatibility. all of it. loving this.
- sqrt17 12y agoThe point is not (merely) the technology behind it, it's the agencies' model of selling the customers "rich internet sites" whose main point is to show off to other people that you have pockets full of money. A good intro can help to sell your site project to a customer (and help them selling it to their superiors), but no longtime user would protest if you took it away. Single page apps are a way to fit in an interaction model that doesn't fit the idea of "one address, one page, one text" that was the idea behind the Web in the first place. So, yes, you give up some of the benefits of the Web (navigation with bookmarks, back button) or have to fight hard to get them back, while keeping others (mostly, platform independence and a built-in client-server architecture)
- ajorgensen 12y agoThis pattern really ruins the experience for me. I know of a few apps that while loading will show an inspirational quote or some other distraction. For me it cheapens the experience. I understand scaling is #hard but there are better experiences than a loading screen that can make the end user experience much better.
- grayclhn 12y agoJesus, we've sure defined down "beautiful" haven't we.
- Kiro 12y agoVery nice and exactly what I needed.
- pjf 12y agoThe page doesn't load, it's stuck on the progress bar.
- tarikozket 12y agoI can't believe that this post got upvoted 140 times on HN. Only one day left to 2015 and we have distribution networks, abroad datacenters. Are we still not able to build a system which doesn't require a loading screen? What a shame...
- 91bananas 12y agoIt's hard to fix slow clients that require tons of data and resources, but feed a desire for apps to do crazy things, and limited dev time. Trade offs have to be made somewhere, a loading screen at the beginning of an application is one of them.