Updated Composite to render a FallBack Component, when no visual component has been rendered.

src/lib/components/Recipies/oRecipe.svelte

@@ -16,7 +16,7 @@
 		children: [
 			{
 				id: 'child',
-				component: 'LearnReady',
+				// component: 'LearnReady',
 				slot: 'left',
 				store: {
 					xstate: 'NOTREADY'

src/lib/core/Composite.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
 	import Composite from './Composite.svelte';
+	import FallBack from './FallBack.svelte';
 	import components from '$lib/core/componentLoader';
 	import services from '$lib/core/servicesLoader';
 	import { dataStore } from '$lib/core/dataLoader';
@@ -19,7 +20,7 @@
 		layout?: ICompositeLayout;
 		id: string;
 		slot?: string;
-		component: string;
+		component?: string;
 		services?: string[];
 		map?: Record<string, string>;
 		store?: Record<string, any>;
@@ -157,7 +158,7 @@
 			const module = await components[componentName]();
 			return module.default;
 		}
-		return null;
+		return FallBack;
 	}
 
 	async function loadService(serviceName: string) {
@@ -169,7 +170,8 @@
 	}
 
 	async function loadComponentAndService(component: IComposite) {
-		return await getComponent(component.component);
+		const componentName = component.component || 'FallBack';
+		return await getComponent(componentName);
 	}
 </script>
 
@@ -179,17 +181,14 @@
 >
 	{#if composite?.servicesLoaded}
 		{#await loadComponentAndService(composite) then Component}
-			{#if Component}
 			<svelte:component
 				this={Component}
 				id={composite.id}
 				store={getCompositeStore(composite.id)}
 				services={loadedServices}
 			/>
-			{/if}
 		{/await}
 	{/if}
-
 	{#if composite?.children}
 		{#each composite.children as child (child.id)}
 			<div
@@ -198,7 +197,6 @@
 			>
 				{#if child.servicesLoaded}
 					{#await loadComponentAndService(child) then ChildComponent}
-						{#if ChildComponent}
 						<svelte:component
 							this={ChildComponent}
 							id={child.id}
@@ -208,12 +206,7 @@
 						{#if child.children && child.children.length}
 							<Composite composite={child} />
 						{/if}
-						{:else}
-							<p>Component {child.component} not found.</p>
-						{/if}
 					{/await}
-				{:else}
-					<p>Loading services for child {child.id}...</p>
 				{/if}
 			</div>
 		{/each}

src/lib/core/FallBack.svelte

@@ -0,0 +1,4 @@
+<script>
+	export let id;
+	console.log(`FallBack component rendered with id ${id}`);
+</script>