Тёмный

React Loading Skeleton Tutorial 

Nikita Dev
Подписаться 7 тыс.
Просмотров 72 тыс.
50% 1

In this tutorial you'll learn how to build a loading skeleton using the react-loading-skeleton library.
Starting Files: github.com/nik...
React-Loading-Skeleton: www.npmjs.com/...
Github: github.com/nik...
Support Me: www.buymeacoff...
Contact Me: nikitadev292@gmail.com
#react #javascript #programming

Опубликовано:

 

24 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 77   
@clumsysandesh
@clumsysandesh Год назад
The explaination was so proper, orderly, and beautiful. Keep making content like these!
@diegonovaes4974
@diegonovaes4974 8 месяцев назад
Thank you so much! This helped me improve CLS score from 0.8 to 0.07 layout shift.
@letem748
@letem748 Год назад
the second example was exactly what i was looking for. thanks for the video it was very helpful and well made.
@nikita-dev
@nikita-dev Год назад
thank you!
@manikandanmk2959
@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.
@bharatshah9835
@bharatshah9835 2 года назад
It's works perfect at my end but i need a help like how to apply this in responsive page.
@AnesAnes-t2u
@AnesAnes-t2u Год назад
Thank you , this is help me to understand Skeleton fallback ui , when using it with component fetch
@alekseyc5808
@alekseyc5808 2 года назад
Thanks for the video! So helpful, love the intro music
@nikita-dev
@nikita-dev 2 года назад
thank you!
@dave_an
@dave_an 8 месяцев назад
the explanation is so expensive xD i cant belive i can watch this for free
@NIXO3D
@NIXO3D 9 месяцев назад
This tutorial is gold 🔥 Thank you 🙏🏾
@epichameed
@epichameed 3 месяца назад
00:02 Building a React Voting Skeleton with user cards and latest post functionality. 01:10 Displaying user info and posts with loading skeleton 02:21 Automatically sized skeleton components with customizable colors. 03:49 Separate skeleton card component created 04:55 Creating and styling a Card Skeleton component 06:28 Adjust width and add multiple skeleton lines for user card 07:48 Creating an array and filling it with values 09:08 Render card skeletons only in loading state
@akshitlakhera8151
@akshitlakhera8151 6 месяцев назад
On point explaination .Thank you for making such a wonderful tutorial.
@morphine496
@morphine496 Год назад
This was great, it really helped me a lot in understanding how the skeletons work.
@nikita-dev
@nikita-dev Год назад
I’m glad it was helpful!
@omkarparmaj3262
@omkarparmaj3262 5 месяцев назад
thats nice you have used npm package for skeleton.
@elchungusgrande9635
@elchungusgrande9635 Год назад
Thank you! This was exactly what I needed
@CalebJohn-nz2so
@CalebJohn-nz2so 2 месяца назад
still helpful even after 2 years ❤
@ftmullah
@ftmullah Месяц назад
yesssir
@ajith007-ytb
@ajith007-ytb 2 года назад
Good one! Very well explained! Thank you for the video!
@alvinacosta2312
@alvinacosta2312 Год назад
Great job bro! thank you for this! You are awesome please continue making valuable content
@pauldev7410
@pauldev7410 2 года назад
great video, this was so helpful! keep up the good work!
@spectr-e
@spectr-e Год назад
Awesome my guy. You are very understandable.
@cameleonarabic8124
@cameleonarabic8124 10 месяцев назад
you're a good teacher!
@valerbarts
@valerbarts Год назад
Great Video! Your channel is awesome. Keep up the good work.
@vvek_7
@vvek_7 3 месяца назад
Thanks for the explaination
@elemsimon6987
@elemsimon6987 2 года назад
Great video, really helpful
@اناهنا-ب3و
@اناهنا-ب3و Год назад
You made my day, THanKS
@kamamedia3535
@kamamedia3535 2 года назад
Nice one der.
@frontend9206
@frontend9206 9 месяцев назад
Thank you for such great video
@shraj340
@shraj340 5 месяцев назад
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
@nguyentranhieuphuong8523
@nguyentranhieuphuong8523 2 года назад
Love your content.
@nikita-dev
@nikita-dev 2 года назад
thank you!
@aleksey6151
@aleksey6151 2 года назад
Amazing video
@kaadelaa
@kaadelaa 6 дней назад
Good one!
@abielasimiea
@abielasimiea Год назад
Lovely tutorial bro
@Rabiul-gk1cc
@Rabiul-gk1cc 9 месяцев назад
Thanks ! It is helpful. ♥
@harshjain3122
@harshjain3122 4 месяца назад
Great video, by the way, are you Indian or Russian? Great accent and a very soothing voice.
@nikita-dev
@nikita-dev 4 месяца назад
Thank you! I’m Ukrainian
@yousafwazir3167
@yousafwazir3167 2 года назад
Amazing thanks
@nikhil6842
@nikhil6842 Год назад
Great tutorial, thanks
@beloaded3736
@beloaded3736 2 года назад
Omg i needed this, thanks
@amangwari
@amangwari 11 месяцев назад
Thank you ❤
@FGA-47
@FGA-47 Год назад
Thank you, that was really helpful❤
@ayanupadhaya944
@ayanupadhaya944 2 месяца назад
next make a file upload progress bar in react tailwind
@tech_in_tosh
@tech_in_tosh 9 дней назад
@nikita-dev How can we add the number of cards before the data get fetch from the API, I mean any alternative to Hardcode the count value?
@deveshb793
@deveshb793 2 года назад
Thanks for the vid mate:)
@webshipon1941
@webshipon1941 Год назад
good jobs sir love you🥰🥰
@ycombinator765
@ycombinator765 2 года назад
beautiful
@aothymahmudmoon3578
@aothymahmudmoon3578 Год назад
Thanks you sir
@PeriklesPeriklesoglu
@PeriklesPeriklesoglu 10 месяцев назад
thank you
@KristijanStošić-l2i
@KristijanStošić-l2i Год назад
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
@bogdy8191
@bogdy8191 2 года назад
Love u bro
@ThePozho
@ThePozho 10 месяцев назад
Thanks! , question, why i cant See the animation… i import css
@ReshaR-iy1vx
@ReshaR-iy1vx 4 месяца назад
Bro🎉
@satishmaurya2089
@satishmaurya2089 2 года назад
it was useful. Thanks a lot sir
@llibanogs
@llibanogs 3 месяца назад
thx buddy
@anuj7286
@anuj7286 Год назад
Nice work sir
@sagar8964
@sagar8964 Год назад
thanks!!
@turxanyusubov4704
@turxanyusubov4704 2 года назад
👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻
@longnhat6405
@longnhat6405 Год назад
thanks, very nice
@albaraa_49
@albaraa_49 Год назад
Great.. thanks❣
@fernandocosta3307
@fernandocosta3307 Год назад
Thank you 😎😎
@polskieyt9191
@polskieyt9191 Год назад
#cool
@enzogehlen
@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
@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)
@maciejmotochannel
@maciejmotochannel 2 года назад
thanks bro
@torinkai4169
@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
@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
@daybot1634
@daybot1634 7 месяцев назад
Is it responsive?
@nikitamashchenko2316
@nikitamashchenko2316 2 года назад
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
@nikita-dev 2 года назад
hahah they’re just random! I thought they looked nice 🤣
@nursultansarazhiev9821
@nursultansarazhiev9821 2 года назад
i don't understand. what is it props.title ?
@nikita-dev
@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
@turxanyusubov4704 2 года назад
didn't work(
@KristijanStosic
@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
@sportshome6504
@sportshome6504 2 года назад
thank you
Далее
6 State Mistakes Every Junior React Developer Makes
15:53
Свожу все свои тату (abricoss_a_tyt)
00:35
The Most Important Design Pattern in React
35:04
Просмотров 49 тыс.
You are loading Images wrong! Use this instead 😍
14:41
Skeleton Loading in React Like a PRO!
9:41
Просмотров 16 тыс.
Combining Zustand with React Query
20:24
Просмотров 18 тыс.
The Best React Code I Wrote (Code Review)
24:50
Просмотров 21 тыс.
React vs Angular in 2024
9:00
Просмотров 53 тыс.
Свожу все свои тату (abricoss_a_tyt)
00:35