Feat: Replace lottie-web with dotlottie

packages/spor-loader/copy-lottie-files.js

@@ -0,0 +1,28 @@
+// scripts/copy-lottie-files.js
+const fs = require('node:fs');
+const path = require('node:path');
+
+// Source directory with .lottie files
+const sourceDir = path.resolve(__dirname, './src/lottie');
+// Destination directory
+const destDir = path.resolve(__dirname, './assets');
+
+// Create destination directory if it doesn't exist
+if (!fs.existsSync(destDir)) {
+  fs.mkdirSync(destDir, { recursive: true });
+}
+
+// Find all .lottie files in source directory
+const lottieFiles = fs.readdirSync(sourceDir)
+  .filter(file => file.endsWith('.lottie'));
+
+// Copy each file to the destination
+for (const file of lottieFiles) {
+  const sourcePath = path.join(sourceDir, file);
+  const destPath = path.join(destDir, file);
+
+  fs.copyFileSync(sourcePath, destPath);
+  console.log(`Copied: ${file}`);
+}
+
+console.log(`Copied ${lottieFiles.length} .lottie files to assets/`);

packages/spor-loader/package.json

@@ -6,7 +6,8 @@
   "types": "./dist/index.d.ts",
   "license": "MIT",
   "files": [
-    "dist"
+    "dist",
+    "assets"
   ],
   "sideEffects": false,
   "homepage": "https://github.com/nsbno/spor/tree/main/packages/spor-loader",
@@ -16,7 +17,7 @@
     "directory": "packages/spor-loader"
   },
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && node ./copy-lottie-files.js",
     "dev": "tsup --watch"
   },
   "devDependencies": {

packages/spor-loader/src/global.d.ts

@@ -0,0 +1,3 @@
+interface ImportMeta {
+  url: string;
+}

packages/spor-loader/src/index.ts

@@ -1,14 +1,43 @@
 export * from "./animation-data/content-loader";
+export * from "./animation-data/content-loader-pride";
 export * from "./animation-data/full-screen-loader-black";
 export * from "./animation-data/full-screen-loader-white";
 export * from "./animation-data/inline-loader-color";
+export * from "./animation-data/inline-loader-color-pride";
 export * from "./animation-data/inline-loader-dark";
 export * from "./animation-data/inline-loader-light";
 export * from "./animation-data/inline-loader-light-color";
 export * from "./animation-data/spinner-color";
+export * from "./animation-data/spinner-color-pride";
 export * from "./animation-data/spinner-dark";
 export * from "./animation-data/spinner-light";
 export * from "./animation-data/vy-logo-pride";
-export * from "./animation-data/content-loader-pride";
-export * from "./animation-data/inline-loader-color-pride";
-export * from "./animation-data/spinner-color-pride";
+
+export const lottieAssets = {
+  contentLoader: 'content-loader.lottie',
+  contentLoaderPride: 'content-loader-pride.lottie',
+  fullScreenLoaderBlack: 'full-screen-loader-black.lottie',
+  fullScreenLoaderWhite: 'full-screen-loader-white.lottie',
+  inlineLoaderColor: 'inline-loader-color.lottie',
+  inlineLoaderColorPride: 'inline-loader-color-pride.lottie',
+  inlineLoaderDark: 'inline-loader-dark.lottie',
+  inlineLoaderLight: 'inline-loader-light.lottie',
+  inlineLoaderLightColor: 'inline-loader-light-color.lottie',
+  spinnerColor: 'spinner-color.lottie',
+  spinnerColorPride: 'spinner-color-pride.lottie',
+  spinnerDark: 'spinner-dark.lottie',
+  spinnerLight: 'spinner-light.lottie',
+  vyLogoPride: 'vy-logo-pride.lottie'
+} as const;
+
+// Works in dev, but it wont build with this URL stuff
+// Not sure how to include the lottie files in a meaningful way. Perhaps store them on a cdn instead of as a npm package?
+export function getLottiePath(filename: string) {
+  return new URL(`../assets/${filename}`, import.meta.url).href;
+}
+
+export const lottieFiles = Object.fromEntries(
+  Object.entries(lottieAssets).map(
+    ([key, filename]) => [key, getLottiePath(filename)]
+  )
+) as Record<keyof typeof lottieAssets, string>;

packages/spor-loader/tsconfig.json

@@ -1,5 +1,12 @@
 {
   "extends": "@vygruppen/tsconfig/base.json",
   "include": ["."],
-  "exclude": ["dist", "build", "node_modules"]
+  "exclude": ["dist", "build", "node_modules"],
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "moduleResolution": "node",
+    "target": "ES2020",
+    "module": "ESNext", 
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+  }
 }

packages/spor-react/package.json

@@ -40,7 +40,7 @@
     "awesome-phonenumber": "^5.11.0",
     "deepmerge": "^4.3.1",
     "framer-motion": "^11.11.17",
-    "lottie-react": "^2.4.1",
+    "@lottiefiles/dotlottie-react": "^0.13.5",
     "next-themes": "^0.4.4",
     "react-aria": "^3.33.1",
     "react-icons": "^5.4.0",

packages/spor-react/src/loader/ColorInlineLoader.tsx

@@ -1,5 +1,4 @@
 import { Box, BoxProps, Center, VisuallyHidden } from "@chakra-ui/react";
-import { inlineLoaderColorData } from "@vygruppen/spor-loader";
 
 import { ClientOnly } from "./ClientOnly";
 import Lottie from "./Lottie";
@@ -19,7 +18,7 @@ export const ColorInlineLoader = ({
     <Center role="status" aria-live="polite" {...props}>
       <Box width={width} maxWidth={maxWidth}>
         <ClientOnly>
-          <Lottie animationData={inlineLoaderColorData} />
+          <Lottie animationKey='inlineLoaderColor' />
         </ClientOnly>
       </Box>
       <VisuallyHidden>Loading...</VisuallyHidden>

packages/spor-react/src/loader/ColorSpinner.tsx

@@ -1,6 +1,5 @@
 "use client";
 import { Box, BoxProps, Center, VisuallyHidden } from "@chakra-ui/react";
-import { spinnerColorData } from "@vygruppen/spor-loader";
 
 import { ClientOnly } from "./ClientOnly";
 import Lottie from "./Lottie";
@@ -32,7 +31,7 @@ export const ColorSpinner = ({
     <Center flexDirection="column" role="status" aria-live="polite" {...props}>
       <Box width={width} maxWidth={maxWidth}>
         <ClientOnly>
-          <Lottie animationData={spinnerColorData} />
+          <Lottie animationKey='spinnerColor' />
         </ClientOnly>
       </Box>
       <VisuallyHidden>Loading...</VisuallyHidden>

packages/spor-react/src/loader/ContentLoader.tsx

@@ -1,6 +1,5 @@
 "use client";
 import { Box, BoxProps, VisuallyHidden } from "@chakra-ui/react";
-import { contentLoaderData } from "@vygruppen/spor-loader";
 
 import { ClientOnly } from "./ClientOnly";
 import Lottie from "./Lottie";
@@ -15,7 +14,7 @@ export const ContentLoader = ({ children, ...props }: ContentLoaderProps) => {
     <Box role="status" aria-live="polite" {...props}>
       <Box maxWidth="140px" marginX="auto">
         <ClientOnly>
-          <Lottie animationData={contentLoaderData} />
+          <Lottie animationKey='contentLoader' />
         </ClientOnly>
       </Box>
       <VisuallyHidden>Loading...</VisuallyHidden>

packages/spor-react/src/loader/DarkFullScreenLoader.tsx

@@ -1,6 +1,5 @@
 "use client";
 import { Box, BoxProps, Center, VisuallyHidden } from "@chakra-ui/react";
-import { fullScreenLoaderWhiteData } from "@vygruppen/spor-loader";
 
 import { ClientOnly } from "./ClientOnly";
 import Lottie from "./Lottie";
@@ -22,7 +21,7 @@ export const DarkFullScreenLoader = ({
     >
       <Box width={width} maxWidth={maxWidth}>
         <ClientOnly>
-          <Lottie animationData={fullScreenLoaderWhiteData} />
+          <Lottie animationKey='fullScreenLoaderWhite' />
         </ClientOnly>
       </Box>
       <VisuallyHidden>Loading...</VisuallyHidden>

packages/spor-react/src/loader/DarkInlineLoader.tsx

@@ -1,6 +1,5 @@
 "use client";
 import { Box, BoxProps, Center, VisuallyHidden } from "@chakra-ui/react";
-import { inlineLoaderDarkData } from "@vygruppen/spor-loader";
 
 import { ClientOnly } from "./ClientOnly";
 import Lottie from "./Lottie";
@@ -18,7 +17,7 @@ export const DarkInlineLoader = ({
     <Center role="status" aria-live="polite" {...props}>
       <Box width={width} maxWidth={maxWidth}>
         <ClientOnly>
-          <Lottie animationData={inlineLoaderDarkData} />
+          <Lottie animationKey="inlineLoaderDark" />
         </ClientOnly>
       </Box>
       <VisuallyHidden>Loading...</VisuallyHidden>

packages/spor-react/src/loader/DarkSpinner.tsx

@@ -1,5 +1,4 @@
 "use client";
-import { spinnerDarkData, spinnerLightData } from "@vygruppen/spor-loader";
 
 import { Box, BoxProps, Center, useColorMode, VisuallyHidden } from "..";
 import { ClientOnly } from "./ClientOnly";
@@ -28,12 +27,11 @@ export const DarkSpinner = ({
   ...props
 }: DarkSpinnerProps) => {
   const { colorMode } = useColorMode();
-  const spinnerData = colorMode === "dark" ? spinnerLightData : spinnerDarkData;
   return (
     <Center flexDirection="column" role="status" aria-live="polite" {...props}>
       <Box width={width} maxWidth={maxWidth}>
         <ClientOnly>
-          <Lottie animationData={spinnerData} />
+          <Lottie animationKey={colorMode === 'light' ? 'spinnerLight' : 'spinnerDark'} />
         </ClientOnly>
       </Box>
       <VisuallyHidden>Loading...</VisuallyHidden>

packages/spor-react/src/loader/LightFullScreenLoader.tsx

@@ -1,6 +1,5 @@
 "use client";
 import { Box, BoxProps, Center, VisuallyHidden } from "@chakra-ui/react";
-import { fullScreenLoaderBlackData } from "@vygruppen/spor-loader";
 
 import { ClientOnly } from "./ClientOnly";
 import Lottie from "./Lottie";
@@ -22,7 +21,7 @@ export const LightFullScreenLoader = ({
     >
       <Box width={width} maxWidth={maxWidth}>
         <ClientOnly>
-          <Lottie animationData={fullScreenLoaderBlackData} />
+          <Lottie animationKey='fullScreenLoaderBlack' />
         </ClientOnly>
       </Box>
       <VisuallyHidden>Loading...</VisuallyHidden>

packages/spor-react/src/loader/LightInlineLoader.tsx

@@ -1,6 +1,5 @@
 "use client";
 import { Box, BoxProps, Center, VisuallyHidden } from "@chakra-ui/react";
-import { inlineLoaderLightData } from "@vygruppen/spor-loader";
 
 import { ClientOnly } from "./ClientOnly";
 import Lottie from "./Lottie";
@@ -24,7 +23,7 @@ export const LightInlineLoader = ({
     >
       <Box width={width} maxWidth={maxWidth}>
         <ClientOnly>
-          <Lottie animationData={inlineLoaderLightData} />
+          <Lottie animationKey='inlineLoaderLight' />
         </ClientOnly>
       </Box>
       <VisuallyHidden>Loading...</VisuallyHidden>

packages/spor-react/src/loader/LightSpinner.tsx

@@ -1,6 +1,5 @@
 "use client";
 import { Box, BoxProps, Center, VisuallyHidden } from "@chakra-ui/react";
-import { spinnerLightData } from "@vygruppen/spor-loader";
 
 import { ClientOnly } from "./ClientOnly";
 import Lottie from "./Lottie";
@@ -31,7 +30,7 @@ export const LightSpinner = ({
     <Center flexDirection="column" role="status" aria-live="polite" {...props}>
       <Box width={width} maxWidth={maxWidth}>
         <ClientOnly>
-          <Lottie animationData={spinnerLightData} />
+          <Lottie animationKey="spinnerLight" />
         </ClientOnly>
       </Box>
       <VisuallyHidden>Loading...</VisuallyHidden>

packages/spor-react/src/loader/Lottie.tsx

@@ -1,8 +1,9 @@
-import ReactLottie from "lottie-react";
+import { DotLottieReact } from "@lottiefiles/dotlottie-react";
+import { lottieFiles } from "@vygruppen/spor-loader";
 
 /**
  * A wrapper around Lottie to make it tree-shakeable for SSR.
  */
-export default function Lottie({ animationData }: { animationData: unknown }) {
-  return <ReactLottie animationData={animationData} />;
+export default function Lottie({ animationKey  }: { animationKey: keyof typeof lottieFiles }) {
+  return <DotLottieReact src={lottieFiles[animationKey]} autoplay loop/>;
 }

packages/spor-react/src/loader/index.tsx

@@ -10,3 +10,5 @@ export * from "./LightSpinner";
 export * from "./ProgressBar";
 export * from "./ProgressLoader";
 export * from "./Skeleton";
+
+