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}
+			<svelte:component
+				this={Component}
+				id={composite.id}
+				store={getCompositeStore(composite.id)}
+				services={loadedServices}
+			/>
 		{/await}
 	{/if}
-
 	{#if composite?.children}
 		{#each composite.children as child (child.id)}
 			<div
@@ -198,22 +197,16 @@
 			>
 				{#if child.servicesLoaded}
 					{#await loadComponentAndService(child) then ChildComponent}
-						{#if ChildComponent}
-							<svelte:component
-								this={ChildComponent}
-								id={child.id}
-								store={getCompositeStore(child.id)}
-								services={loadedServices}
-							/>
-							{#if child.children && child.children.length}
-								<Composite composite={child} />
-							{/if}
-						{:else}
-							<p>Component {child.component} not found.</p>
+						<svelte:component
+							this={ChildComponent}
+							id={child.id}
+							store={getCompositeStore(child.id)}
+							services={loadedServices}
+						/>
+						{#if child.children && child.children.length}
+							<Composite composite={child} />
 						{/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>