.riv url is re-fetched many times

[hckhanh]

When ever I reuse the component that load the .riv file it's still re-fetched the riv file again no matter how many time it is fetched before. Is there any caching mechanism to deal with it? I am using vite and import it as an url

import animationSaladin from '@/assets/animations/file.riv?url'
import { useColorScheme } from '@/states/theme'
import Rive from '@rive-app/react-canvas'
import { memo } from 'react'

const styles = { width: 150, height: 150 }

function LoadingOverlayLoader() {
  const colorScheme = useColorScheme()
  return (
    <Rive
      artboard='Logo'
      src={animationSaladin}
      stateMachines={colorScheme}
      style={styles}
    />
  )
}

export default memo(LoadingOverlayLoader)

[EliotSlevin]

@hckhanh I think this issue was a similar case, and came to a good solution? https://github.com/rive-app/rive-react/issues/153

[damzobridge]

We've released a new useRiveFile hook that should address this. See #153 .

Now you can pass in an existing RiveFile instance for an animation to the LoadingOverlayLoader instead of instantiating within the component. This lets you cache the RiveFile instance outside the component and use it across multiple components while fetching it only once.