SolidJS•10mo ago

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))

Every time it updates, every three seconds, my screen flickers and shows some fallbacks from 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

5 Replies

lobster theremin•10mo ago

https://www.solidjs.com/tutorial/async_transitions?solved

SolidJS

Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.

lobster theremin•10mo ago

https://playground.solidjs.com/anonymous/42c8bb18-d868-42c1-a0f8-698bd5219626

GrahfOP•10mo ago

fancy Im going to try that Thanks. I used startTransition instead. I also think using refetch() instead of refetch had something to do with it well still having issues but working through it When I refresh the page it gives me this error: Uncaught (in promise) Error: Hydration Mismatch. Unable to find DOM nodes for hydration key: s00-1-0-0 Which was fixed by changing astro's client:load to client:only='solid-js'

InnerSun•10mo ago

I remember I had that kind of issues unless I used .latest Try to use fetchedOnline.latest in your JSX ?

As of 1.4.0, data.latest will return the last returned value and won't trigger Suspense and transitions; if no value has been returned yet, data.latest acts the same as data(). This can be useful if you want to show the out-of-date data while the new data is loading. https://www.solidjs.com/docs/latest/api#createresource

ish•10mo ago

I asked this last week in solid-start, using .latest was the answer.

Gaming

Programming

stop screen flicker from createResource refetch?