Manual setWasmUrl causes fetch for wasm file for every animation [@lottiefiles/dotlottie-react]

[aalcott14]

Overview

I'm attempting to use DotLottieWorkerReact and use the setWasmUrl method to retrieve the wasm file from my own server rather than the public CDN (for security purposes). It seems to work except that the fetch to the wasm url gets made for every single animation rather than a single fetch, like what occurs if setWasmUrl is not invoked and defers to the CDN.

I'm wondering what is causing the fetch to get made subsequent times when this does not occur without the use of setWasmUrl.

Only a single fetch occurs when using DotLottieReact component instead of DotLottieWorkerReact

Here's an example of my code:

import React, { MutableRefObject, useEffect, useState } from 'react';
import { DotLottieWorker, DotLottieWorkerReact, DotLottieWorkerReactProps, setWasmUrl } from '@lottiefiles/dotlottie-react';
import wasmURL from '@lottiefiles/dotlottie-web/dist/dotlottie-player.wasm?url';

setWasmUrl(`${window.location.origin}${wasmURL}`);

export interface LottieWebWorkerProps extends Omit<DotLottieWorkerReactProps, 'dotLottieRefCallback'> {
  lottieRef: MutableRefObject<DotLottieWorker>
  onLoad?: () => void;
  onComplete?: () => void;
}

export default function LottieWebWorker({ lottieRef, onLoad, onComplete, ...rest }: LottieWebWorkerProps) {
  const [dotLottie, setDotLottie] = useState<DotLottieWorker | null>(null);

  useEffect(() => {
    if (dotLottie) {
      if (lottieRef) {
        lottieRef.current = dotLottie;
      }
      if (onLoad) {
        dotLottie.addEventListener('load', onLoad);
      }
      if (onComplete) {
        dotLottie.addEventListener('complete', onComplete);
      }
    }

    return () => {
      if (dotLottie) {
        if (onLoad) {
          dotLottie.removeEventListener('load', onLoad);
        }
        if (onComplete) {
          dotLottie.removeEventListener('complete', onComplete);
        }
      }
    }
  }, [dotLottie, onLoad, onComplete]);

  return (
    <DotLottieWorkerReact
      dotLottieRefCallback={setDotLottie}
      {...rest}
    />
  );
}

...

Labels

• [ Type: Bug] Add the Type: Bug label to this issue.

[theashraf]

@aalcott14 fetching the WASM module should occur only once, even within a worker, as you mentioned, since all dotLottie instances created by workers share the same memory.

~The only exception is if you're using the workerId prop, which allows you to group animations into separate workers. Is that the case ?~

[theashraf]

reproducible on the perf-test page

[aalcott14]

Hi @theashraf, thanks for taking a look! Yes, as you can see on the perf test page, this issue becomes quite problematic from a performance perspective as the requests pile up