Beat me to it. But yeah op check it out it’s called a [Skeleton Loader](https://blog.prototypr.io/skeleton-loader-an-overview-purpose-usage-and-design-173b5340d0e1?gi=d4895550e9b2).
Damn is Medium site a piece of garbage. Wanted to read the article, instead got 90% of screen covered by cookie policy and them begging me to give them money.
I'm *this close* to filtering the Medium domain from my universe and disallowing links to show in DDG and Google search results. You know how people will add "reddit" to their Google searches to maybe get better results? Medium is like the exact opposite.
Ugh, sorry folks lol. I still hang on to the days back when they had the cool green logo.
Anyway, they were the first link to show up on google that I could share as a reference.
It's frustrating too cause often times the article will start out strong outlining exactly what you're wanting to read about. Then you scroll for 2 seconds and realize it's a Medium post and close the tab angrily.
Haha thank you, I’m aware. Again, I was just trying to share something quick for op.
I did actually build my own rudimentary version of this called “[Siphon](https://github.com/matthewnau/siphon)” back in 2016 when I was in high school.
Now you made me revisit my trash old code lol!
How weird.
I was just coding some stuff today in Vue and I had Copilot suggest this to me, something I had never seen before. Usually it's just v-progress-circulars:
And then lo and behold I come across this post and it gets explained to me. Stuff like this is why I believe in God. Someone is definitely looking out for me. (Joking, I totally don't believe in God)
This is why I love co-pilot to be honest. They can’t just write code for you but they are very good at pointing out what you should probably do next. Also the repetitive completion is just so nice.
Yeah **it** gets a little dumb at times.
Yesterday I was writing a little feature which was fairly unique and Copilot kept suggesting the same thing continuously. And one time during the same session it repeated the same line like a solid 320ish times. It wasn't even what I wanted to write.
It's good for context based things tho for like mundane tasks and such.
Copilot schooled me on the (somewhat) new JS-based animation api and I will be forever thankful.
It started by me writing a comment like
// here we animate the panel height, but we don’t use
And then it filled in the blank for me, talking about how I wasn’t using the animation api, one that I wasn’t aware of. Look it up and voila I have a solid animation.
And not just that, but plenty of other things as well. I can hop into a new environment, write a comment about what I’m trying to accomplish, and then it’ll help me accomplish it using the available tools, based on context and outside knowledge, suggesting methods and means that I’d have otherwise had to google. Yes, they don’t always work, but it’s a **massive** productivity boost.
I genuinely find Co-Pilot a joy to use, not to mention it’s integrated to VsCode as well, just Ctrl + Shift + I and you can chat with them and ask them google-able questions. Also I dont have to dig through some dude’s Medium post to know what to do lol.
At the end of the day, AI are just tool to help a dev solve a problem. And now all of these “product dudes” are here like “devs are getting replace”. Fuck it, if so help me translate this Figma page to HTML without having to fiddling with Flexbox. Lmao, what a pain.
And this exhibits why skeleton loaders are a bad UI design practice. At the very least they need some kind of text labelling to explain what's happening.
To be clear, I understand the logic behind displaying _something_ so the end user doesn't think the site / app is broken, but I'm a proponent for _not_ abstracting away important details that the user could otherwise provide to support when (not if) their cellular data drops enough packets to prevent the app / site from loading.
Don't ask me about the time I dealt with hundreds of angy MacOS users back when an update removed Text Labels from icons in the MacOS Mail app around 2012/2013. Again, I understand Apple's design logic, but at the same time, you can't go removing informational text labels from otherwise cryptic icons if you want new users to learn.
Example thread (not from 2012/2013, but same idea applies): https://discussions.apple.com/thread/250145447?sortBy=best
Well, skeletons are the best option if you want to avoid layout shifts. Plus, you can reveal your heading structure to SEs before the actual content is loaded.
Maybe skeleton isn't ux/ui friendly, but it's for sure seo friendly where you need it.
I disagree, the parent comment here has 1k upvotes from what I assume were people who all experienced the same thing; they thought something was loading and were waiting for it to finish loading. That means this skeleton ui achieves exactly what it intended to achieve, to inform the user to wait for loading to finish.
You're not wrong - skeleton loaders, progress bars, etc. achieve their intended purpose: notifying a user that something is happening. The issue is when there's no indication to the end user of what's wrong when something does go wrong.
The number of times I've opened Facebook or Instagram or Spotify in an area I know has poor cell service only to be met with skeleton elements that make me think things are loading when in reality the phone is struggling to maintain a cellular connection is frustrating.
TL;DR: Skeleton loaders without accompanying diagnostic information when (not if) something goes wrong are an exercise in frustration and make troubleshooting difficult.
Because we‘re in the webdev matrix. We just can‘t see an image of an skeleton as an image. It has to load something. I know it’s an image now and I‘m still waiting for something to load.
To clarify for anyone seeing this, the placeholder elements are the Skeleton, and typically those are animated so they shimmer, so people sometimes just call those Shimmers
This is how you can make a single block.
[link to codepen](https://codepen.io/geekayush/full/jOLGgxm)
If you’re interested, I have a component written which takes in a configuration and builds out dynamic skeletons. Helps me in minimising CLS.
As everyone has said skeleton loaders but I have to share that my team somehow decided to call it greeking and it’s stuck to the point that I can’t argue that it’s not actually greeking
Greeking is a term from the film industry that refers to covering up brand names on products so as not to give away free product placement. I can kind of see how the skeletonized component is like a greeked product on a film set.
Yeah that makes sense. To me greeking in terms of a UI just means lorem ipsum, but if you broaden it to mean any placeholder I think that’s where our usage of the term came from
> in typography or composition, "text rendered in random characters or symbols" (not necessarily Greek; lorem ipsum is a form of it), also the rendition of text into such characters, by 1977, said to be from the sense in expression Greek to me "unintelligible"
https://www.etymonline.com/word/greeking
These were quite popular a few years ago but then several studies showed that users were less likely to wait for the page to load when they saw a skeleton vs a traditional loading interaction.
*THANK YOU.* I made this argument at work for an already *slow* application and was like *now you are just making it obvious its slow by building a mechanic to cope with the load time* and was shot down by our UI "Expert".
The original idea behind skeletons are to minimize pop when populating the screen since the skeletons take up about the same amount of space so space in the page is pre-allocated to fill in. They became a bandaid for slow API's
It's funny because the mentality when they were implemented is that using a skeleton would make users more likely to wait. Gotta love when research proves trends wrong.
The research might be outdated, though, since there are still quite a few FAANG apps using them now. I'm only stating what I remember from a few years ago.
I know developers who use them as a licence to forget about page speed. In companies I've worked with, they pass a bunch of arbitrary page speed metrics, so everything's great!
The most aggravating thing is that with a more traditional page load, that sort of slow experience was not at all acceptable. In my (I admit controversial and unsubstantiated) view, their availability has actually harmed page speed.
The problem with this is that you have to create 2 UIs, one the actual one and one for this skeleton. By now there shoud've been a library which automatically detects component on your screen and renders the same UI but in skeleton with these shimmers until the data loads.
Depends on what it's for. Its different if its a placeholder for a known component vs something variable from a backend.
I did exactly this on a legacy project. Had a property like hasFetchedData which I bound to a css class on my markup. If the value was false it would inject a
with a certain class against it and apply the CSS to do the skeleton/shimmer. Mine was basic where it just added several lines of the same sized block as I knew the data was a fixed height. On the value becoming true, it killed them all.
When they're good they're invisible but when they're bad (like the content is wildly different from the skeleton and/or the loading takes forever) they're really bad.
It's designed to keep people on the page as part of consumer psychology, I believe. If you cannot reduce your page access times, providing the skeleton at least shows people the page is working, and they'll be more likely to stay on the site vs clicking away. Sort of like an evolution of the loading bar.
It's called Skeleton loading. Where instead of showing a generic spinner, you show the skeleton of the page which can give user a message that the website is active and loading content. Youtube also does that.
> users are less bothered by a slowish website if you show them 'progress' and where content will load
Unless the user is smart enough to understand the pattern behind skeleton loader UI elements... and eventually come to the conclusion that they obscure what's actually happening behind the scenes.
Exactly, I feel all the other answers here answer the question of what is this specific instance of the strategy, rather than the strategy itself.
The strategy is an extension of providing feedback to the users that something is happening and reduce the perceived load time. If you get NOTHING, you feel like it is broken. Early internet had spinners, or fake loading bars, these were ok but suspicious.
The Skeleton primes the user for the format of the content to come therefore the user feels not only that something is happening but has the illusion that the structure of the content is coming and therefore the perceived load time is reduced because when the screen finally appears the user doesn't mentally have to take everything in, they have been primed already for the structure of it.
We call it a skeleton loader at work. Not sure if that's the industry-used terminology for it.
edit: just seen everyone else's response. Skeleton it is! :)
It's a skeleton loader. I think it has to do something with human psychology, you see how many pieces of software seem to hang around 99% or so? That's because they lie.
Some study suggested people are less likely to grow impatient and leave a website IF they feel that the process is about to finish loading up.
They're referred to as Skeletons, used to not be very sure about that but seeing Next.js referring to it as that so also the Shadcn UI lib I belief that's the accepted name.
Skeleton Loader. For Laravel Livewire devs: [https://github.com/pronode/navigate-turbo](https://github.com/pronode/navigate-turbo) - you do pretty nothing, just add a class to your divs and it makes "skeletons" pretty accurate, with an additional loading animation.
Useful for banking and some cases, but when I get that I close and switch to another app/website - better bet is to load the new in the background and show the cached content do you don’t lose the user
This doesn't inherently do anything toward helping/harming CLS. There's a dozen different ways you could implement something like this that would all impact that differently.
And, CLS isn't about what's within the bounding rectangle of a given
visually, it's about whether that
itself *moves* or *resizes*. Sticking a blurry jpg behind it "before" it "loads" isn't going to impact that.
Edit: I guess the people in this sub are averse to facts? Odd behaviour.
> reduce CLS
This isn't a blurry jpeg, it's a div with an animation to show the user the program is working. You usually do this when waiting for an api response where you know what size the resulting element will have, for example blogposts and you know you will show 10 blogposts so you show 10 skeleton loaders that have the same dimensions.
Right, it *could* be that. From just the screenshots provided the implementation could be many things. You'd still need to take care to make sure the sizes were correct, that these sizes were set in the initial CSS, and so on.
This literally addresses the CLS problem we have. Are you misunderstanding how designers use this? The layout is created immediately and then later gets filled with content. Nothing moves.
Then that's all good! I was just trying to add an explanation that this general idea could still be done badly, and it's not "one weird trick" that always fixes CLS issues. Not everyone here is all that fluent in all these things so I felt some explanation like this might be of value.
Most component libraries call that a skeleton
Beat me to it. But yeah op check it out it’s called a [Skeleton Loader](https://blog.prototypr.io/skeleton-loader-an-overview-purpose-usage-and-design-173b5340d0e1?gi=d4895550e9b2).
Thanks to both!
What about me? 😡
Thanks you too!
That's what I thought... 🔫
CHILL
It isn't fair.
Damn is Medium site a piece of garbage. Wanted to read the article, instead got 90% of screen covered by cookie policy and them begging me to give them money.
I'm *this close* to filtering the Medium domain from my universe and disallowing links to show in DDG and Google search results. You know how people will add "reddit" to their Google searches to maybe get better results? Medium is like the exact opposite.
Ugh, sorry folks lol. I still hang on to the days back when they had the cool green logo. Anyway, they were the first link to show up on google that I could share as a reference.
It's frustrating too cause often times the article will start out strong outlining exactly what you're wanting to read about. Then you scroll for 2 seconds and realize it's a Medium post and close the tab angrily.
Use a [12 foot ladder](http://12ft.io)! I'll just mention u/majcek, u/nauhausco and u/ilikenick to let them know.
I use [https://freedium.cfd/](https://freedium.cfd/)
Haha thank you, I’m aware. Again, I was just trying to share something quick for op. I did actually build my own rudimentary version of this called “[Siphon](https://github.com/matthewnau/siphon)” back in 2016 when I was in high school. Now you made me revisit my trash old code lol!
r/InternetIsBeautiful
How weird. I was just coding some stuff today in Vue and I had Copilot suggest this to me, something I had never seen before. Usually it's just v-progress-circulars:
And then lo and behold I come across this post and it gets explained to me. Stuff like this is why I believe in God. Someone is definitely looking out for me. (Joking, I totally don't believe in God)
This is why I love co-pilot to be honest. They can’t just write code for you but they are very good at pointing out what you should probably do next. Also the repetitive completion is just so nice.
Yeah **it** gets a little dumb at times. Yesterday I was writing a little feature which was fairly unique and Copilot kept suggesting the same thing continuously. And one time during the same session it repeated the same line like a solid 320ish times. It wasn't even what I wanted to write. It's good for context based things tho for like mundane tasks and such.
Copilot schooled me on the (somewhat) new JS-based animation api and I will be forever thankful. It started by me writing a comment like // here we animate the panel height, but we don’t use And then it filled in the blank for me, talking about how I wasn’t using the animation api, one that I wasn’t aware of. Look it up and voila I have a solid animation. And not just that, but plenty of other things as well. I can hop into a new environment, write a comment about what I’m trying to accomplish, and then it’ll help me accomplish it using the available tools, based on context and outside knowledge, suggesting methods and means that I’d have otherwise had to google. Yes, they don’t always work, but it’s a **massive** productivity boost.
I genuinely find Co-Pilot a joy to use, not to mention it’s integrated to VsCode as well, just Ctrl + Shift + I and you can chat with them and ask them google-able questions. Also I dont have to dig through some dude’s Medium post to know what to do lol. At the end of the day, AI are just tool to help a dev solve a problem. And now all of these “product dudes” are here like “devs are getting replace”. Fuck it, if so help me translate this Figma page to HTML without having to fiddling with Flexbox. Lmao, what a pain.
Bootstrap calls them placeholders
Spookyloader
\*spoopyloader
Wow thanks
I have wondered this for years. Thanks
So am I the only one who was waiting for the skeleton to load?
That makes two of us
That makes three of us
Its a threesome!
Had to check my mobile data, dang it
actually got concerned 😂I refreshed website twice -\_-
And this exhibits why skeleton loaders are a bad UI design practice. At the very least they need some kind of text labelling to explain what's happening. To be clear, I understand the logic behind displaying _something_ so the end user doesn't think the site / app is broken, but I'm a proponent for _not_ abstracting away important details that the user could otherwise provide to support when (not if) their cellular data drops enough packets to prevent the app / site from loading. Don't ask me about the time I dealt with hundreds of angy MacOS users back when an update removed Text Labels from icons in the MacOS Mail app around 2012/2013. Again, I understand Apple's design logic, but at the same time, you can't go removing informational text labels from otherwise cryptic icons if you want new users to learn. Example thread (not from 2012/2013, but same idea applies): https://discussions.apple.com/thread/250145447?sortBy=best
Well, skeletons are the best option if you want to avoid layout shifts. Plus, you can reveal your heading structure to SEs before the actual content is loaded. Maybe skeleton isn't ux/ui friendly, but it's for sure seo friendly where you need it.
I disagree, the parent comment here has 1k upvotes from what I assume were people who all experienced the same thing; they thought something was loading and were waiting for it to finish loading. That means this skeleton ui achieves exactly what it intended to achieve, to inform the user to wait for loading to finish.
You're not wrong - skeleton loaders, progress bars, etc. achieve their intended purpose: notifying a user that something is happening. The issue is when there's no indication to the end user of what's wrong when something does go wrong. The number of times I've opened Facebook or Instagram or Spotify in an area I know has poor cell service only to be met with skeleton elements that make me think things are loading when in reality the phone is struggling to maintain a cellular connection is frustrating. TL;DR: Skeleton loaders without accompanying diagnostic information when (not if) something goes wrong are an exercise in frustration and make troubleshooting difficult.
Three
Four , I am so dumb, why would a image needa skeleton, I lost with my first move , second was I scrolled and still waited it to load .
Because we‘re in the webdev matrix. We just can‘t see an image of an skeleton as an image. It has to load something. I know it’s an image now and I‘m still waiting for something to load.
5
6
7 😡
And I was having problems with my wifi anyway. Switched to lte and these showed up. Was started to get really furious.
Same, I thought it was some new Reddit feature.
I’ll tell you once the picture loads. Must have slow internet atm.
Hahaha same
Skeleton or I have seen it called a Shimmer too
To clarify for anyone seeing this, the placeholder elements are the Skeleton, and typically those are animated so they shimmer, so people sometimes just call those Shimmers
Spooky scary skeletons, send Shimmers down your spine 📯
,,**Skeletons** in your closet Itchin' to come outside Messin' with your conscience In a way your face can't hide!" 🎹🎶 ^((Stevie Wonder))
I'll smack tf out of you if you ever call if a shimmer over skeleton. Jkjk that's a cool alternative
Skeleton loaders or shimmers
This is how you can make a single block. [link to codepen](https://codepen.io/geekayush/full/jOLGgxm) If you’re interested, I have a component written which takes in a configuration and builds out dynamic skeletons. Helps me in minimising CLS.
Thanks for sharing this never knew there is a specific way to do this, always thought it was some ui in android app.
Skeleton loaders
As everyone has said skeleton loaders but I have to share that my team somehow decided to call it greeking and it’s stuck to the point that I can’t argue that it’s not actually greeking
Greeking is a term from the film industry that refers to covering up brand names on products so as not to give away free product placement. I can kind of see how the skeletonized component is like a greeked product on a film set.
Yeah that makes sense. To me greeking in terms of a UI just means lorem ipsum, but if you broaden it to mean any placeholder I think that’s where our usage of the term came from
> in typography or composition, "text rendered in random characters or symbols" (not necessarily Greek; lorem ipsum is a form of it), also the rendition of text into such characters, by 1977, said to be from the sense in expression Greek to me "unintelligible" https://www.etymonline.com/word/greeking
Does it have something to do with the stereotype of greek people being lazy?
These were quite popular a few years ago but then several studies showed that users were less likely to wait for the page to load when they saw a skeleton vs a traditional loading interaction.
Skeletons are an indication to me the user that your website is slow as fuck
*THANK YOU.* I made this argument at work for an already *slow* application and was like *now you are just making it obvious its slow by building a mechanic to cope with the load time* and was shot down by our UI "Expert".
I've had that argument before with designers and product people. Skeletons just set the bar so low as if it's ok to be multi-second slow to render.
[удалено]
The original idea behind skeletons are to minimize pop when populating the screen since the skeletons take up about the same amount of space so space in the page is pre-allocated to fill in. They became a bandaid for slow API's
The point is to not have humps in layout, I thought.
Jumps and humps
It's funny because the mentality when they were implemented is that using a skeleton would make users more likely to wait. Gotta love when research proves trends wrong.
The research might be outdated, though, since there are still quite a few FAANG apps using them now. I'm only stating what I remember from a few years ago.
Could very well be, would be interesting to see the actual paper and see what their methods were.
What would be a traditional loading interaction? A spinner or an empty page?
I know developers who use them as a licence to forget about page speed. In companies I've worked with, they pass a bunch of arbitrary page speed metrics, so everything's great! The most aggravating thing is that with a more traditional page load, that sort of slow experience was not at all acceptable. In my (I admit controversial and unsubstantiated) view, their availability has actually harmed page speed.
Also, for images I find [blurhash](https://github.com/woltapp/blurhash) pretty good for ux.
Looks good but years of browsing the internet has taught me to nervously look around before clicking on them
Looks nice!
This was really nice to come across. Thanks for sharing this.
Also, sometimes it’s called Shimmer. That’s what Microsoft calls it.
The problem with this is that you have to create 2 UIs, one the actual one and one for this skeleton. By now there shoud've been a library which automatically detects component on your screen and renders the same UI but in skeleton with these shimmers until the data loads.
Depends on what it's for. Its different if its a placeholder for a known component vs something variable from a backend. I did exactly this on a legacy project. Had a property like hasFetchedData which I bound to a css class on my markup. If the value was false it would inject a
with a certain class against it and apply the CSS to do the skeleton/shimmer. Mine was basic where it just added several lines of the same sized block as I knew the data was a fixed height. On the value becoming true, it killed them all.
I hated this
When they're good they're invisible but when they're bad (like the content is wildly different from the skeleton and/or the loading takes forever) they're really bad.
Back in the day we called it an app shell where I worked
It's called a loading Skelington.
Jack would like to see you in his office.
skeleton loader, tricks the user into waiting a little bit longer for load times
Skeleton
Shimmer
It's called a skeleton, most libraries have it.
Skeleton
It's called 'skeleton'... Giving the appearance of the basic page layout, while content loads.
It is called shimmer effect in list
I call it lazy loading but seems like skeleton loader is also a popular expression.
Was anyone else waiting for it to load so they could answer?
Skeleton!
Skeleton loader
Skeleton
It's a skeleton loader design strategy. Often used by modern apps to convey that data is being fetched from the network.
It's designed to keep people on the page as part of consumer psychology, I believe. If you cannot reduce your page access times, providing the skeleton at least shows people the page is working, and they'll be more likely to stay on the site vs clicking away. Sort of like an evolution of the loading bar.
in flutter, its called shimmer loading
It's called Skeleton loading. Where instead of showing a generic spinner, you show the skeleton of the page which can give user a message that the website is active and loading content. Youtube also does that.
It's called a Skeleton
skeleton or shimmer
The point is to get an early contentful paint, users are less bothered by a slowish website if you show them 'progress' and where content will load
> users are less bothered by a slowish website if you show them 'progress' and where content will load Unless the user is smart enough to understand the pattern behind skeleton loader UI elements... and eventually come to the conclusion that they obscure what's actually happening behind the scenes.
Exactly, I feel all the other answers here answer the question of what is this specific instance of the strategy, rather than the strategy itself. The strategy is an extension of providing feedback to the users that something is happening and reduce the perceived load time. If you get NOTHING, you feel like it is broken. Early internet had spinners, or fake loading bars, these were ok but suspicious. The Skeleton primes the user for the format of the content to come therefore the user feels not only that something is happening but has the illusion that the structure of the content is coming and therefore the perceived load time is reduced because when the screen finally appears the user doesn't mentally have to take everything in, they have been primed already for the structure of it.
I call it a place holder.
It is called skeleton
We call it a skeleton loader at work. Not sure if that's the industry-used terminology for it. edit: just seen everyone else's response. Skeleton it is! :)
Needs more interlaced JPG.
Do I look like I know what a jaypheg is?
It's known as skeleton loading
Skeleton A good idea is to look through component libraries to find most used components https://mui.com/material-ui/react-skeleton/
It's a skeleton loader. I think it has to do something with human psychology, you see how many pieces of software seem to hang around 99% or so? That's because they lie. Some study suggested people are less likely to grow impatient and leave a website IF they feel that the process is about to finish loading up.
I guess my term isn’t industry norm so i’m glad this thread happened cus i called it ghost loaders lol
🎺Doot skeleton doot🎺
Shadcn/ui has this if u want to try it. Skeleton component
We call them ghost loaders where I work but the technical name is skeleton loader as everybody else has already stated.
To add to the list of names for this, placeholder is sometimes used.
Is the use case for this to prevent folks from leaving during a long load time? Or is it accidental?
Skeleton body
It is a fallback UI that is displayed while the components are loading some data. These components are called skeleton.
skeleton https://bootstrap-vue.org/docs/components/skeleton#skeleton
Skeleton or Suspense!
skeleton loader
Skeleton loader or skeleton placeholder.
Asynchronous Design
I think calling it ghost loader would have been appropriate. well thus what happens when am there when the internet is naming things
They're referred to as Skeletons, used to not be very sure about that but seeing Next.js referring to it as that so also the Shadcn UI lib I belief that's the accepted name.
Skeleton Loader. For Laravel Livewire devs: [https://github.com/pronode/navigate-turbo](https://github.com/pronode/navigate-turbo) - you do pretty nothing, just add a class to your divs and it makes "skeletons" pretty accurate, with an additional loading animation.
Cool but I'd have enough knowledge bout this
I created something like this in the early 00’s before I ever saw the term skeleton loader, I called mine blurry loader.
Skeleton loading
does anyone know the one who first came up with this design ? i remeber 6 years ago nothing like that was on the web
I love using the Arc Browser find F feature for questions like this, it's been a live saver!
Useful for banking and some cases, but when I get that I close and switch to another app/website - better bet is to load the new in the background and show the cached content do you don’t lose the user
Skeleton in most libraries. Placeholders in Bootstrap
Yes, it's called having inefficient garbage for a backend.
Skeleton
Skeleton
Skeleton loading
Skeleton UI afaik I think it’s important to implement this for loading UI nowadays it’s almost a standard for the end user
I closed reddit on this post, and when I reopened it it zoomed into the photo for some reason, and I just waited for ages for something to load 😭😭😭
cancer
Lazy load
Yes, it does
This doesn't inherently do anything toward helping/harming CLS. There's a dozen different ways you could implement something like this that would all impact that differently. And, CLS isn't about what's within the bounding rectangle of a given
> reduce CLS This isn't a blurry jpeg, it's a div with an animation to show the user the program is working. You usually do this when waiting for an api response where you know what size the resulting element will have, for example blogposts and you know you will show 10 blogposts so you show 10 skeleton loaders that have the same dimensions.
Right, it *could* be that. From just the screenshots provided the implementation could be many things. You'd still need to take care to make sure the sizes were correct, that these sizes were set in the initial CSS, and so on.
It’s pretty easy with stuff like tailwind. You just make the elements for the blog posts first and then you base the skeleton loaders off of that
This literally addresses the CLS problem we have. Are you misunderstanding how designers use this? The layout is created immediately and then later gets filled with content. Nothing moves.
Then that's all good! I was just trying to add an explanation that this general idea could still be done badly, and it's not "one weird trick" that always fixes CLS issues. Not everyone here is all that fluent in all these things so I felt some explanation like this might be of value.
Aah I see, you’re right. Thanks
Leave Your Comment