`createPresence` with `createResource` and `Suspense`
I'm trying to animate a list of items fetched using
createResourcecreateResourcefallbackfallback stopped working and the list is not being animated at all. Am I missing something here?const insightList = (props) => {
const [selectedCategory, setSelectedCategory] = createSignal(
new URLSearchParams(location.search).get('category') ?? '',
);
const [insights] = createResource(selectedCategory, fetchInsights);
const presence = createPresence(insights, {
transitionDuration: 500,
});
return (
<Suspense fallback={<div class="insights__loading">{props.progress ?? <p>Loading...</p>}</div>}>
<Show when={presence.isMounted()}>
<div
style={{
transition: 'all .5s linear',
...(presence.isEntering() && { opacity: '0' }),
...(presence.isExiting() && { opacity: '0' }),
...(presence.isVisible() && { opacity: '1' }),
}}
>
<For each={presence.mountedItem()}>{(insight) => <Insight insight={insight} />}</For>
</div>
</Show>
</Suspense>
);
}const insightList = (props) => {
const [selectedCategory, setSelectedCategory] = createSignal(
new URLSearchParams(location.search).get('category') ?? '',
);
const [insights] = createResource(selectedCategory, fetchInsights);
const presence = createPresence(insights, {
transitionDuration: 500,
});
return (
<Suspense fallback={<div class="insights__loading">{props.progress ?? <p>Loading...</p>}</div>}>
<Show when={presence.isMounted()}>
<div
style={{
transition: 'all .5s linear',
...(presence.isEntering() && { opacity: '0' }),
...(presence.isExiting() && { opacity: '0' }),
...(presence.isVisible() && { opacity: '1' }),
}}
>
<For each={presence.mountedItem()}>{(insight) => <Insight insight={insight} />}</For>
</div>
</Show>
</Suspense>
);
}
