How to pre-fetch/pre-load or showing loading spinner for Lotties from remote URI?

[ansh]

Description

I want to pre-fetch/pre-load remote URI's so that when I am displaying a Lottie, it is instant. However, right now my component takes a second or two after mounted to fetch the Lottie from the remote URI.

The native <Image /> component from React Native has a defaultSource and also onLoadStart and onLoadEnd components that allow to show loading spinners while the image is fetching. Furthermore, it also has the prefetch() function that allows for pre-fetching.

How can I do either show a loading spinner or pre-fetch/pre-load remote Lottie URI's?

[matinzd]

There is no plan for that right now. But that's can be a good addition for future implementations.

[nazrdogan]

+1

[ansh]

@matinzd Is there any way to show a loading spinner while the lottie is fetching remotely??

[ansh]

I have managed to get this working using react-query. I am sure you could get it working using useEffect and fetch as well.

I simply use the queryClient.fetch(["lottie"], fetcher) to fetch the data when I know the lottie is going to be shown on the screen soon and then since it stored in cache, it loads instantly when it is.

Similarly, if someone wanted to build their own solution they could simply fetch the data in advance using fetch and useEffect when the component is mounted, and then store the data in AsyncStorage, global state, or any other cache/storage mechanism and then read it'll be instant when they need it.

I am sure there could be a significantly better implementation if done within the package since the default Image component from react-native has prefetch capabilities as well.

[liujigang]

+1

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

[TheRogue76]

I am not promising anything, but maybe after we wrap up bridgeless, we can come back and take a crack at this. I feel like this could be a nice little API. CC: @matinzd

[ansh]

@TheRogue76 What steps would you take? I'm happy to take a crack at it.

[TheRogue76]

@ansh I'd go with the Event callbacks for now, and not bother making it too complicated out of the gate with the prefetch stuff (because you would have to keep the prefetched stuff somewhere, and that is a whole can of worms, from the API design, to where it would be stored, to cache invalidation, to disk and memory management etc. It needs to be thought out A LOT, so not now).

We already have an event called onAnimationLoaded and onAnimationFailure (you can see their API def here) so we are most of the way there. We would need something like onAnimationLoadStarted (The name would probably need a bit more thinking but whatever) and implement it like we have with the rest of the events.

We have to think about where it would make sense to call this API (technically loading dotLottie and even the JSON animations take a bit of time, but do we add them or not? etc) and then it is just a matter of doing it for our supported platforms.

[TheRogue76]

We have to think about where it would make sense to call this API (technically loading dotLottie and even the JSON animations take a bit of time, but do we add them or not? etc) and then it is just a matter of doing it for our supported platforms.

I'd start with seeing what the Image component from RN does. That should give us an idea of what people usually expect out of APIs like these. Set the same expectations.