

PleaseWait.js – Show your users a beautiful loading page while your app loads - jhdavids8
http://pathgather.github.io/please-wait/

======
mQu
Why 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
Using 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
But 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
Maybe 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.

~~~
mtrpcic
I agree with you on this. There's a large subset of the web development
community who are shifting towards building desktop applications with web
technology (atom-shell, node-webkit, brackets-shell, etc.). In a lot of these
cases, the app bootstrap process is actually loading data/content that is
__required __for proper app functionality. Desktop apps commonly use loading
screens on boot to indicate this process (Photoshop is the example that comes
to mind). I think this is a great tool, and will fit well with that subset of
the web-dev community particularly well.

~~~
sqrt17
The point is: most of these applications (say, Photoshop, Gimp, Eclipse,
OpenOffice, probably others) are things that you load once to work with them
for a couple hours, and don't mind when they consume a lot of your system
resources.

If you look at web applications, Google's music app ("My Music" in Google
Play) uses a load screen (complete with progress bar) because it's seriously
bloated, while Amazon's Cloudplayer just loads and does its thing (which is,
playing music).

Needing a load screen is a sign that your app is not, or aims at not being, a
Web app anymore - in the sense that you'd also want to loosen the other
restrictions - give it its own window, possibly have local file storage or FS
caching, etc.; In that case, something like TideSDK (
[http://www.tidesdk.org/](http://www.tidesdk.org/) ) may come in handy to
deliver a desktop app to power users that is based on the same codebase. And,
maybe you'd still want a web app that is functional and lean. (As an example
for two apps with non-identical possibilities, Google's My Music allows you to
change song metadata on desktop browsers but not in the Android app - yet
another sign that My Music is meant as a desktop-y app).

In many cases it can be a sign of hubris or lazyness that you cannot get rid
of the bloat. Be real and think whether your users actually enjoy waiting that
time, since they'll be doing it more often, on machines with less resources
and/or slower connection, than yours.

------
mavdi
I 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
The 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)

------
forrestthewoods
No. 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
Can 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
Calling 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.

------
jacquesm
The best loading page is the one that I never see.

------
fiatjaf
"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
Like 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
I 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
I 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
As a European, I hate the false friendliness you get from waiters and shop
staff in the States. Give me a grumpy Spanish waiter any day.

------
ddoolin
I'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.

------
steve_barham
Click Here to Skip Intro

------
arscan
Ah, 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)

------
mcav
Not every app can load instantly. Better to have a reasonable loading screen
than an ugly, flickery, reflowy startup experience.

------
mindcrime
Is 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).

~~~
jhdavids8
For 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
You 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.

~~~
jalpino
I 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.

------
chavesn
This _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! ]

------
grayclhn
Jesus, we've sure defined down "beautiful" haven't we.

------
72deluxe
What'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.

------
bbcbasic
Funny 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.

------
ajorgensen
This 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.

------
tarikozket
I 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
It'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.

------
TheAceOfHearts
You 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!

------
pjf
The page doesn't load, it's stuck on the progress bar.

------
finid
If 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
Yes but, in the mean time, why not also use PleaseWait.js?

------
TickleSteve
NOOOOOOoooooooo!!!

Wrong thinking! just make it load quicker!

------
Kiro
Very nice and exactly what I needed.

