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.

Start at the @rive-app/react-canvas Rive component and trace how the src asset is loaded relative to rive.wasm. Add the requested preload option or prop, then verify that the asset can be fetched before the WASM runtime; update the relevant component documentation if the option is user-facing.