diff --git a/src/components/Lottie/index.js b/src/components/Lottie/index.js
index 3072ee847..d3206e02e 100644
--- a/src/components/Lottie/index.js
+++ b/src/components/Lottie/index.js
@@ -1,26 +1,32 @@
-import React from "react";
-import Lottie from "lottie-react";
-
+import React, { Suspense, lazy } from "react";
 import BrowserOnly from "@docusaurus/BrowserOnly";
 
 import styles from "./styles.module.scss";
 
+// Dynamically import the Lottie component
+const Lottie = lazy(() => import("lottie-react"));
+
 const App = (props) => {
 	const {
 		animation,
-		loop=true,
+		loop = true,
 		...rest
-	} = props
+	} = props;
 
-return <BrowserOnly>
-{ () => 
-	<Lottie
-		className={styles.wrapper}
-		animationData={animation}
-		loop={loop}
-		{...rest}
-	/>}
-</BrowserOnly>
+	return (
+		<BrowserOnly>
+			{() => (
+				<Suspense fallback={<div>Loading...</div>}>
+					<Lottie
+						className={styles.wrapper}
+						animationData={animation}
+						loop={loop}
+						{...rest}
+					/>
+				</Suspense>
+			)}
+		</BrowserOnly>
+	);
 };
 
-export default App;
\ No newline at end of file
+export default App;