Full React Tutorial #18 - Conditional Loading Message

Подписаться 1,6 млн

Просмотров 190 тыс.

50% 1

🐱‍💻 🐱‍💻 Course Files:
+ github.com/iam...
🐱‍👤🐱‍👤 JOIN THE GANG -
/ @netninja
🐱‍💻 🐱‍💻 My Udemy Courses:
+ Modern JavaScript - www.thenetninj...
+ Vue JS & Firebase - www.thenetninj...
+ D3.js & Firebase - www.thenetninj...
🐱‍💻 🐱‍💻 Helpful Links:
+ HTML & CSS Course - • HTML & CSS Crash Cours...
+ Modern JavaScript course - • Modern JavaScript Tuto...
+ Get VS Code - code.visualstu...
🐱‍💻 🐱‍💻 Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja

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

26 сен 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 75

@duskairable 3 года назад

Btw you can properly simulate the slow request connection without setTimeout() in your own browser to easily see the "loading" message, in dev console go to "Network" tab and below the "Network" tab change "Online" to "Slow 3G" or "Fast 3G" then refresh your browser.

@candle-likeghost9523 3 года назад

slow 3g is quite painful

@duskairable 3 года назад

@@candle-likeghost9523 "Fast 3G" then, i mostly use that while developing. It's faster, you can still clearly see the loading animation, if you want to see the glorious loading animation then use Slow 3G hehe.

@generationwolves 3 года назад

Thanks for the tip. This community is awesome.

@kashmirtechtv2948 3 года назад

Good

@IsaacA192 3 года назад

I was just about to say that. :p

@johnconnor9787 3 года назад

The shortest and the most awesome example of how conditional loading indication works

@kelvin513 3 года назад

Another way we can use the json-server delay option to simulate the 1 second timeout: npx json-server --watch data/db.json --port 8000 --delay 1000

@Zephyr-tg9hu 2 года назад

Sweet, thanks Kelvin.

@TheAditya64 3 года назад

Guys, You can also do this in the return, if you wanna make it in a single line, return {isLoading ? 'Loading ... ' : blogs && };

@exodion4173 3 года назад

Yeap. This is ternary operator, like if-else

@usmanmughal5916 3 года назад

Always in dept teaching.

@youngpluton6077 2 года назад

Another way we can see the json-server delay is going to the Network tab in inspect and on the top where you see "No throttling" we set it to "slow-3g" then refresh the page

@stuartcarter7053 7 месяцев назад

I never knew that. Good knowledge sir

@ast453000 3 года назад

you could skip the second useState, and just use a ternary: {blogs ? : Loading...}. But it's also good to illustrate the way it was done in the video.

@pashabiceps95 3 года назад

no, if you would have to update the list you wouldn't be able to fire pending second time this is the correct way setIsPending(true); const res = await fetch(' localhost:8000/blogs'); setBlogs(await res.json()); setIsPending(false); ........... {isPending ? Loading... : blogs && ( )}

@maskman4821 3 года назад

This is a pretty good example !!!

@personwholikesturtles2389 3 года назад

I __reacted__ as fast as I could

@relaxingminds182 3 года назад

Always grateful for your work 😌💟

@nevefelhasznalo7697 3 года назад

Nice tutorial, thank you. You can emulate slow response by using json-server --delay option.

@parker7721 2 года назад

Another way to do it would be doing { (blogs)? :Loading...}. Which is basically an if statement to check if blogs is pending or not.

@Bosbay6902 2 года назад

In all the tutorials this is the best 🔥

@unknownman1 3 года назад

You are great Shaun. Thanks

@rafiashan8389 Месяц назад

Well Explained Video. Thanks you so much.

@rjc4200 3 года назад

Apart from slowing down the network speed from network tab, the best way to test and show the Loading message is --- 1. Stop the JSON Server --> then run npm start You can do some styling { isLoading && Funny but it works !! :D

@hassanhafiz44 3 года назад

Thank you Sir!

@foreverandadave 3 года назад

Hmmm... would it make more sense to just use: {!blogs && Loading...} rather than a 2nd state?

@goat5249 3 года назад

Yes, but I think the point was to show how states can interact and influence each other. You could actually just use the conditional ternary operator like so: { blogs ? : Loading... } If you want to learn more about this conditional operator, here is Mozilla's reference and guide page for it: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

@omeatai Год назад

Just to Note, in Chrome in the "Network" tab you will see the option selected as "No throttling", change it to "Slow 3G" or "Fast 3G" and you will get the same experience.

@8man160 Год назад

thanks man!

@ridl27 3 года назад

@RobertWildling 3 года назад

Fantastic series as always! A question arises here: Why not simply !blogs instead of a new var? Thank you!

@Tsharkeye 2 года назад

Yeah !blogs works just fine :)

@webdev_am Год назад

This is an amazing course my friend. thank you.

@NetNinja Год назад

Awesome to hear :) thanks for watching!

@PetersExcapades Год назад

instead of using is pending u can use a ternary like suggested by others, OR just do { !blogs && loading html }

@elilumilay9405 3 года назад

I think {isPending ? Loading... : } is better for this because of its shortness. Btw, this is called Ternary Operator and its almost the same with the vid. It is a "condition followed by a question mark ( ? ), then an expression to execute if the condition is truthy followed by a colon ( : ), and finally the expression to execute if the condition is falsy"

@chasec4897 2 года назад

You are absolutely amazing.

@nakedsnake_2128 Год назад

Doing this tutorial as I'm preparing for my last course in school wich is Javascrtip 3 wich includes React. I'm gonna be so ahead of my class. Thanks Ninja

@NetNinja Год назад

Awesome, best of luck! :) thanks for watching

@mriganksingh7586 3 года назад

nice one👏

@petMonster28 2 года назад

1:55 - I noticed you don't ever reset the isPending variable to true again, but it continues to work as expected. Does that mean line 6 ( const [isPending, setIsPending] = useState(true) ) runs and isPending is re-initialized to true every time the BlogList component is re-rendered? Otherwise, I would assume isPending would stay false after the first fetch occurs and the "Loading..." message wouldn't show up in subsequent fetches.

@kev_G Год назад

Seems kinda strange to put the conditional rendering logic in the Home.js file. I'm sure there's a way to encapsulate it within the BlogList.js file but I couldn't figure it out.

@ayinlaoluwafemi1993 3 года назад

Setting const [blogs, setBlogs] = useState("") then using a ternary operator {blogs.length == 0 ? Loading...: } gives the same result.

@dannyman2200 3 года назад

Another great vid! does anyone know of good resources for loading animations?

@Jacksons_are_jackson 2 года назад

Go to network tab in console, change no throttling to "Slow/Fast 3G"

@Aergaia 3 года назад

Hi. I was wondering if you could just do { blogs? : Loading } instead?

@karanparmar4318 3 года назад

yes but not good practice for loading , usage of another state for loading is recommended, I mostly do like this : first loading has empty string, Then it has custom loading message, (like while submitting form i would set loading following values in this flow -> "", "uploading files",{error.message if any}, "saving data" , "saved successfully", "" then I do this to render : loading && {loading} list ? : List unavailable

@gyros9162 Год назад

Great videos! I'm also learning good English from you :)

@NetNinja Год назад

Aha, that's great! :) thanks for watching

@ravi_sorathiya 3 года назад

Terrific usecase

@Mahmudulhasan-ts5hm 3 года назад

thanks

@StephenBeale 2 месяца назад

I'm a bit confused why you put the localhost:8000 (for json server) in the fetch but are then using localhost 3000 in the browser (default for React apps) - if you hard-code the fetch to point to the json server, how does that work? thanks

@mohamedchine-ky6yk 4 месяца назад

hi in 0:44 is it ok to do "ispending" as a normal constant i mean without using the usestate?

@akkaradechsrithongchai7766 Год назад

@Pspisripoff 3 года назад

I find "&&" to be a little bit troublesome.. it sometimes returns a zero (string or int) instead of not returning anything when false.. i don't know why, so instead i use " ? ... : ..."

@farhanaditya2647 2 года назад

Maybe you converted them to a number somewhere in your code? "&&" is a boolean operator and the whole expression will be evaluated to either true or false. false == 0.