[NC]: Get updated storage recordings fix (#54)

* [NC]: Adds recursive function to get updated storage recordings

* [NC]: Adds dependency fix

* [NC]: Adds dependency fix

* [NC]: Adds dependency fix

* [NC]: correct error handling

* [NC]: biome fixes

apps/mocksi-lite/content/Popup/CreateDemo/DemoItem.tsx

@@ -26,9 +26,11 @@ const DemoItem = ({
 
 	return (
 		<div className={"flex justify-between w-full px-6"}>
-			<div>
-				<TextField variant={"title"}>{demo_name}</TextField>
-				<TextField>{customer_name}</TextField>
+			<div className={"w-[200px]"}>
+				<TextField variant={"title"} className={"truncate"}>
+					{demo_name}
+				</TextField>
+				<TextField className={"truncate"}>{customer_name}</TextField>
 			</div>
 			<div className={"flex gap-3"}>
 				<Button

apps/mocksi-lite/content/Popup/CreateDemo/index.tsx

@@ -18,15 +18,30 @@ const CreateDemo = ({
 	setState,
 }: CreateDemoProps) => {
 	const [recordings, setRecordings] = useState<Recording[]>([]);
+
+	const getRecordings = async () => {
+		let continueFetching = true;
+		while (continueFetching) {
+			try {
+				const results = await chrome.storage.local.get(["recordings"]);
+				const newRecordings = JSON.parse(results.recordings ?? "{}");
+				if (newRecordings.length !== recordings.length) {
+					setRecordings(newRecordings);
+					continueFetching = false; // Stop the loop if recordings have been updated
+				}
+			} catch (error) {
+				continueFetching = false; // Stop the loop in case of an error
+				console.error("Failed to fetch recordings:", error);
+			}
+		}
+	};
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies:
 	useEffect(() => {
-		try {
-			chrome.storage.local.get(["recordings"], (results) =>
-				setRecordings(JSON.parse(results.recordings) ?? []),
-			);
-		} catch (error) {
-			console.error("Error retrieving recordings from storage:", error);
+		if (!createForm) {
+			getRecordings();
 		}
-	}, []);
+	}, [createForm]);
 
 	const handleCancelClick = (recordings?: Recording[]) => {
 		if (recordings) {