From bab6c5b2ee0879a0ab064ead0e6a79b1e0713a50 Mon Sep 17 00:00:00 2001
From: Max Clayton Clowes <contact@mcclowes.com>
Date: Fri, 22 Nov 2024 15:31:09 +0000
Subject: [PATCH 1/4] Fix suspense boundry

---
 src/components/Lottie/index.js | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/Lottie/index.js b/src/components/Lottie/index.js
index 3072ee847..2f1995677 100644
--- a/src/components/Lottie/index.js
+++ b/src/components/Lottie/index.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Suspense } from "react";
 import Lottie from "lottie-react";
 
 import BrowserOnly from "@docusaurus/BrowserOnly";
@@ -13,13 +13,16 @@ const App = (props) => {
 	} = props
 
 return <BrowserOnly>
-{ () => 
-	<Lottie
-		className={styles.wrapper}
-		animationData={animation}
-		loop={loop}
-		{...rest}
-	/>}
+	{ 
+		() => <Suspense>
+			<Lottie
+				className={styles.wrapper}
+				animationData={animation}
+				loop={loop}
+				{...rest}
+			/>
+		</Suspense>
+	}
 </BrowserOnly>
 };
 

From 896e4f93287aed72bbd7dbf7014c421a5197977c Mon Sep 17 00:00:00 2001
From: Max Clayton Clowes <contact@mcclowes.com>
Date: Fri, 22 Nov 2024 15:41:37 +0000
Subject: [PATCH 2/4] Delete lottie

---
 docs/using-the-api/push.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/using-the-api/push.md b/docs/using-the-api/push.md
index e33b264d1..99789b5a6 100644
--- a/docs/using-the-api/push.md
+++ b/docs/using-the-api/push.md
@@ -8,7 +8,7 @@ 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: 

From ae6956b368e92c0410289155df33655232fc5f4c Mon Sep 17 00:00:00 2001
From: Max Clayton Clowes <contact@mcclowes.com>
Date: Fri, 22 Nov 2024 15:47:23 +0000
Subject: [PATCH 3/4] Delete lottie

---
 docs/using-the-api/push.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/docs/using-the-api/push.md b/docs/using-the-api/push.md
index 99789b5a6..7a07803eb 100644
--- a/docs/using-the-api/push.md
+++ b/docs/using-the-api/push.md
@@ -5,9 +5,8 @@ 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'
 
+import webhooks from '../../static/animations/webhooks.json'
 
 
 Codat offers the ability to create, update, and delete records in the source platforms of our integrations using our standard data models.

From 0598397d1ab2e1eb307da73c14f7a6dc5f2f3a18 Mon Sep 17 00:00:00 2001
From: Max Clayton Clowes <contact@mcclowes.com>
Date: Fri, 22 Nov 2024 15:54:37 +0000
Subject: [PATCH 4/4] Delete lottie

---
 docs/using-the-api/push.md     |  3 ++-
 src/components/Lottie/index.js | 39 ++++++++++++++++++----------------
 2 files changed, 23 insertions(+), 19 deletions(-)

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;