last day (15 days later) » 

4:54 PM
0
A: How do I avoid flash of an unnecessary component for 1 second after fetching data in React?

Drew ReeseYou display the loading pizza skeleton any time loading is true, even when the app already has previously fetched pizza data. const loadedPizzas = loading ? skeletons : pizzaList; Update to only display the skeletons if there isn't already a loaded pizza list. (Similar to your EmptyResult logic ...

 
hm...didn't help
 
@rgdzv Doesn't help with issue of skeletons "flashing"/"flickering" on the screen when reloading the page or refetching data or whatever it is you are doing in the image?
 
when I reload the page (fetching starts) and before pizzas are shown, EmptyResult component flashes for 1 second (it shows orange button in the center for 1 second)
 
@rgdzv I see. Then I suppose there's a "gap" when loading data where loading is set false and the pizza state hasn't updated just yet. Can you edit to share your fetching and Redux code so we can see when, where, and how these selected state values get updated?
 
I updated question
 
4:54 PM
@rgdzv Well it certainly appears that you update the state.pizzas and state.loading states together. Drop a console.log({ loading, pizzas }); in the component and check how each value changes during component rendering so see/verify if there's ever any "loading: false, pizzas: []" (or where pizzas is anything other than an array) during any render cycle. If you can, see if you can create a running codesandbox demo that reproduces this issue that we could inspect live.
 
yes, loading: false, pizzas: [] appears in the beginning (before fetching), because in default pizzas is an empty array. I'll try to make sandbox
 
Ah, of course! That makes sense. Can you clarify then when exactly you want to see:

* The loading skeleton
* The empty pizzas component
* The pizzas page
Give that you start out with:

* Loading: false
* Pizzas: []
 
I want to see:
 
I guess the main question is actually just: "What do you want displayed when loading hasn't happened yet?"
If not the EmptyList component with that orange button?
The main UI with the empty pizzas/skeletons?
 
Yes
skeletons
 
5:03 PM
Ok. So you only want to render EmptyResult if (A) there is an error, or (B) loading has occurred and pizzas is empty array?
 
Yes
do you still need sandbox?
 
No, I don't believe so. I'm working on an updated answer now.
 
ok
 
5:25 PM
Updated answer. Basic change is the initial pizzas state to anything other than [] or a populated array. If pizzas is not a loaded array yet then don't display the EmptyResult component.
 
thx for help
 
Sorry I misunderstood your post initially.
And welcome, happy to help. Cheers.
 
cheers
 

last day (15 days later) »