Ever seen those loading screens where you see gray bars instead of the actual content while the page is loading? These are called skeleton loading ...
For further actions, you may consider blocking this person and/or reporting abuse
At the risk of sounding poignant... in my opinion, skeleton loaders are either:
For example, Netflix often takes way too long to load, and I find it obnoxious - having to watch a screen full of shimmering boxes feels like a cheap trick to keep me transfixed during the wait.
It's also a lot of complexity (lots of extra CSS to maintain) to communicate something as trivial as "please wait", which can be just as (or more) clearly communicated with a single, conventional, spinning element in the center of the screen.
Sorry, but that's just my honest point of view... If you want your app to feel fast, invest your time in optimizations and make it fast - instead of investing deeper into your performance problem itself, just to cover it up.
I know that these skeleton loaders are trendy, but I still feel like they're symptomatic - and, on top of that, I don't feel like they honestly address the problem.
Just my two cents. 🙂
This is exactly what I was looking for! Finally, someone explained it!
Good to hear! It's actually pretty simple right? I might made it too complex by adding so much div's.
I wish there was a website that takes your fully loaded webpage and generates a skeleton screen that you can add to your code.
This wouldn't work with dynamic content- and that's actually fine.
The skeleton is not intended to exactly match the content of the loaded site - But it is supposed to hint what's coming.
Also, don't forget it's normally only the "Above the fold" content we care about.
My favourite way of applying a skeleton is to keep the structure of the html same as the loaded content but have the ".skeleton" class added to each element.
The class makes it look like a skeleton (i.e. apply the grey background, loading animation etc) and when the content has finished loading for the specific div - the class gets removed (by javascript).
Awesome idea, I'm gonna try to build this!
Could you please remind me the purpose of "overflow: hidden" in the body? Thanks
Sure, this is a bit unclear indeed. If you have a long page with scrolling, you only want to show the scroll bar to the user when the page has finished loading. That's why I've hidden the overflow directly inline in the body in my example (which actually does not have a scrollbar when finished, but the project I was working on had it).
Very well explained...
When we added skeletons to our site the management complained that it's broken, makes everything slow, and they want white screen instead... :broken-heart:
Ha! Did they want the page load 'naturally' or just a blank screen? A loading spinner would be another option.
Another smart trick is to only load the 'above the fold' part directly and show the rest when it's finished. Checkout how these guys do it, the top part almost loads instantly and the rest comes later: coolblue.nl/
Just blank, they hate all sorts of loaders, spinners, etc.
how to do it dynamically?