container shrinking when loading
I load a different api when some state changes.when i change state and api starts loading,my container becomes empty and shrinks in a way it has no data then immediately gets new data.
It is a disgusting design for the user's eyes so how can i prevent it?(I want to show something like a spinner but that spinner isnt guaranteed to be the same height as the previous data of the container)
3 Replies
inland-turquoise•16mo ago
In pseudo Code:
If isLoading: render spinner
eastern-cyan•16mo ago
There's no single solution to this problem. Some people use skeleton loaders https://www.nngroup.com/articles/skeleton-screens/ but there's always a chance the content won't match what's downloaded from the API
Nielsen Norman Group
Skeleton Screens 101
A skeleton screen is used as a placeholder while users wait for a page to load. This progress indicator is used for full page loads and reduces the perception of a long loading time by providing clues for how the page will ultimately look.
equal-jade•16mo ago
You can show placeholder data, you can even show your current data as new data is being fetched.
https://tanstack.com/query/latest/docs/framework/react/guides/placeholder-query-data
Placeholder Query Data | TanStack Query React Docs
What is placeholder data?
Placeholder data allows a query to behave as if it already has data, similar to the initialData option, but the data is not persisted to the cache. This comes in handy for situations where you have enough partial (or fake) data to render the query successfully while the actual data is fetched in the background.