Should resources expose "refreshing" state when calling refetch under a Transition

[Hubro]

I'm making a small toy dashboard, and I've defined this route data:

export function routeData() {
  return {
    app1status: createServerData$(async () => {
      return getDeploymentStatus(
        "namespace1",
        "deployment1"
      );
    }),
    app2status: createServerData$(async () => {
      return getDeploymentStatus(
        "namespace2",
        "deployment2"
      );
    }),
    app3status: createServerData$(async () => {
      return getDeploymentStatus(
        "namespace3",
        "deployment3"
      );
    }),
  };
}

This works beautifully with <Suspense> and renderStream to display a loading spinner while the data is fetched on page load.

However, this being a dashboard, I want to refresh the data now and then, so I'm using refetchRouteData.

This works, however I want to be able to display some indicator that the data is currently being refetched. From the docs, it sounds like I should be able to use resource.state for this. However, it doesn't seem like refetchRouteData actually updates the state of each resource like it should.

To test, I added a createEffect to log the state of each resource:

createEffect(() => {
  console.log(app1status.state);
  console.log(app2status.state);
  console.log(app3status.state);
});

This logs:

So it shows "pending" as the page opens, then "ready" as each resource finishes loading. After that, every time I press the refetch button, it just logs "ready" again, as the resources finish loading.

Shouldn't the state change to "refreshing" while the data is being refetched?

[4c656f]

I faced with the same issue, found out that this problem is somehow related to the proxy. Reproduce: https://stackblitz.com/edit/github-n9s1u9-tnwckd?file=src/routes/index.tsx

[ryansolid]

This one is pretty core question so I moved it here. But the answer isn't actually too obvious. What is happening is we do the refetch all route data under a Transition and it therefore does it all in the background. The problem is that being under a transition the state can't actually update until its committed. Before doing this calling Refetch would cause the whole app to fallback to the Suspense boundary which is not what you want.

You might be thinking well we should make an exception for resources. However, I think that depends on perspective. Is this refetch happening on the current timeline or an alternate (from a concurrent rendering standpoint). Should the current timeline understand the loading state or only the one about to render. Like if you use .loading in your JSX to show a loading spinner should it fire up at this point.

Transitions themselves have the means to know if they are in flight so if we exposed that somehow that might be a better solution. But I wanted to bring this over because the first question is most important. Whether resource state should be exempt from Transitions.

[4c656f]

@ryansolid from your answer, I understood that I can use the useTransition for the pending indicator, did I get it right? Also for me, useTransition works like magic( why, for example, clicking on the refetchRouter data button triggers my useTransition, where can I get information about how it all works under the hood? (there is not much information about transitions in the solid documentation) reproduce: https://stackblitz.com/edit/github-n9s1u9-tnwckd?file=src/routes/index.tsx

[Hubro]

Using useTransition() and wrapping the refetch function (start(() => refetchRouteData())) seems to work perfectly, so I'm happy.

My only issue here is that this solution was not at all obvious, I had no clue that refetchRouteData had anything to do with transitions. The most intuitive thing would be if states worked as documented, but if that's tricky/impossible to implement, at the very least this behavior should be documented in one or both of these locations:

• https://start.solidjs.com/api/refetchRouteData
• https://start.solidjs.com/core-concepts/data-loading

I'm guessing anybody trying to show a loading state while running refetchRouteData will go down the same path as me, unless they have deep knowledge about SolidJS.

---

EDIT: Oh, after reading @4c656f's last comment I just realized I don't even have to wrap my refetchRouteData() call, which does indeed seem a bit magical 😄 Would be nice with some more in-depth documentation on how this works.

[ryansolid]

Yeah the thing is this ties into a the global transition and it might not always be accurate. I'm thinking of how to best expose this in a way that applies to just the routing or the specific action. The router has no knowledge of the data being requested so this doesn't belong in the router package. Solid's tracking might be too general, so the only logical place is in SolidStart perhaps. But I don't like that answer, so I need to think about it. The refetchRouteData does return a promise but we probably want these things reactive. It wouidn't be hard to wrap them, but then I wonder if it should be a more general mechanism like isRouting that we extend.

[ryansolid]

Yeah given the OP found a solution and we can back that. I'm going to move this into discussions. This is more of a future design consideration.