Sand Kingston Posts - Answer Overflow

Sand Kingston

•Created by Sand Kingston on 5/8/2024 in #support

`createPresence` with `createResource` and `Suspense`

I'm trying to animate a list of items fetched using createResource. The problem is, however, that fallback 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>
  );
}

1 replies

Gaming

Programming