stop screen flicker from createResource refetch?

I'm refetching from a database every three seconds to display the most up to date values from a database without having to refresh the page.

  const [fetchedOnline, { refetch }] = createResource(
    () => [selectedZone(), selectedJob()],
    fetchOnline,
  )

  const timer = setInterval(() => {
    refetch()
  }, 3000)

  onCleanup(() => clearInterval(timer))

  const [fetchedOnline, { refetch }] = createResource(
    () => [selectedZone(), selectedJob()],
    fetchOnline,
  )

  const timer = setInterval(() => {
    refetch()
  }, 3000)

  onCleanup(() => clearInterval(timer))

  const [fetchedOnline, { refetch }] = createResource(
    () => [selectedZone(), selectedJob()],
    fetchOnline,
  )

  const timer = setInterval(() => {
    refetch()
  }, 3000)

  onCleanup(() => clearInterval(timer))

  const [fetchedOnline, { refetch }] = createResource(
    () => [selectedZone(), selectedJob()],
    fetchOnline,
  )

  const timer = setInterval(() => {
    refetch()
  }, 3000)

  onCleanup(() => clearInterval(timer))

Every time it updates, every three seconds, my screen flickers and shows some

fallbacks

fallbacks

fallbacks

fallbacks from

Shows

Shows

Shows

Shows for a brief second. I'd like for it to just show the old values until it gets the new ones...

I'm playing with fetchedOnline.ready, fetchedOnline.loading, etc but not having any luck

stop screen flicker from createResource refetch?

Similar Threads

Similar Threads

Similar Threads