Optimize component state mapping and reduce unnecessary updates

src/lib/components/Composite.svelte

@@ -27,11 +27,6 @@
 		if (component.map) {
 			const localStore = getComponentStore(component.id);
 
-			// Use the subscribe method to log and work with the store's value
-			localStore.subscribe((localStoreValue) => {
-				console.log('Local store before mapping:', localStoreValue);
-			});
-
 			for (const [localKey, external] of Object.entries(component.map)) {
 				const [externalID, externalKey] = external.split('.').map((item) => item.trim());
 				const externalStore = getComponentStore(externalID);
@@ -41,18 +36,17 @@
 						if (externalState && externalKey in externalState) {
 							localStore.update((storeValue) => {
 								storeValue = storeValue || {};
-								storeValue[localKey] = externalState[externalKey];
-								return storeValue;
+								if (storeValue[localKey] !== externalState[externalKey]) {
+									// Only update if there's a change
+									storeValue[localKey] = externalState[externalKey];
+									return storeValue;
+								}
+								return storeValue; // Return existing state if no change
 							});
 						}
 					});
 				}
 			}
-
-			// Use the subscribe method again if you want to log after mapping
-			localStore.subscribe((localStoreValue) => {
-				console.log('Local store after mapping:', localStoreValue);
-			});
 		}
 
 		if (component.children) {

src/routes/+page.svelte

@@ -5,14 +5,13 @@
 		layout: `
 			grid-template-areas: 
 				"login",
-				"main"
-				"footer";
-			grid-template-rows: 1fr 1fr auto;
+			grid-template-rows: 1fr;
 		`,
 		children: [
 			{
 				id: 'login1',
 				componentName: 'Login',
+				slot: 'Login',
 				children: [
 					{
 						id: 'wallet1',
@@ -31,18 +30,6 @@
 						]
 					}
 				]
-			},
-			{
-				id: 2,
-				componentName: 'Messages',
-				props: {},
-				slot: 'main'
-			},
-			{
-				id: 3,
-				componentName: 'Terminal',
-				props: {},
-				slot: 'footer'
 			}
 		]
 	};