Load animation once

[Soarc]

I wondering, is there any way to load rive animation once and use in multiple places?

I had button component with loader animation on it. I used that button on multiple times on page and it results to unnessary http request for each button.

This is simplified version of component I use

import RiveComponent, { Alignment, Fit, Layout } from '@rive-app/react-canvas';

export const Button =() => {    
    return <button type="button"  className="flex">
        ClickMe
        <RiveComponent src="/loading-wave.riv" layout={new Layout({ fit: Fit.Contain, alignment: Alignment.Center })} />
    </button>
});

Probably related to https://github.com/rive-app/rive-react/issues/135

[Soarc]

Since I'm using nextjs I was able to workaround animations loading via webpack url-loader.

You will need to install url-loader npm package and modify next.config.js.

const nextConfig = {
  reactStrictMode: true,
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    config.module.rules.push({
      test: /\.riv$/,
      use: {
        loader: "url-loader",
        options: {
          limit: 100000,
        },
      },
    });
    return config;
  },
};

module.exports = nextConfig;

Now you will be able to use animations as modules

import LoadingWave from "assets/loading-wave.riv";
export const Button =() => {    
    return <button type="button"  className="flex">
        ClickMe
        <RiveComponent src={LoadingWave} layout={new Layout({ fit: Fit.Contain, alignment: Alignment.Center })} />
    </button>
});

I also needed to add rive.d.ts typescript definition definition to get rid off VSCode "cannot find module" errors.

declare module "*.riv" {
    const value: string;
    export default value;
}

[Renesauve]

@Soarc Thank you so much, been struggling with this.