Need the fetchPath function again

[gtolarc]

As of 1.4.0, the fetchPath function is gone, which was a great way to preload large lottie files and only render them later. Can you guys put it back in?

[gtolarc]

Without this feature, I always have to load the lottie file at the same time as the DOM generation, which limits the usability, could you guys provide a preload feature?

[theashraf]

@gtolarc We are working on it, and will let you know once its released

[theashraf]

@gtolarc, you can utilize dotlottie-js for your use case. We've included several utility methods within dotlottie-js to extract specific Lottie animation JSON from a .lottie file.

You can create your own fetchPath using dotlottie-js as demonstrated in the following example:

import { loadFromURL, getManifest, getAnimation } from "@dotlottie/dotlottie-js";

async function fetchPath(dotLottieUrl){
  const dotLottie = await loadFromURL(dotLottieUrl);

  const manifest = await getManifest(dotLottie);

  const activeLottieAnimationId = manifest.activeAnimationId || manifest.animations[0].id;

  const lottieJSON = await getAnimation(dotLottie, activeLottieAnimationId, { inlineAssets: true });

  return lottieJSON
}

https://github.com/dotlottie/dotlottie-js

[ghtea]

@theashraf I tried same code of the example for my .lottie and compressed .lottie file but I get following error "Invalid content type provided for .lottie file, expected application/zip",

If I just disable the code which trigger error like following, it works well (both fetchPath and playing animation)

could you figure out this?

[theashraf]

@ghtea Can you share the value of the 'content-type' response header of your dotlottie animation url ?

[ghtea]

@theashraf

@ghtea Can you share the value of the 'content-type' response header of your dotlottie animation url ?

const contentType = response.headers.get("content-type");
console.log('contentType: ', contentType); // DEBUG:

for some files, it prints null for some other files, it prints 'application/octet-stream'

[theashraf]

@ghtea

You can bypass the content-type validation in loadFromURL by using your own fetch method and then loading the .lottie file from the response's array buffer. But, ensure that the dotLottieUrl always points to a valid .lottie file.

import { loadFromArrayBuffer, getManifest, getAnimation } from "@dotlottie/dotlottie-js";

async function fetchPath(dotLottieUrl) {
  const response = await fetch(dotLottieUrl);

  const dotLottie = await loadFromArrayBuffer(await response.arrayBuffer())

  const manifest = await getManifest(dotLottie);

  const activeLottieAnimationId = manifest.activeAnimationId || manifest.animations[0].id;

  const lottieJSON = await getAnimation(dotLottie, activeLottieAnimationId, { inlineAssets: true });

  return lottieJSON;
}

[ghtea]

@ghtea

You can bypass the content-type validation in loadFromURL by using your own fetch method and then loading the .lottie file from the response's array buffer. But, ensure that the dotLottieUrl always points to a valid .lottie file.

import { loadFromArrayBuffer, getManifest, getAnimation } from "@dotlottie/dotlottie-js";

async function fetchPath(dotLottieUrl) {
  const response = await fetch(dotLottieUrl);

  const dotLottie = await loadFromArrayBuffer(await response.arrayBuffer())

  const manifest = await getManifest(dotLottie);

  const activeLottieAnimationId = manifest.activeAnimationId || manifest.animations[0].id;

  const lottieJSON = await getAnimation(dotLottie, activeLottieAnimationId, { inlineAssets: true });

  return lottieJSON;
}

it works, thank you so much!