Loading facebook page shows wireframe to each post. Why?

Question

I have a curiosity about the facebook site. Why is wireframe used on the loading screen (loader view) to each post? Is there any reason for this? Have any relation with Atomic Design proposed by Brad Frost?

See the wireframe image for a facebook post:

This behavior has in several applications and libs (eg.: https://github.com/elye/loaderviewlibrary).

Answer 1

"... By giving some indication of what is going on and giving visual stimulus the user feels immediately more comfortable and less likely to leave. This is exactly like putting a progress bar on a long action. Apart from the fact it’s some fancy polish, it’s great usability. I think this feature is better than your average loading symbol because it actually feels like the content is almost there."

Explains the article by cloud cannon

"..Skeleton pattern as alternative to loading spinner. A skeleton screen is essentially a blank version of a page into which information is gradually loaded. This creates the sense that things are happening immediately as information is incrementally displayed on the screen.

With a skeleton screen, the focus is on content being loaded not the fact that its loading and that’s real progress."

Proposed by @basham via GitHub.

Answer 2

I believe they use this image as placeholder until the actual post is loaded on screen. This gives the user an idea of what will be loaded before it is actually loaded, this helps because otherwise the user would be looking at a blank page and they may not understand that it is still loading.