diff --git a/docs/using-the-api/push.md b/docs/using-the-api/push.md
index 7a07803eb..e33b264d1 100644
--- a/docs/using-the-api/push.md
+++ b/docs/using-the-api/push.md
@@ -5,9 +5,10 @@ description: "Understand how to add, modify, and delete data in Codat's integrat
 
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
-
+import Lottie from '@components/Lottie'
 import webhooks from '../../static/animations/webhooks.json'
 
+<Lottie animation={webhooks}/>
 
 Codat offers the ability to create, update, and delete records in the source platforms of our integrations using our standard data models.
 We support the following write operations: 
diff --git a/src/components/Lottie/index.js b/src/components/Lottie/index.js
index 2f1995677..d3206e02e 100644
--- a/src/components/Lottie/index.js
+++ b/src/components/Lottie/index.js
@@ -1,29 +1,32 @@
-import React, { Suspense } 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>
-	{ 
-		() => <Suspense>
-			<Lottie
-				className={styles.wrapper}
-				animationData={animation}
-				loop={loop}
-				{...rest}
-			/>
-		</Suspense>
-	}
-</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;