chore: remove unused Lottie assets and update Lottie components to reference new file paths

src/shared/ui/lotties/checkmark/checkmark.tsx

@@ -1,8 +1,6 @@
 import { DotLottieReact } from '@lottiefiles/dotlottie-react'
 import { FC } from 'react'
 
-// @ts-expect-error - no types for dotlottie-react
-import lottie from '../../../assets/lotties/checkmark.lottie'
 import { IProps } from './interfaces/props.interface'
 
 export const LottieCheckmarkShared: FC<IProps> = (props) => {
@@ -10,7 +8,15 @@ export const LottieCheckmarkShared: FC<IProps> = (props) => {
 
     return (
         <div style={{ width, height }}>
-            <DotLottieReact autoplay={autoplay} loop={loop} src={lottie} />
+            <DotLottieReact
+                autoplay={autoplay}
+                loop={loop}
+                renderConfig={{
+                    autoResize: true,
+                    devicePixelRatio: window.devicePixelRatio || 2
+                }}
+                src="/lotties/checkmark.lottie"
+            />
         </div>
     )
 }

src/shared/ui/lotties/duck-progress/duck-progress.tsx

@@ -0,0 +1,22 @@
+import { DotLottieReact } from '@lottiefiles/dotlottie-react'
+import { FC } from 'react'
+
+import { IProps } from './interfaces/props.interface'
+
+export const LottieDuckProgressShared: FC<IProps> = (props) => {
+    const { width = 96, height = 115, autoplay = true, loop = true } = props
+
+    return (
+        <div style={{ width, height }}>
+            <DotLottieReact
+                autoplay={autoplay}
+                loop={loop}
+                renderConfig={{
+                    autoResize: true,
+                    devicePixelRatio: window.devicePixelRatio || 2
+                }}
+                src="/lotties/duck-progress.lottie"
+            />
+        </div>
+    )
+}

src/shared/ui/lotties/duck-progress/index.ts

@@ -0,0 +1 @@
+export * from './duck-progress.tsx'

src/shared/ui/lotties/duck-progress/interfaces/index.ts

@@ -0,0 +1 @@
+export * from './props.interface.ts'

src/shared/ui/lotties/duck-progress/interfaces/props.interface.ts

@@ -0,0 +1,6 @@
+export interface IProps {
+    autoplay?: boolean
+    height?: number
+    loop?: boolean
+    width?: number
+}

src/shared/ui/lotties/globe/globe.tsx

@@ -1,8 +1,6 @@
 import { DotLottieReact } from '@lottiefiles/dotlottie-react'
 import { FC } from 'react'
 
-// @ts-expect-error - no types for dotlottie-react
-import globe from '../../../assets/lotties/globe.lottie'
 import { IProps } from './interfaces/props.interface'
 
 export const LottieGlobeShared: FC<IProps> = (props) => {
@@ -10,7 +8,15 @@ export const LottieGlobeShared: FC<IProps> = (props) => {
 
     return (
         <div style={{ width, height }}>
-            <DotLottieReact autoplay={autoplay} loop={loop} src={globe} />
+            <DotLottieReact
+                autoplay={autoplay}
+                loop={loop}
+                renderConfig={{
+                    autoResize: true,
+                    devicePixelRatio: window.devicePixelRatio || 2
+                }}
+                src="/lotties/globe.lottie"
+            />
         </div>
     )
 }

src/shared/ui/lotties/index.ts

@@ -1 +1,6 @@
+export * from './checkmark'
+export * from './duck-progress'
+export * from './globe'
+export * from './jail'
 export * from './link'
+export * from './stop'

src/shared/ui/lotties/jail/index.ts

@@ -0,0 +1 @@
+export * from './jail.tsx'

src/shared/ui/lotties/jail/interfaces/index.ts

@@ -0,0 +1 @@
+export * from './props.interface.ts'

src/shared/ui/lotties/jail/interfaces/props.interface.ts

@@ -0,0 +1,6 @@
+export interface IProps {
+    autoplay?: boolean
+    height?: number
+    loop?: boolean
+    width?: number
+}

src/shared/ui/lotties/jail/jail.tsx

@@ -0,0 +1,22 @@
+import { DotLottieReact } from '@lottiefiles/dotlottie-react'
+import { FC } from 'react'
+
+import { IProps } from './interfaces/props.interface'
+
+export const LottieJailShared: FC<IProps> = (props) => {
+    const { width = 96, height = 115, autoplay = true, loop = true } = props
+
+    return (
+        <div style={{ width, height }}>
+            <DotLottieReact
+                autoplay={autoplay}
+                loop={loop}
+                renderConfig={{
+                    autoResize: true,
+                    devicePixelRatio: window.devicePixelRatio || 2
+                }}
+                src="/lotties/jail.lottie"
+            />
+        </div>
+    )
+}

src/shared/ui/lotties/link/link.tsx

@@ -1,8 +1,6 @@
 import { DotLottieReact } from '@lottiefiles/dotlottie-react'
 import { FC } from 'react'
 
-// @ts-expect-error - no types for dotlottie-react
-import link from '../../../assets/lotties/satellite.lottie'
 import { IProps } from './interfaces/props.interface'
 
 export const LottieLinkShared: FC<IProps> = (props) => {
@@ -10,7 +8,15 @@ export const LottieLinkShared: FC<IProps> = (props) => {
 
     return (
         <div style={{ width, height }}>
-            <DotLottieReact autoplay loop src={link} />
+            <DotLottieReact
+                autoplay
+                loop
+                renderConfig={{
+                    autoResize: true,
+                    devicePixelRatio: window.devicePixelRatio || 2
+                }}
+                src="/lotties/satellite.lottie"
+            />
         </div>
     )
 }

src/shared/ui/lotties/stop/stop.tsx

@@ -1,8 +1,6 @@
 import { DotLottieReact } from '@lottiefiles/dotlottie-react'
 import { FC } from 'react'
 
-// @ts-expect-error - no types for dotlottie-react
-import lottie from '../../../assets/lotties/stop-v2.lottie'
 import { IProps } from './interfaces/props.interface'
 
 export const LottieStopShared: FC<IProps> = (props) => {
@@ -10,7 +8,15 @@ export const LottieStopShared: FC<IProps> = (props) => {
 
     return (
         <div style={{ width, height }}>
-            <DotLottieReact autoplay={autoplay} loop={loop} src={lottie} />
+            <DotLottieReact
+                autoplay={autoplay}
+                loop={loop}
+                renderConfig={{
+                    autoResize: true,
+                    devicePixelRatio: window.devicePixelRatio || 2
+                }}
+                src="/lotties/stop-v2.lottie"
+            />
         </div>
     )
 }

src/widgets/dashboard/sessions-explorer/sessions-explorer-widget/sessions-explorer-progress.tsx

@@ -1,8 +1,9 @@
 import { Badge, Box, Group, Progress, Stack, Text } from '@mantine/core'
 import { AnimatePresence, motion } from 'motion/react'
 import { useTranslation } from 'react-i18next'
+import { FC, useState } from 'react'
 
-import { LottieGlobeShared } from '@shared/ui/lotties/globe'
+import { LottieDuckProgressShared, LottieGlobeShared, LottieJailShared } from '@shared/ui/lotties'
 import { CountryFlag } from '@shared/ui/get-country-flag'
 import { SectionCard } from '@shared/ui/section-card'
 
@@ -10,12 +11,17 @@ import type { ExplorerProgress } from './use-sessions-explorer'
 
 import styles from './sessions-explorer.module.css'
 
+const PROGRESS_LOTTIES: FC[] = [LottieDuckProgressShared, LottieGlobeShared, LottieJailShared]
+
+const pickRandomLottie = () => PROGRESS_LOTTIES[Math.floor(Math.random() * PROGRESS_LOTTIES.length)]
+
 interface IProps {
     progress: ExplorerProgress
 }
 
 export function SessionsExplorerProgress({ progress }: IProps) {
     const { t } = useTranslation()
+    const [LottieComponent] = useState(pickRandomLottie)
 
     const progressPercent =
         progress.total > 0
@@ -27,7 +33,7 @@ export function SessionsExplorerProgress({ progress }: IProps) {
             <SectionCard.Section className={styles.progressCard}>
                 <Stack align="center" gap="lg" py="xl" w="100%">
                     <div style={{ height: 120, display: 'flex', alignItems: 'center' }}>
-                        <LottieGlobeShared />
+                        {LottieComponent && <LottieComponent />}
                     </div>
 
                     <Stack align="center" gap="xs" w="100%">
@@ -42,7 +48,11 @@ export function SessionsExplorerProgress({ progress }: IProps) {
                             {progress.failed > 0 && (
                                 <Text c="red.5" component="span" fw={500}>
                                     {' '}
-                                    ({t('sessions-explorer-progress.nodes-failed', { count: progress.failed })})
+                                    (
+                                    {t('sessions-explorer-progress.nodes-failed', {
+                                        count: progress.failed
+                                    })}
+                                    )
                                 </Text>
                             )}
                         </Text>

vite.config.ts

@@ -49,12 +49,6 @@ export default defineConfig({
         rollupOptions: {
             output: {
                 manualChunks: {
-                    assets: [
-                        '/src/shared/assets/lotties/satellite.lottie',
-                        '/src/shared/assets/lotties/checkmark.lottie',
-                        '/src/shared/assets/lotties/stop-v2.lottie',
-                        '/src/shared/assets/lotties/globe.lottie'
-                    ],
                     react: [
                         'react',
                         'react-dom',
@@ -120,7 +114,10 @@ export default defineConfig({
         port: 3333,
         cors: true,
         strictPort: true,
-        allowedHosts: true
+        allowedHosts: true,
+        hmr: {
+            overlay: false
+        }
     },
     resolve: {
         alias: {