AxelSorensen
Automatic pending state for data being fetched?
TLDR: Does anyone know if there exists a way to wrap variables in a sort of suspense wrapper that will trigger a loading indicator whenever it registers that its content is currently being fetched or re-fetched? 🧐
I know I could manually create a "pending" variable and set it to false/true before and after a fetch, however as the application scales the amount of different pending variables I would need grows and I don't want to store them all in objects (ex. loading = {title: true, paragraph: false, etc....}) 🔥
useFetch has a "status" return value which can be used to detect the status of a fetch, but this only works when the page is originally loaded and not on fetches triggered by user interaction (ex. clicking a fetch button)
Does a loading wrapper exist or does anyone have an idea for how to implement one? Is there a way to check whether data within a component is currently being awaited?
Example:
<wrapper>{{ data }}</wrapper>
The wrapper should detect when data inside of it is being awaited (just checking if data is null doesn't work because we might want to refetch data, and I don't want to set it to null each time before refetch)
Any thoughts or suggestions would be much appreciated🙏
30 replies