How do I postpone invocation of fetcher function of the solid-js resource?
I have following snippet in my .tsx file. Could you please explain why mappings resource is being called for switch branches that are false ? How can I avoid it ?
const [pipeline] = createResource(() => api.pipeline(params.id))
const [mappings] = createResource(() => api.pipelineMappings(params.id), { deferStream: true })
<Switch>
<Match when={pipeline()?.state == PipelineState.INCOMPLETE}>
{/Show this div when mapping is not loaded/}
<div class="flex flex-col items-center py-12 px-4 sm:px-6">
<h1 class="text-medium mb-2 text-2xl text-neutral-600">No mappings</h1>
<p class="text-neutral-600">Nothing to show until pipeline is fully configured.</p>
</div>
</Match>
<Match when={pipeline()?.state != PipelineState.INCOMPLETE}>
<Show when={mappings() != undefined} fallback={<LoadingIcon/>}>
</Match>
</Switch>
