Added dynamic dataLoader importing and fixing race conditions

src/lib/core/Composite.svelte

@@ -26,33 +26,43 @@
 	}
 
 	export let composite: IComposite;
-
 	let loadedServices: Record<string, any> = {};
+	let layoutStyle = '';
 
-	// Reactive loading mechanism for services based on composite changes
-	$: if (composite?.services) {
-		composite.services.forEach(async (serviceName) => {
-			if (!loadedServices[serviceName]) {
-				loadedServices[serviceName] = await loadService(serviceName);
+	$: {
+		// Create layout style reactively
+		layoutStyle = computeLayoutStyle(composite?.layout);
+
+		// Load services reactively
+		if (composite?.services) {
+			for (const serviceName of composite.services) {
+				if (!loadedServices[serviceName]) {
+					// Note: We're ignoring async operation here, you might want to handle it if needed
+					loadService(serviceName).then((service) => {
+						loadedServices[serviceName] = service;
+					});
+				}
 			}
-		});
+		}
+
+		// Initialize composite state reactively
+		if (composite?.children) {
+			composite.children.forEach((child) => {
+				initializeCompositeState(child);
+				mapAndSubscribe(child);
+			});
+		}
 	}
 
-	$: layoutStyle = composite?.layout
-		? `
-		grid-template-areas: ${composite.layout.areas};
-		${composite.layout.gap ? `gap: ${composite.layout.gap};` : ''}
-		${composite.layout.columns ? `grid-template-columns: ${composite.layout.columns};` : ''}
-		${composite.layout.rows ? `grid-template-rows: ${composite.layout.rows};` : ''}
-		`
-		: '';
+	function computeLayoutStyle(layout?: ICompositeLayout) {
+		if (!layout) return '';
 
-	// Reactive statement to watch changes in the composite prop
-	$: if (composite?.children) {
-		composite.children.forEach((child) => {
-			initializeCompositeState(child);
-			mapAndSubscribe(child);
-		});
+		return `
+			grid-template-areas: ${layout.areas};
+			${layout.gap ? `gap: ${layout.gap};` : ''}
+			${layout.columns ? `grid-template-columns: ${layout.columns};` : ''}
+			${layout.rows ? `grid-template-rows: ${layout.rows};` : ''}
+		`;
 	}
 
 	function initializeCompositeState(child: IComposite) {
@@ -65,6 +75,8 @@
 		}
 	}
 
+	let unsubscribers = [];
+
 	function mapAndSubscribe(component: IComposite) {
 		console.log('Mapping and subscribing for:', component.id);
 
@@ -77,14 +89,13 @@
 				if (externalID === 'data') {
 					const unsubscribe = dataStore.subscribe((store) => {
 						if (externalKey in store) {
-							// Check if the data item is a Svelte store
 							if (store[externalKey] && typeof store[externalKey].subscribe === 'function') {
 								let innerUnsub = store[externalKey].subscribe((value) => {
 									localStore.update((storeValue) => {
 										return { ...storeValue, [localKey]: value };
 									});
 								});
-								onDestroy(innerUnsub);
+								unsubscribers.push(innerUnsub);
 							} else {
 								localStore.update((storeValue) => {
 									return { ...storeValue, [localKey]: store[externalKey] };
@@ -93,7 +104,7 @@
 						}
 					});
 
-					onDestroy(unsubscribe);
+					unsubscribers.push(unsubscribe);
 				} else {
 					const externalStore = getCompositeStore(externalID);
 					if (externalStore) {
@@ -105,7 +116,7 @@
 							}
 						});
 
-						onDestroy(unsubscribe);
+						unsubscribers.push(unsubscribe);
 					}
 				}
 			}
@@ -116,6 +127,11 @@
 		}
 	}
 
+	// Call all unsubscribe methods when the component is destroyed.
+	onDestroy(() => {
+		unsubscribers.forEach((unsub) => unsub());
+	});
+
 	async function getComponent(componentName: string) {
 		if (components[componentName]) {
 			const module = await components[componentName]();