Feat: Replace lottie-web with dotlottie

[brehen]

Background

lottie-web is a package that seems to have been completely abandoned by AirBnB. There's an issue related to a new navigator API in Node >21 which breaks the currently used package, even though it's wrapped in a <ClientOnly> component in spor-react. 😢

Undersigned found this github issue: Gamote/lottie-react#101 and found a user who had success with https://www.npmjs.com/package/@lottiefiles/dotlottie-react instead (directly followed by a comment from user who did not have success with it 🙄 )

Solution

@lottiefiles/dotlottie-react relies on src={urlToSrc} format, so the old content-loader.ts typescript objects were not compatible. I made a script that converted all the lottie objects into json, which I could then upload to https://lottiefiles.com and export as .lottie files.

The free tier has a max of 10 files you can upload as .json and export as .lottie before you have to pay up. So I made two accounts 😈

This PR proposes to use these lottie files instead and replace lottie-web with dotlottie-react. Lottie files are ~90% smaller than the ts/json equivalent and could improve load times for our end users. (I haven't benchmarked this)

I'm unsure on how to proceed further with making these .lottie files accessible to spor-react, as they could either A. be stored in the spor-loader package and imported into spor-react, or B. be stored on a CDN (https://spor.vy.no/assets/lottie/content-loader.lottie) and fetched by the spor-react loader components.

The lottie files currently live in: https://github.com/nsbno/spor/tree/feat/replace-lottie-react/packages/spor-loader/src/lottie

Screenshots

Spor docs (a remix app) spun up locally, before with lottie-web and node v24:	Spor docs spun up locally, on this branch and node v24:

My honest reaction

Chakra update checklist

Not sure if these changes solicit any checklist ticking, but let me know if I'm wrong!

Chakra update checklist

• Updated Sanity documentation in v2 dataset (English, links, component props and content)
• Updated documentation in the component file
• Update green-beans-check.md with any major changes
• Add changeset
• Double check design in Figma

UU checks

• It is possible to use the keyboard to reach your changes
• It is possible to enlarge the text 400% without losing functionality
• It works on both mobile and desktop
• It works in both Chrome, Safari and Firefox
• It works with VoiceOver
• There are no errors in aXe / SiteImprove-plugins / Wave
• Sanity documentation has been / will be updated (if neccessary)

If no packages, only docs has been changed:

• Documentation version has been bumped (package.json in docs)

Everything about making a React component:
https://spor.vy.no/guides/how-to-make-new-react-components

HOW TO MAKE A CHANGESET:
Go here: https://spor.vy.no/guides/how-to-make-new-react-components#creating-a-pr-and-publish-package

How to test

pnpm build before running pnpm dev and check out the loaders locally.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 0a04e91

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR