honest sedge
Hello, I wanted to ask you about a problem I have with useResource$. The problem is that if the fetch I'm doing takes too long, it block the page, so I can never see the pending status fallback. That is, only when the promise is resolved in the backend, the page renders the information.
I am using the Resource component as the documentation says, but I see that the Prop onPending is not useful because it will never be used since the page arrives to the Frontend with the information.
<Resource value={resourceData} onPending={() => <>Cargando...</>} onRejected={() => <>Error!</>} onResolved={(data) => data.map((i: any) => <ListItem {...i} />)} />
Then, I realized that I had to do something to make the request from Fronted only when the component had been rendered. By doing this, the Prop: onPending will be displayed.
`
const visible = useSignal(false);
useVisibleTask$(() => {
visible.value = true;
});
const resourceData = useResource$(async ({ track }) => {
track(() => visible.value);
// Only executes the promise when the component is mounted.
if (visible.value) {
const data = await promiseThatTakesTooLong().then(res => res.json());
return data;
} else {
return [];
}
});
`
But I feel there has to be another way to do this. 😩
I wonder if this behavior is the expected behavior of <Resource /> and useResource$ or if it is some issue 🤔