How to invalidate cached data or show loading state during data filtering in SolidStart?
I'm working with a query in SolidStart and want to show a loading state when filtering data. Here's my current implementation:
Currently, the loading state only shows on the initial page load. When I click the "completed" filter button, it doesn't show the loading state - it just replaces the list when the new data arrives. I want to show the loading state when switching filters, essentially invalidating
todos.latest
when the filter changes.
Any suggestions on how to achieve this? Thanks in advance!6 Replies
createAsync
starts a transition for the accessor. So you can use useTransition
to get a pending signal (which will trigger on updates not on the initial load
but this transition can be triggered by other things, like
action
s 🤔
if you have an action in your pagethx, I tested that
useTransition
doesn't work.
I tested that action doesn't work well either.It does. Just as in the snippet. It won’t be pending on the initial page load as then the Suspense boundary is triggered and the fallback of the Suspense boundary is shown instead.
On localhost the query might resolve so fast, that the loading fallback will just flick in for few milliseconds.
Maybe you can share more of your code.
You can add a
ts
createEffect(() => console.log("isPending",isPending());
to see if it’s getting triggered.I created a test project on Codesandbox. https://codesandbox.io/p/devbox/heuristic-dream-wcnvzy
.latest
will not trigger the transition and "stay in the past" until the new value is returned by createAsync
Just call todos()
in your todos/index.tsx