The most important part to get your site fast is to bundle everything in a static page. Do not send an empty page to the end user with lots of javascrit that then starts to incrementally load one element at a time with many API requests. That is how you get to 90s internet performance.
Cool tutorial, I dig it. I've been using something pretty similar for years, which has worked great. I use a "data-attibute" approach and the :empty CSS pseudo-class. So, on the parent DIV that you're loading stuff into, have a data-attr, examples such as: data-skeleton-load="full" or data-skeleton-load="table" or data-skeleton-load="card" or data-skeleton-load="form". Basically just keep the parent DIV empty until the data loads in, and while empty, the css loading animation will occur from one of your loading templates. Kinda same idea, just a little different.
funny how this is the last thing to a big intranet dashboard page where sometimes its good to have something like a skeleton loading, perfect timing master web :D
After watching this video I just implemented it on an app I am working on at work. I used some very different settings, but this video inspired me to give it a whirl. Because it's an internal tool and there is a very fast load time it wasn't totally needed, but I had a fun time trying it out. Thanks for this video!
This is absolutely great, I noticed youtube video has a loading animationa and wondered how it works and your video is recommended by TH-cam. So GREAT.
I was eager to know how it does previously. Then the trick part is that, you better know how many contents (cards) you gonna populate, or simply fill the view port with cards, kind of brutal. Great content !
@@OdyssME Emptying the grid only clears out the placeholder cards. There are no animations on the grid element itself. The skeleton text animations are not a problem, since he replaced the contents of the title and body of the card, clearing the animated placeholder divs. However, the image still has the animation going on after it's loaded. To disable this behaviour, you could do something like: const img = div.querySelector('img') img.addEventListener('load', () => { img.classList.remove('skeleton') }, { once: true })
Exactly what I was thinking. Maybe we can toggle the class the classList method in javascript before and after the actual data has been loaded like element.classList.toggle("skeleton");
"one of the best loading experiences a user can experience" - is a reminder of what we are really telling the user: you cannot yet interact with this site. I'm glad Kyle effectively acknowledges this upfront since I have "front end devs" who think they are adding some sort of functionality to the site by using this. Still, this is good info for when it is appropriate to use.
thats a lot of boilerplate code just for the placeholder.. can you put the content of the boilerplate code in css itelsef? like using css *content* property?
Hello Sir! I am Areeb. I watched your video. Appreciate it because your videos help me to make different project. But I googled a lot about how to make web hosting machine or web server. Can you tell us more about web server.
Material-UI v5 (to be released on September 1st) will include a skeleton component for all React Developers, with almost the same styles as Kyle's demo.
I'm just here to give props for when the topic is specific, straightforward, and not clickbait. We can't just comment on the negative
Cool
This is precisely what I needed, was just about to make some of these tomorrow lol!
Cringe
@@elpolodiablo5486 No.
Update?
Nyoom
me too
The most important part to get your site fast is to bundle everything in a static page. Do not send an empty page to the end user with lots of javascrit that then starts to incrementally load one element at a time with many API requests. That is how you get to 90s internet performance.
Thanks kyle. Before I have no idea about Skeleton!
Cool tutorial, I dig it. I've been using something pretty similar for years, which has worked great. I use a "data-attibute" approach and the :empty CSS pseudo-class.
So, on the parent DIV that you're loading stuff into, have a data-attr, examples such as: data-skeleton-load="full" or data-skeleton-load="table" or data-skeleton-load="card" or data-skeleton-load="form".
Basically just keep the parent DIV empty until the data loads in, and while empty, the css loading animation will occur from one of your loading templates.
Kinda same idea, just a little different.
Exactly what I needed to know right now. Thank you you are awesome
Wow!! haven't thought it was so simple. Thanks for this Kyle :)
same here
I wanted this kind of stuff from your channel a year ago, but now I have it. I have been doing it the hard way, thanks for simplfying the web!
funny how this is the last thing to a big intranet dashboard page where sometimes its good to have something like a skeleton loading, perfect timing master web :D
After watching this video I just implemented it on an app I am working on at work. I used some very different settings, but this video inspired me to give it a whirl. Because it's an internal tool and there is a very fast load time it wasn't totally needed, but I had a fun time trying it out. Thanks for this video!
Your consistent new videos are so refreshing. I knew I made the right decision subscribing mate. Thank you Kyle ❤️
This is absolutely great, I noticed youtube video has a loading animationa and wondered how it works and your video is recommended by TH-cam. So GREAT.
I was eager to know how it does previously. Then the trick part is that, you better know how many contents (cards) you gonna populate, or simply fill the view port with cards, kind of brutal. Great content !
Just thought about it yesterday and today it's here. Thanks Kyle 👍
Isn't leaving the animation still on after the contents have loaded bad for the performance? I thought animation increases CPU usage.
I agree. Css animation use a lot of cpu
@@OdyssME Emptying the grid only clears out the placeholder cards. There are no animations on the grid element itself. The skeleton text animations are not a problem, since he replaced the contents of the title and body of the card, clearing the animated placeholder divs. However, the image still has the animation going on after it's loaded. To disable this behaviour, you could do something like:
const img = div.querySelector('img')
img.addEventListener('load', () => {
img.classList.remove('skeleton')
}, { once: true })
@@Italiafani excellent bro!
@@Italiafani You're right, I have omitted the skeleton class left in the image.
Exactly what I was thinking. Maybe we can toggle the class the classList method in javascript before and after the actual data has been loaded like
element.classList.toggle("skeleton");
Couldn't have come at a better time, I needed this at work! :D
As allways you coming right on time, exactly when i wonder how to implement it well haha,
Thanks again man!
Thanks the great content. I’m doing some page content loading this works better then loading bar
I didn't even know how to search this thing. Thank you Kayle.
Love your video man!
From Nigeria...
I exactly understood your video and implemented skeleton UIs myself. Thank you
Okay I'm sure you're reading my mind. First with stripe and now this. Thanks so much man!!
I was just thinking about this one, Thank you for this ❤
Awesome 😎
Love From Nepal 🇳🇵
Wonderful
Waiting for long time for the right video....
Very nice and concise.
Would love to see more css shorts like this.
This is what I was searching for Thankx bro❤️
I didn't know you could throttle the speed, that is awesome
Awesome content as always, thank you Kyle!
Easy Tutorial thanks really helped . Makes UX really better
Looked so simple yet so effective! Thanks for sharing this.. keep doing these things!
So much to learn on every topic :)
Thanks a lot for this. I was legit thinking about learning how to implement this on my site
Another great video, thanks man!
amazing, thanks!
That was a smooth implementation.
Yep
Neat idea but I still like a splash screen. Diff'rent strokes and all that eh?
Nice work Kyle, always look forward to new content from you man.
You are great dud thanks!
Thanks Kyle. But it killed me when you typed "Lorem1" 😂😂
I've been looking for it, Thank you so much
Exactly what I need, very simple, understandable and so accurate. Thank you so much !
Thanks for idea for loading screen for my frontend!
It looks professional, thanks man
Thanks a lot for this video!
Kyle is on 🔥. Awesome job bro 👍👏
Your videos are awesome! Thank you for doing these. I’ve watched so many of them.
5:27 there is a problem, you are making the image transparent too
Yeah I noticed, but good thing he said in his opinion, so it's personal preference matter I guess.
You can add opacity property on the image
Great content 👍
So simple so nice. Well done
These videos are incredibly helpful.
*0 dislike u deserve it!* ♥♥
Yes
nice its so easy to do lol. thank you
also nice trick for dealing with data coming from the server by using cloneNode
Great Man
High quality information. Thank you so much
"one of the best loading experiences a user can experience" - is a reminder of what we are really telling the user: you cannot yet interact with this site. I'm glad Kyle effectively acknowledges this upfront since I have "front end devs" who think they are adding some sort of functionality to the site by using this. Still, this is good info for when it is appropriate to use.
Many Thanks, this was really helpful.
As always - great tutorial. 😍
Thank You so much, it might be useful in future projects.
You explained it very well
Eagerly waiting to see right approach about preloader / skeleton loader...
Hey Adarsh. Are you looking out for opportunities in software development currently? Did you work on projects related to React/Node?
@@Hafsa0526 Not intrested...
Excellent video! Thanks for sharing this. Very handy. 👍🏼👍🏼
This man is 🔥🔥🔥🔥🔥🔥🔥
Looks great! Thank you very much.
I like your Jackson. I have 5 of them!
bro that is amazing and i realy need that
Thanks a lot!
Thanks for this 👍❤️
really amazing bro how we simply we can create a skeleton loading in just few minutes
It's way better than those circle or linear loaders, because this will not flicker html containers when the real content will be rendered.
Thank you very much, great explanation, I like it
Good one
Thanks mate 😄
Thanks again
I was thinking about how to do that from long time. Thank you 💓
Thank you
You are awesome, can you make a video on Lazy Loading with image?
Awesome stuff, thank you Sir.
TOP 👌🏽...dependent dropdown in react js 🙏
Ay thanks. Very helpful
Async UI FTW!!!
Cool content bro ❤️❤️
Thank you very much my friend, this is exactly what I was looking for. Very understandable and simple. You have just gained a new subscriber
Cool vid. Thanks bro.
thats a lot of boilerplate code just for the placeholder.. can you put the content of the boilerplate code in css itelsef? like using css *content* property?
I’ve made a generator for this. No html needed
great video, thanks. What if I am not using javascript to prepopulate the fields, the loader won't work
Hello Sir! I am Areeb. I watched your video. Appreciate it because your videos help me to make different project. But I googled a lot about how to make web hosting machine or web server. Can you tell us more about web server.
Material-UI v5 (to be released on September 1st) will include a skeleton component for all React Developers, with almost the same styles as Kyle's demo.
Thanks Kyle
Thanks a lot Kyle:)
Thank you so much! Awesome content
That is very slick!
Ty. Good that I subbscribed on channel a while ago =)
Awesome video .. thank you kyle..
How can I add eventListener to all the elements and show different data when the elements are clicked?
button 1
button 2
button 3
let all_btn = document.querySelectorAll("button");
all_btn.forEach(function(btn) {
btn.addEventListener("click", function() {
console.log(this.innerHTML + " is clicked")
});
});
Hey Anand. I hope you have found a solution to your query. Are you looking out for job/internship opportunities in web development?
Thanks, really helpful.
Can you please explain, how did you hide the "Skeleton Text" and display "actual text"?
👍👍👍 Thank u.
I think you just read my mind!
Thanks for sharing.
Awesome, thanks you very much
Amazing content thanks
amazing content crack ✔✔🙌
Excellent