Comment by bastawhiz
2 days ago
Skeletons are a loading state. Get rid of skeletons and you either have unresponsiveness or flashes of nothingness
2 days ago
Skeletons are a loading state. Get rid of skeletons and you either have unresponsiveness or flashes of nothingness
The flashes signify actual changes. It's a secondary signal to resume paying attention to the page.
What I truly hate are animated skeleton boxes or element level spinners. Why are you trying to hold my attention on something that's not even loaded yet? We all understand the UI paradigm and implicitly understand network delay, you don't need "comfort animations" to keep me happy. I'd rather use the time to look at any of the other tabs or applications across my screens. Then the flash of content actually means something.
The point of skeleton loaders is to prevent the page from jumping around furiously, which would force the user to re-parse the layout (possibly) multiple times.
In my experience it's just amateur UI design that causes this. Your display areas shouldn't change size unless the browser changes size. There should be nothing that is "content fitted." That's a historical mistake of early HTML but it's something easily overcome. You really do have to get the HTML+CSS to work like a desktop app before you layout your SPA.
Worse still, applications like microsoft outlook on the web, use the skeleton boxes with comfort animations. What they don't do is pre layout their icons. And different icons will appear in different contexts. I often get the case where I aim for one icon, something will load in, create a new icon, and push my intended target out of the click.
Skeleton loaders are a bad kludge over an initially ignored problem.
> The flashes signify actual changes
The loading state is indistinguishable from the page crashing. Did the JavaScript fail, or is the connection just slow?
> animated skeleton boxes or element level spinners
Good news! Browsers have low motion settings. Any programmer worth their salt will respect this and the skeletons won't be animated.
> Then the flash of content actually means something.
On the contrary, if the content is loaded in multiple parts (in my own application, I split the loading into multiple requests: one is cacheable across multiple pages, one is cheap, one is expensive), you either need to not render anything until everything is loaded (bad: the user can't interact with the parts that loaded first), or the page jumps around as content loads in. Skeletons fix this. UI elements in the middle don't end up being 0px tall and moving the stuff below them around nearly as much. How annoying is it to nearly click on something and the page jumps violently and you mis-click?
It honestly sounds like you just don't like lazy programming. That's very fair. Skeletons done right just mean the page is the correct layout while they're partially loaded. Without that, the content is literally unusable (you can't read it interact with things that are jumping all over the place).
Either you wait to get all the data to display the new UI, you show spinners, or you show skeletons.
Personally I prefer to wait than having multiple flashes of content but I do agree no approach is perfect.
Which is fine. Nothingness, or a generic spinner actually don't lie to me.
Skeletons lie by making an impression that the data is just about ready. So there's this failure mode where data is NOT ready because of a slow app/network, and I end up staring at a fake. Even worse, sometimes skeletons also break scrolling, so you end up even more frustrated because your controls don't work.
1. You load nothing, and the page is broken and unusable. A slow network means you see a header and a footer smooshed together.
2. You show a spinner, which is functionally equivalent to a spinner
3. You wait until the content is loaded and the page feels completely broken, because nothing is happening until it's loaded.
> sometimes skeletons also break scrolling, so you end up even more frustrated because your controls don't work.
This is just lazy programming. The skeleton should be the minimum height of the content it will be replaced by.
Again, I don't see any upsides for me compared to a blank page. Skeletons in the best case just show a useless intermediate state, and in the worst case just force me to pay attention to a non-functional page for an indefinite amount of time.
A blank page does not try to keep grabbing my attention.
Skeletons also have a toxic effect on web developers by letting them get sloppier.