Non-blocking UI's with interface previews (opens in new tab)

Pinterest does something really clever related to this - not so much for data placeholder but for images. They have precomputed the dominant color for each image and show that color while the image loads.

http://littlebigdetails.com/post/56782380031/pinterest-befor...

Meteor -- the JS framework -- uses something much like this, which they call "latency compensation". It's a core part of their ideology. Data is prefetched or given default values that give the user at least something to look at until the actual data is fetched with AJAX.

Beyond just using spinners, Meteor will populate the fields with client-side cached data that might be a little old, and then when it receives a response from the server it updates the client-side DB with the new data and refreshes the view. If the data hasn't changed at all, the process can be completely transparent -- just an instantaneous UI update.

Because the Meteor framework encompasses both the client and server side, this can be "abstracted away" from the app developer. The abstraction isn't perfect of course but it makes it much easier to implement these kinds of ultra-responsive Web UIs.

Interesting to contrast this to what OS X(certainly Mavericks, maybe others) does. If you restart and opt to re-open previously open windows, they will open with screenshots of their previous states - only when you click on one will it dim the window and admit to you that it's not loaded yet. Personally, I find this a little irritating, giving the illusion that it's ready when it isn't. I find facebooks approach a little better, it doesn't pretend to be usable, but guides your eyes to the right part of the screen.

Personally I find the Facebook placeholders quite distracting. You still have to wait around for something to load, and scrolling down to see something that has loaded means you just have to remember scroll back up again if you want to see what was going to be there.

I am of the opposite conviction of the author. I hate it when content is the last part to be loaded.

I'm actually surprised I haven't seen this done more around the web.

It does take more work to actually have to build everything twice (first placeholder, than actual filled content) but just using some CSS classes and any decent framework like Angular would make this pretty easy to do.

This technique goes well with two-way binding libraries (Knockout, Angular etc). You give data fields default values as DOM is constructed and replace them with the real values after the actual data comes in. However, DOM reflow/layouting issues remain if some portions of data are conditionally displayed. Then some elements (placeholders) are hidden/removed after loading the actual data and that still causes the UI to jump around.

You can get a long way there with a server-rendered app, either via something like airbnb-style Rendr, PhantomJS (which has now hit 2.0), or React. Cache heavily if possible and you can get a really responsive render. It doesn't help of course for infinite scroll-style interactions, but nothing beats preloaded, static HTML! The difference, especially on slow mobile connections, is night and day.

Apps like this often look broken when they are loading (you see something like "0 results") and often don't give clear indication that this is normative, so often you don't know if this is yet another FUBAR app or if the server is slow or if you should just leave the US and move to a country which is not so dead-set against investing in broadband.

We do this in Sandglaz. On page load the skeleton of the app is there without content, and once data is ready we render the rest.

I'm a fan of this approach – another good example (although a bit more subtle that Facebook) is Trello.

Regarding the apostrophe in the title, you generally don't put apostrophes when pluralising acronyms.

yay, css spinners utilizing the full cpu time. anyway: it's worth to mention that specially for developing countries and other areas with bad link, this is an improvement and even construction of a website should acknowledge that things are slower than at your development setup.

Don't see how this is different from ajax conceptually. It is mentioned that a single page application framework is required. While an SPA framework is preferred, everything seems pretty doable with JQuery, just not as nicely prescribed.

The item individualized custom placeholders I haven't seen as a standard pattern, but I'm not sure it's worth the effort.

> "Front-end Fanatic"

With that font? Have you actually tried to read that something with that font?

My poor eyes! hashtagSadFace