How to avoid page flickering when asynchronous resource updates
Hello everyone, I'm a beginner with SolidJS. As shown in the code in the image, I want the page to update when item changes. Currently, when I click a button, the page immediately turns blank until the new data is fetched, and then it reappears. I want the page to stay as it is during this time instead of going blank. How can I achieve this?
8 Replies
This happens because accessing
item() suspends each time the resource loads. The easiest way to avoid this is to instead use item.latest, which will only suspend on the first load.
Though this has the downside that the previously selected item's data will be visible until the new data has loadedI see, thanks for your advice.
Oh nevermind it's not a downside it's what you asked for haha
Yes, I tried to request data from the database in wasm. Usually it is not slow, and the content may be returned in a few hundred milliseconds. Considering the transition animation of the card, it should be difficult for the user to see the old data. But if there is a blank, there will be a very obvious flicker.
Yeah makes sense, perhaps you could grey out the old content to indicate that new content is loading?
I'll try it
Transitions can by used to keep the old content in place while the
pending signal can be used to drive an indicator that a transition is in progress.SolidJS
Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.
Ok, I'll try this