Show Loading Screen While Fetching API Data In React

#Arslan #MusicAPI #ReactLoadingSpinner
Sup y'all in this video I show how to make a loading screen while trying to fetch api data hope ya enjoy!

[AndresGutierrez-pyhi]

Thanks!!!, the way you explain is easy to understand and of course you helped me a lot.

[jessicablankemeier]

Haha, it feels impossible until Arslan explains it! Thank you!

[coffeeandtalk]

gave a like for your humor! it was informative thnks

[osagieo]

Thanks Arsian, this video helped me to solve a React App task today.

[christopherortiz]

Thank you so much, sir. You explained it as simple as is possible.

[alejosandu]

3:43 "and we write .then"
const data: "im a joke to you?"

[SRPPixels]

Amazing video. You just saved my lot of time googling things
Keep it up

[wood]

Thanks for this tutorial, very clear for me ! :)

[SouthGuy-tycl]

Dude, just got here to learn how twitter's spiners were made xD....prob gonna binge the MaterialUI playlist.

[rohannaidu]

You don't need to use state for this, we can use ternary operator and check for state that has return data from API
{(data) ? data.map((item)=>{ return //action you want to perform//}) : <Spinner animation="border" />}
thank you for your solution

[khandoor]

Thanks for this Arslan. I don't think devs know how much they need this until api's don't work right. Keep up the great content!

[osta]

helpful video! thanks a lot, and you got new subscriber :)

[andersonsimeon]

If you are having some rendering issues, add loading (or whatever you named the constant) to the useEffect dependency, instead of [ ].

[Lucas-jbce]

Why would you use "loading" as a state? You have the "lyricsItem" as null as its initial state, hence, you can check if it's null instead of the "loading" state.

[Colstonewall]

Quick question, why do we never need to set loading back to false? It gets set to true (line 18) but you never set it back to false and yet it works properly. Why do we not need to set it back to false?

[qwertypeach]

How does the loading state go to false when you never called setLoading(false) after setLoading(true)?

[osta]

Just a little question,
when you change any state value, the component will re-render?

[DeepakVishwakarma-liwq]

is it also worked with as well as images component

[shubhammetkar]

How to do this for class based component?
Thanks in advance

[reddragen]

i did the exact same thing with a button that fetches some api data but the component i render is inside another component that iterates through a list and displays the component for however many items are in the list. this results in a problem, whenever i click the button because my component is inside a list instead of updating only the button i click with the loading state it updates all of them. is there any way to solve this?