RTK Query: Clean way to set minimum time threshold on initial data fetches or mutations

[agusterodin]

Hey! Loving RTK query.

I am looking for a clean, sustainable way to implement a minimum loading time threshold for queries. Many responses on my project come back in a matter of 20-50ms and the placeholder flicker is really jarring. The ideal implementation would set a minimum loading time just for the initial fetch but wouldn't affect subsequent updates if there is already data cached / during polling. The subsequent updates should be instant.

I've been doing this redux-saga to achieve a minimum loading threshold:

const { response } = yield* all({ response: call(api.image.getMetadata, action.payload),
      delay: delay(LOADING_SKELETON_MINIMUM_DURATION) })

I'm curious on how this would work for data posting/mutations as well. The potential advantages to adding an artificial minimum post time threshold in certain scenarios is explained well here: https://www.youtube.com/watch?v=P11U3tUdk8g&t=1254s.

---

My initial thought process for delaying initial fetch was to implement some sort of hook that components would use: Something like this:

const minimumWaitTimeElapsed = useMinimumFetchWaitTimeElapsed(5000, isLoading)

and conditionally keeping the loading skeleton on the screen with a minimumWaitTimeElapsed && isLoaded condition.

The isError case would obviously short circuit and render something else. The hook would also instantly return true if being rendered server-side.

This doesn’t feel ideal though. I have no idea if there are other implications or cases that this hook overlooks.

It almost seems as if this would be something that could be baked into the auto-generated hook implementation. The advantage to this would be ease of use.

One situation that has my mind wandering is if one component is fetching data and another component subscribes while fetching is still occurring. This tells me that this delay behavior should ideally occur at the component/hook level instead of API definition level since you would otherwise have to restart the entire request to ensure "placeholder flicker" doesn't occur for components if they subscribe while a fetch is already in progress.

I haven't even started thinking about the mutation scenario yet. I figure the query scenario is a good place to start.

[phryneas]

I think Suspense will cover that pretty much, I don't think it will make much sense to try and imitate that behaviour. I've actually opened a PR on that today. It's still very rough around the edges (and honestly, more a discussion item - I haven't even tried it yet), but feedback & ideas are welcome #1277

[agusterodin]

I wish I could provide feedback/ideas but I know nothing about Suspense :(

[agusterodin]

I came up with an initial attempt on minimum placeholder shown time for fetched data:

This is what the component that uses the hook looks like:

export default function Example() {
  const routeMatch = useRouteMatch({ path: '/resources/:id/', exact: true })
  const resourceId = routeMatch?.params?.id ? parseInt(routeMatch?.params?.id) : undefined

  const { data, isLoading, isError } = useGetCampaignMetadataByIdQuery(resourceId as number, {
    skip: resourceId === undefined
  })

  const minimumMetadataFetchTimeElapsed = useMinimumFetchTimeElapsed(750, isLoading)

  if (isError) return <div>Error State Goes Here</div>
  
  return <Metadata metadataResults={minimumMetadataFetchTimeElapsed ? data : undefined} />
}

Here is the hook I came up with:

export function useMinimumFetchTimeElapsed(ms: number = 0, isLoading: boolean) {
  const [hasElapsed, setHasElapsed] = useState<boolean>(true)
  const timeout = useRef<ReturnType<typeof setTimeout>>()

  useEffect(() => {
    if (isLoading) {
      timeout.current && clearTimeout(timeout.current)
      setHasElapsed(false)
      timeout.current = setTimeout(() => {
        setHasElapsed(true)
      }, ms)
    }
  }, [ms, isLoading])

  useEffect(() => timeout.current && clearTimeout(timeout.current), [])

  return hasElapsed
}

The component that shows the metadata just renders loading placeholder if data is undefined.

Looking forward to not needing this if Suspense is able to handle this in the future.

My hook doesn't account for SSR but I haven't gotten that far yet!