Preloading WASM

<!-- index.html -->
<!-- Open the connection to the wasm CDN as early as possible -->
<!-- If you are hosting the WASM file yourself, set this to your CDN URL instead -->
<link rel="preconnect" href="https://unpkg.com" crossorigin />

<!-- Preload the exact versioned wasm URL the runtime will request.
     The version MUST match the installed @rive-app package version, or the
     runtime re-fetches the resource -->
<!-- If you are hosting the WASM file yourself, set this to the rive.wasm location on your server -->
<link
  rel="preload"
  as="fetch"
  crossorigin
  href="https://unpkg.com/@rive-app/canvas@2.38.5/rive.wasm"
/>

<!-- Preload the main hero .riv file too -->
<link rel="preload" as="fetch" crossorigin href="/assets/hero.riv" />

import { Rive, RuntimeLoader } from '@rive-app/canvas';

// (Optional) Only add this if you are hosting the WASM file on your own servers
// const WASM_URL = "https://cdn.example.com/assets/rive-2.38.5.wasm";
// RuntimeLoader.setWasmUrl(WASM_URL);

// Run this API as early as possible on page load to begin compiling the rive.wasm file
RuntimeLoader.awaitInstance().catch(() => {});

const heroFetch = fetch("/assets/hero.riv").then((r) => r.arrayBuffer());

// ... later, when mounting:
async function mountHero(canvas) {
  const riveInstance = new Rive({
    canvas,
    buffer: await heroFetch,
    stateMachines: "State Machine 1",
    autoBind: true,
    autoplay: true,
    // ... other configuration
  });
}