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...
Github: github.com/nikitapryymak
Support Me: www.buymeacoffee.com/nikitadev
Contact Me: nikitadev292@gmail.com
#react #javascript #programming

Пікірлер: 74

  • @clumsysandesh
    @clumsysandesh Жыл бұрын

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

  • @diegonovaes4974
    @diegonovaes49746 ай бұрын

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

  • @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.

  • @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!

  • @elchungusgrande9635
    @elchungusgrande9635 Жыл бұрын

    Thank you! This was exactly what I needed

  • @ajithtina
    @ajithtina Жыл бұрын

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

  • @NIXO3D
    @NIXO3D7 ай бұрын

    This tutorial is gold 🔥 Thank you 🙏🏾

  • @epichameed
    @epichameed28 күн бұрын

    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

  • @pauldev7410
    @pauldev74102 жыл бұрын

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

  • @user-un1dk7vk4g
    @user-un1dk7vk4g10 ай бұрын

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

  • @alekseyc5808
    @alekseyc58082 жыл бұрын

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

  • @nikita-dev

    @nikita-dev

    2 жыл бұрын

    thank you!

  • @alvinacosta2312
    @alvinacosta2312 Жыл бұрын

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

  • @akshitlakhera8151
    @akshitlakhera81514 ай бұрын

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

  • @spectr-e
    @spectr-e Жыл бұрын

    Awesome my guy. You are very understandable.

  • @valerbarts
    @valerbarts Жыл бұрын

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

  • @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!

  • @elemsimon6987
    @elemsimon69872 жыл бұрын

    Great video, really helpful

  • @vvek_7
    @vvek_7Ай бұрын

    Thanks for the explaination

  • @beloaded3736
    @beloaded37362 жыл бұрын

    Omg i needed this, thanks

  • @user-tm5gx9iu6q
    @user-tm5gx9iu6q Жыл бұрын

    You made my day, THanKS

  • @FGA-47
    @FGA-4711 ай бұрын

    Thank you, that was really helpful❤

  • @frontend9206
    @frontend92067 ай бұрын

    Thank you for such great video

  • @cameleonarabic8124
    @cameleonarabic81248 ай бұрын

    you're a good teacher!

  • @Rabiul-gk1cc
    @Rabiul-gk1cc7 ай бұрын

    Thanks ! It is helpful. ♥

  • @nikhil6842
    @nikhil6842 Жыл бұрын

    Great tutorial, thanks

  • @abielasimiea
    @abielasimiea11 ай бұрын

    Lovely tutorial bro

  • @omkarparmaj3262
    @omkarparmaj32623 ай бұрын

    thats nice you have used npm package for skeleton.

  • @bharatshah9835
    @bharatshah9835 Жыл бұрын

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

  • @nguyentranhieuphuong8523
    @nguyentranhieuphuong85232 жыл бұрын

    Love your content.

  • @nikita-dev

    @nikita-dev

    2 жыл бұрын

    thank you!

  • @deveshb793
    @deveshb793 Жыл бұрын

    Thanks for the vid mate:)

  • @yousafwazir3167
    @yousafwazir31672 жыл бұрын

    Amazing thanks

  • @aleksey6151
    @aleksey61512 жыл бұрын

    Amazing video

  • @amangwari
    @amangwari9 ай бұрын

    Thank you ❤

  • @satishmaurya2089
    @satishmaurya2089 Жыл бұрын

    it was useful. Thanks a lot sir

  • @dave_an
    @dave_an6 ай бұрын

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

  • @anuj7286
    @anuj7286 Жыл бұрын

    Nice work sir

  • @ycombinator765
    @ycombinator765 Жыл бұрын

    beautiful

  • @kamamedia3535
    @kamamedia35352 жыл бұрын

    Nice one der.

  • @sagar8964
    @sagar896410 ай бұрын

    thanks!!

  • @PeriklesPeriklesoglu
    @PeriklesPeriklesoglu8 ай бұрын

    thank you

  • @longnhat6405
    @longnhat6405 Жыл бұрын

    thanks, very nice

  • @albaraa_49
    @albaraa_49 Жыл бұрын

    Great.. thanks❣

  • @bogdy8191
    @bogdy81912 жыл бұрын

    Love u bro

  • @aothymahmudmoon3578
    @aothymahmudmoon35789 ай бұрын

    Thanks you sir

  • @llibanogs
    @llibanogsАй бұрын

    thx buddy

  • @shraj340
    @shraj3403 ай бұрын

    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

  • @fernandocosta3307
    @fernandocosta3307 Жыл бұрын

    Thank you 😎😎

  • @ThePozho
    @ThePozho8 ай бұрын

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

  • @webshipon1941
    @webshipon1941 Жыл бұрын

    good jobs sir love you🥰🥰

  • @maciejmotochannel
    @maciejmotochannel Жыл бұрын

    thanks bro

  • @user-nm6fd7sz9h
    @user-nm6fd7sz9h10 ай бұрын

    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

  • @torinkai4169
    @torinkai416911 ай бұрын

    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

    11 ай бұрын

    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
    @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)

  • @ReshaR-iy1vx
    @ReshaR-iy1vx2 ай бұрын

    Bro🎉

  • @ayanupadhaya944
    @ayanupadhaya94424 күн бұрын

    next make a file upload progress bar in react tailwind

  • @polskieyt9191
    @polskieyt9191 Жыл бұрын

    #cool

  • @turxanyusubov4704
    @turxanyusubov47042 жыл бұрын

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

  • @nikitamashchenko2316
    @nikitamashchenko23162 жыл бұрын

    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 🤣

  • @daybot1634
    @daybot16345 ай бұрын

    Is it responsive?

  • @harshjain3122
    @harshjain31222 ай бұрын

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

  • @nikita-dev

    @nikita-dev

    2 ай бұрын

    Thank you! I’m Ukrainian

  • @patriicke.n
    @patriicke.n Жыл бұрын

    👍

  • @nursultansarazhiev9821
    @nursultansarazhiev98212 жыл бұрын

    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
    @turxanyusubov47042 жыл бұрын

    didn't work(

  • @sportshome6504
    @sportshome6504 Жыл бұрын

    thank you

  • @KristijanStosic
    @KristijanStosic10 ай бұрын

    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

Келесі