[C-3519] Fix async absolute lottie imports (#6976)

AudiusProject · Dec 19, 2023 · 2d72cef · 2d72cef
1 parent 7f78919
commit 2d72cef
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 21 deletions.
diff --git a/packages/web/src/components/animated-button/AnimatedIconButton.tsx b/packages/web/src/components/animated-button/AnimatedIconButton.tsx
@@ -68,8 +68,8 @@ const AnimatedIconButton = ({
       isMatrix={isMatrix}
       onClick={onClick || ((e: MouseEvent) => {})}
       href={href}
-      iconLightJSON={() => import(`assets/animations/${light}.json`)}
-      iconDarkJSON={() => import(`assets/animations/${dark}.json`)}
+      iconLightJSON={() => import(`../../assets/animations/${light}.json`)}
+      iconDarkJSON={() => import(`../../assets/animations/${dark}.json`)}
       activeClassName={activeClassName}
       disabledClassName={disabledClassName}
       className={className}

diff --git a/packages/web/src/components/bottom-bar/buttons/ExploreButton.tsx b/packages/web/src/components/bottom-bar/buttons/ExploreButton.tsx
@@ -18,8 +18,12 @@ const ExploreButton = ({
       isMatrix={isMatrixMode}
       onClick={onClick}
       href={href}
-      iconLightJSON={() => import('assets/animations/iconExploreLight.json')}
-      iconDarkJSON={() => import('assets/animations/iconExploreDark.json')}
+      iconLightJSON={() =>
+        import('../../../assets/animations/iconExploreLight.json')
+      }
+      iconDarkJSON={() =>
+        import('../../../assets/animations/iconExploreDark.json')
+      }
     />
   )
 }

diff --git a/packages/web/src/components/bottom-bar/buttons/FeedButton.tsx b/packages/web/src/components/bottom-bar/buttons/FeedButton.tsx
@@ -18,8 +18,12 @@ const FeedButton = ({
       darkMode={darkMode}
       onClick={onClick}
       href={href}
-      iconLightJSON={() => import('assets/animations/iconFeedLight.json')}
-      iconDarkJSON={() => import('assets/animations/iconFeedDark.json')}
+      iconLightJSON={() =>
+        import('../../../assets/animations/iconFeedLight.json')
+      }
+      iconDarkJSON={() =>
+        import('../../../assets/animations/iconFeedDark.json')
+      }
     />
   )
 }

diff --git a/packages/web/src/components/bottom-bar/buttons/LibraryButton.tsx b/packages/web/src/components/bottom-bar/buttons/LibraryButton.tsx
@@ -18,8 +18,12 @@ const LibraryButton = ({
       isMatrix={isMatrixMode}
       onClick={onClick}
       href={href}
-      iconLightJSON={() => import('assets/animations/iconFavoriteLight.json')}
-      iconDarkJSON={() => import('assets/animations/iconFavoriteDark.json')}
+      iconLightJSON={() =>
+        import('../../../assets/animations/iconFavoriteLight.json')
+      }
+      iconDarkJSON={() =>
+        import('../../../assets/animations/iconFavoriteDark.json')
+      }
     />
   )
 }

diff --git a/packages/web/src/components/bottom-bar/buttons/ProfileButton.tsx b/packages/web/src/components/bottom-bar/buttons/ProfileButton.tsx
@@ -18,8 +18,12 @@ const ProfileButton = ({
       isMatrix={isMatrixMode}
       onClick={onClick}
       href={href}
-      iconLightJSON={() => import('assets/animations/iconProfileLight.json')}
-      iconDarkJSON={() => import('assets/animations/iconProfileDark.json')}
+      iconLightJSON={() =>
+        import('../../../assets/animations/iconProfileLight.json')
+      }
+      iconDarkJSON={() =>
+        import('../../../assets/animations/iconProfileDark.json')
+      }
     />
   )
 }

diff --git a/packages/web/src/components/bottom-bar/buttons/TrendingButton.tsx b/packages/web/src/components/bottom-bar/buttons/TrendingButton.tsx
@@ -18,8 +18,12 @@ const TrendingButton = ({
       isMatrix={isMatrixMode}
       onClick={onClick}
       href={href}
-      iconLightJSON={() => import('assets/animations/iconTrendingLight.json')}
-      iconDarkJSON={() => import('assets/animations/iconTrendingDark.json')}
+      iconLightJSON={() =>
+        import('../../../assets/animations/iconTrendingLight.json')
+      }
+      iconDarkJSON={() =>
+        import('../../../assets/animations/iconTrendingDark.json')
+      }
     />
   )
 }

diff --git a/packages/web/src/components/play-bar/repeat-button/RepeatButtonProvider.tsx b/packages/web/src/components/play-bar/repeat-button/RepeatButtonProvider.tsx
@@ -60,13 +60,13 @@ const RepeatButtonProvider = ({
       } else {
         if (!defaultAnimations.current) {
           const { default: pbIconRepeatAll } = (await import(
-            'assets/animations/pbIconRepeatAll.json'
+            '../../../assets/animations/pbIconRepeatAll.json'
           )) as any
           const { default: pbIconRepeatSingle } = (await import(
-            'assets/animations/pbIconRepeatSingle.json'
+            '../../../assets/animations/pbIconRepeatSingle.json'
           )) as any
           const { default: pbIconRepeatOff } = (await import(
-            'assets/animations/pbIconRepeatOff.json'
+            '../../../assets/animations/pbIconRepeatOff.json'
           )) as any
           defaultAnimations.current = {
             pbIconRepeatAll,

diff --git a/packages/web/src/components/play-bar/shuffle-button/ShuffleButtonProvider.tsx b/packages/web/src/components/play-bar/shuffle-button/ShuffleButtonProvider.tsx
@@ -32,10 +32,10 @@ const ShuffleButtonProvider = ({
       if (isMatrix) {
         if (!matrixAnimations.current) {
           const { default: pbIconShuffleOff } = (await import(
-            'assets/animations/pbIconShuffleOffMatrix.json'
+            '../../../assets/animations/pbIconShuffleOffMatrix.json'
           )) as any
           const { default: pbIconShuffleOn } = (await import(
-            'assets/animations/pbIconShuffleOnMatrix.json'
+            '../../../assets/animations/pbIconShuffleOnMatrix.json'
           )) as any
           matrixAnimations.current = {
             pbIconShuffleOff,
@@ -45,8 +45,8 @@ const ShuffleButtonProvider = ({
         setAnimations({ ...matrixAnimations.current })
       } else if (darkMode) {
         if (!darkAnimations.current) {
-          const pbIconShuffleOff = require('assets/animations/pbIconShuffleOffDark.json')
-          const pbIconShuffleOn = require('assets/animations/pbIconShuffleOnDark.json')
+          const pbIconShuffleOff = require('../../../assets/animations/pbIconShuffleOffDark.json')
+          const pbIconShuffleOn = require('../../../assets/animations/pbIconShuffleOnDark.json')
           darkAnimations.current = {
             pbIconShuffleOff,
             pbIconShuffleOn
@@ -56,10 +56,10 @@ const ShuffleButtonProvider = ({
       } else {
         if (!defaultAnimations.current) {
           const { default: pbIconShuffleOff } = (await import(
-            'assets/animations/pbIconShuffleOff.json'
+            '../../../assets/animations/pbIconShuffleOff.json'
           )) as any
           const { default: pbIconShuffleOn } = (await import(
-            'assets/animations/pbIconShuffleOn.json'
+            '../../../assets/animations/pbIconShuffleOn.json'
           )) as any
           defaultAnimations.current = {
             pbIconShuffleOff,