Description
Which @angular/* package(s) are relevant/related to the feature request?
core
Description
My typical use case is a resource loading data for a sortable table like this :
readonly tableResource = resource({
request: () => ({
sort: this.sort(),
}),
loader: async ({ request }) => {
const { sort } = request;
const response = await fetch(`http://localhost/api/test?sort=${sort}`);
return await response.json() as TableData[];
}
});
On the first execution when the data is loaded, tableResource.value() contains my initial data.
When the user sort the table, the sort signal is changed therefore the tableResource reloads the data.
While the loader function is running, tableResource.value() is set to undefined, then when the data is loaded tableResource.value() contains my new sorted data.
I think this is the expected behavior but I have 2 problem with this :
1/ If the fetch function is slow to return a value, the user will see all the table content disappearing (because the resource value changes to undefined) before it shows again.
I think its best if the "old" data stays on the screen while it's loading (even if there is a loading indicator)
2/ If I want to use a linkedSignal with the resource value, it will be called twice for only one reload
Proposed solution
I think It would be nice if there was a way to force value to persists while it's loading (like when we call the reload() function)
Maybe by using an option ?
Or by making the behavior of reload() the default behavior since we can test status to know the validity of value
Alternatives considered
Testing status() === ResourceStatus.Loading in a linkedSignal and use it in the template instead of using tableResource.value
data: WritableSignal<TableData[]> = linkedSignal({
source: () => ({
value: this.tableResource.value(),
status: this.tableResource.status(),
}),
computation: (source, previous) => {
if (previous && source.status === ResourceStatus.Loading) {
return previous.value;
}
return source.value ?? [];
}
});