rive-app
Preload option
Hi there, first time user. We decided to give Rive a shot, and our first use case is a loading animation for page load itself.
This means that it is of critical priority for the animation to appear as soon as possible on the page.
I am using @rive-app/react-canvas as such:
<Rive src='/loader.riv' />
I noticed that the loader was taking an unexpectedly long time to appear on screen, despite being a small file.
After having a look, it seems Rive only loads assets after loading rive.wasm. In general, it would be nice to be able to self-host/bundle that wasm file, but that's a separate issue.
If I change my code to this:
<link rel='preload' href='/loader.riv' as='fetch' />
<Rive src='/loader.riv' />
The asset will be loaded by the browser immediately – before the wasm asset.
This should be a trivial prop/feature to add to the React component, and is crucial for many use cases.
Note: I originally searched for a preload option in the Rive docs, as I assumed there would be one, but instead only found this article, outlining the same idea.
Hi @isaachinman - we're looking to update our docs soon here on guidance to preload the WASM and Rive files for a faster experience like mentioned in the article you linked.
Regarding a sort of preloadRiveFile boolean prop, would you expect this to render out the <link> and the <Rive> in one? I assume you'd want to do this in the <Head> which would be separate from rendering the Rive here, but curious if you're wanting to inline them together in one component
Hey @zplata, thanks for a quick response.
Yes, I would expect any preload prop to inline the link tag. It's perfectly acceptable and spec-compliant to include link tags within the body, as long as the link type is body-ok. Docs here.
Somewhat relevant article here.
Gotcha, thanks! TIL :)
I think that's a reasonable ask - we can look into adding this