React Loading Skeleton Tutorial

In this tutorial you'll learn how to build a loading skeleton using the react-loading-skeleton library.
Starting Files: github.com/nikitapryymak/reac...
React-Loading-Skeleton: www.npmjs.com/package/react-l...
Contact Me: [e-mail]
Github: github.com/nikitapryymak
Support Me: www.paypal.com/paypalme/nikit...
#react #javascript #programming

[@clumsysandesh]

The explaination was so proper, orderly, and beautiful. Keep making content like these!

[@diegonovaes4974]

Thank you so much! This helped me improve CLS score from 0.8 to 0.07 layout shift.

[@manikandanmk2959]

its working fine .. i have been struct with this shimmering loading, finally i have some idea from your video.. its really helpful. Nyz teaching work man ,,, keep rock us.

[@ajithtina]

Good one! Very well explained! Thank you for the video!

[@NIXO3D]

This tutorial is gold 🔥 Thank you 🙏🏾

[@elchungusgrande9635]

Thank you! This was exactly what I needed

[@pauldev7410]

great video, this was so helpful! keep up the good work!

[@letem748]

the second example was exactly what i was looking for. thanks for the video it was very helpful and well made.

[@nikita-dev]

thank you!

[@user-un1dk7vk4g]

Thank you , this is help me to understand Skeleton fallback ui , when using it with component fetch

[@akshitlakhera8151]

On point explaination .Thank you for making such a wonderful tutorial.

[@alvinacosta2312]

Great job bro! thank you for this! You are awesome please continue making valuable content

[@spectr-e]

Awesome my guy. You are very understandable.

[@valerbarts4436]

Great Video! Your channel is awesome. Keep up the good work.

[@alekseyc5808]

Thanks for the video! So helpful, love the intro music

[@nikita-dev]

thank you!

[@elemsimon6987]

Great video, really helpful

[@FGA-47]

Thank you, that was really helpful❤

[@vvek_7]

Thanks for the explaination

[@frontend9206]

Thank you for such great video

[@defanx441]

the explanation is so expensive xD i cant belive i can watch this for free

[@omkarparmaj3262]

thats nice you have used npm package for skeleton.

[@user-tm5gx9iu6q]

You made my day, THanKS

[@abielasimiea]

Lovely tutorial bro

[@nikhil6842]

Great tutorial, thanks

[@cameleonarabic8124]

you're a good teacher!

[@beloaded3736]

Omg i needed this, thanks

[@Rabiul-gk1cc]

Thanks ! It is helpful. ♥

[@deveshb793]

Thanks for the vid mate:)

[@bharatshah9835]

It's works perfect at my end but i need a help like how to apply this in responsive page.

[@satishmaurya2089]

it was useful. Thanks a lot sir

[@aleksey6151]

Amazing video

[@KM_1024]

Thank you for content!

[@morphine496]

This was great, it really helped me a lot in understanding how the skeletons work.

[@nikita-dev]

I’m glad it was helpful!

[@yousafwazir3167]

Amazing thanks

[@nguyentranhieuphuong8523]

Love your content.

[@nikita-dev]

thank you!

[@anuj7286]

Nice work sir

[@kamamedia3535]

Nice one der.

[@amangwari]

Thank you ❤

[@webshipon1941]

good jobs sir love you🥰🥰

[@ycombinator765]

beautiful

[@albaraa_49]

Great.. thanks❣

[@bogdy8191]

Love u bro

[@longnhat6405]

thanks, very nice

[@aothymahmudmoon3578]

Thanks you sir

[@sagar8964]

thanks!!

[@fernandocosta3307]

Thank you 😎😎

[@PeriklesPeriklesoglu]

thank you

[@31ashaswatraj44]

9:50 When I'm going to another page and coming back the web is calling the api again and we see the loading again I want that when I already opened the page and data is loaded then while navigating back we don't see loading means data shouldn't be refreshed until we refresh the page....
Are you Understanding my thoughts

[@torinkai4169]

What are your VSC options? The theme for the colors and folders etc, very aesthetically pleasing and would like to use them on my vsc

[@nikita-dev]

The VSC theme is "Atom One Dark". I also have the "Material Icon Theme" extension installed (for the folder color & icons). And then I have a custom terminal theme with iTerm2

[@enzogehlen]

it ens with an amazing visual loading feedback, congrats. But how the app knows how much "empty" cards it needs to render before the fetching ends? I mean, if you have only 2 or 3 entitys (such as user) in your db, and render 10 loading cards, it can be confuse to the end user, right?

[@nikita-dev]

there’s no way to know exactly how many loading cards you will need to render before fetching them, so you’ll just have to estimate. It’s not always necessary for the loading cards to represent every single record that will be returned, but rather a general indication of how the data will look. If you’re expecting multiple records, render multiple cards, but if you know there will only be one item, only render one loading card (such as a single user view)

[@maciejmotovlog]

thanks bro

[@harshjain3122]

Great video, by the way, are you Indian or Russian? Great accent and a very soothing voice.

[@nikita-dev]

Thank you! I’m Ukrainian

[@ThePozho]

Thanks! , question, why i cant See the animation… i import css

[@KristijanStosic]

My skeleton shows 6 cards elements as skeleton but also shows my other 6 cards shown, so total 12. 6 skeleton and 6 shown cards... i have loading state before iterating my array of objects

[@polskieyt9191]

#cool

[@ReshaR-iy1vx]

Bro🎉

[@nikitamashchenko2316]

yo, might be fun question, but what's the colors of the app (like these black, green, white exact hex values), look so cool! xD

[@nikita-dev]

hahah they’re just random! I thought they looked nice 🤣

[@turxanyusubov4704]

👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻

[@daybot1634]

Is it responsive?

[@patriicke.n]

👍

[@nursultansarazhiev9821]

i don't understand. what is it props.title ?

[@nikita-dev]

"props" is an object that contains the properties passed to the component. Since I passed a property named "title", I can access the value of that prop by doing props.title.

[@turxanyusubov4704]

didn't work(

[@sportshome6504]

thank you

[@user-nm6fd7sz9h]

My skeleton shows 6 cards elements as skeleton but also shows my other 6 cards shown, so total 12. 6 skeleton and 6 shown cards... i have loading state before iterating my array of objects