Skeleton Loaders are used very commonly in Modern Websites/Apps to indicate loading of data instead of using the traditional loaders, spinners, etc...
For further actions, you may consider blocking this person and/or reporting abuse
How do the user detail elements get the width, when on skeleton mode (without text inside)?
Nice idea to set dimensions on containers for this effect!
Yeah, if there's no text inside then we can set height for the elements. Thanks for sharing it, Tomas π
How can I just use the avatar and text beside it alone
If you mean how I'm making the avatar and text sit on the same line then for that I'm using the flex property on the container which will make the items inside it like text and avatar sit on the same line.
Okay what if I want to use the avatar and text repeatedly just like messages in Whatsapp how will I do that
Its awesome π
Thanks a lot, @amircahyadi π
Awesome !
Thanks a lot, @midouwebdev π
I've re-implemented this as a lesson on codeamigo.dev. You can check it out here: codeamigo.dev/lessons/start/87 if you're interested!
Amazing, Thank you so much β€οΈ
Nice one, but how do you determine the number of skeletons to display compare to the number of incoming data
It's up to you on how many Skeletons you wanna display and if you have pagination like you only show n number of items then you can show n number of skeleton screens.
I will personally render the skeletons just enough to fill the items view port even though the number of incoming items are greater, less than or equal to the number of pre-rendered skeletons.
That's a great idea, I will keep that in mind and hopefully will implement enough skeletons to fit the viewport/layout. Thanks a lot for sharing π
nice
Thanks a lot, @zeonlife
An amazing good job, bro!!!! β€π―
Thank you so much, @maitrungdong π
But how de we make the "shine" dissapear when the content is loaded?
The idea here is to keep the Skeleton loader as its own separate component and card ( where we will show the data ) as its own component. So, you don't need to use the skeleton card to show the loaded data, we will show that in the card component and we will only use the skeleton loader element/component when we request the data to the server and until the request returns the data, once the data is returned back from the server, then we will use the original card to display the data. Hope this helps.
Amazing!!
Thanks a lot, @alanrmachado π
Well explained
Thanks for sharing your feedback, @jedstroke π
Great job !
Thanks a lot, @pipic1
Awesome stuff! Would use this instead of the material UI one π₯
Hey Aniket, Thank you so much for sharing your feedback π
I need a help from you how do I put link on the user name "Natalie Rodriguez"
How will I put link on it without showing the Blue layout