bosia 0.7.9 → 0.8.0

package/package.json

@@ -1,8 +1,8 @@
 {
 	"name": "bosia",
-	"version": "0.7.9",
+	"version": "0.8.0",
 	"type": "module",
-	"description": "A fast, batteries-included fullstack framework — SSR · Svelte 5 Runes · Bun · ElysiaJS. File-based routing inspired by SvelteKit. No Node.js, no Vite, no adapters.",
+	"description": "A fast, batteries-included fullstack framework — SSR · Svelte 5 Runes · Bun · ElysiaJS. File-based routing No Node.js, no Vite, no adapters.",
 	"keywords": [
 		"bun",
 		"svelte",

package/src/core/client/App.svelte

@@ -53,6 +53,12 @@
 	const errorDepth = $derived(ssrMode ? ssrErrorDepth : appState.errorDepth);
 	let navigating = $state(false);
 	let navDone = $state(false);
+	// +loading.svelte skeleton shown during navigation to a route that has one.
+	let LoadingComponent = $state<any>(null);
+	let loadingDepth = $state(0); // # of shared layouts to keep mounted under the loader
+	let showLoading = $state(false);
+	let currentLayoutPaths: string[] = [];
+	let lastSettledPath = "";
 	// Skip bar on the very first effect run (initial hydration — data already present)
 	let firstNav = true;
 	let navDoneTimer: ReturnType<typeof setTimeout> | null = null;
@@ -73,7 +79,11 @@
 
 		const isFirst = firstNav;
 		firstNav = false;
-		if (isFirst) return; // Initial hydration — data already in SSR props, no fetch needed
+		if (isFirst) {
+			currentLayoutPaths = (match.route as any).layoutPaths ?? [];
+			lastSettledPath = pathname;
+			return; // Initial hydration — data already in SSR props, no fetch needed
+		}
 
 		appState.form = null;
 		if (navDoneTimer) {
@@ -83,6 +93,28 @@
 		navDone = false;
 		navigating = true;
 
+		// ─── +loading.svelte skeleton ─────────────────────────────────────
+		// On a real path change, show the destination's loading skeleton nested
+		// inside the layouts shared with the current page. The destination's own
+		// added layouts aren't mounted yet, so the skeleton draws that chrome.
+		const destLayoutPaths = ((match.route as any).layoutPaths as string[]) ?? [];
+		const loadingImport = (match.route as any).loading as (() => Promise<any>) | null;
+		if (loadingImport && pathname !== lastSettledPath) {
+			let s = 0;
+			while (
+				s < currentLayoutPaths.length &&
+				s < destLayoutPaths.length &&
+				currentLayoutPaths[s] === destLayoutPaths[s]
+			)
+				s++;
+			loadingImport().then((m) => {
+				if (cancelled) return; // superseded nav
+				loadingDepth = s;
+				LoadingComponent = m.default;
+				showLoading = true;
+			});
+		}
+
 		// ─── Loader cache: decide which loaders need to re-run ─────────────
 		// For each layout depth + the page, compare the cached entry (if any)
 		// against the live URL/params and the dirty set. If everything is
@@ -163,6 +195,13 @@
 			if (cancelled) return;
 			navigating = false;
 			navDone = true;
+			// Tear down the loading skeleton and record identity for the next nav.
+			// Superseded navs have cancelled === true and never reach here, so they
+			// can't clobber a newer nav's loader.
+			showLoading = false;
+			LoadingComponent = null;
+			currentLayoutPaths = destLayoutPaths;
+			lastSettledPath = pathname;
 			navDoneTimer = setTimeout(() => {
 				navDone = false;
 			}, 400);
@@ -348,7 +387,9 @@
 	<div class="bosia-bar done"></div>
 {/if}
 
-{#if ErrorComponent}
+{#if showLoading && LoadingComponent}
+	{@render renderLoading(0)}
+{:else if ErrorComponent}
 	{@const depth = errorDepth ?? 0}
 	{#if depth > 0 && layoutComponents.length > 0}
 		{@render renderLayout(0, depth)}
@@ -363,6 +404,18 @@
 	<p>Loading...</p>
 {/if}
 
+{#snippet renderLoading(index: number)}
+	{#if index < loadingDepth}
+		{@const Layout = layoutComponents[index]}
+		{@const data = layoutData[index] ?? {}}
+		<Layout {data} {params}>
+			{@render renderLoading(index + 1)}
+		</Layout>
+	{:else}
+		<LoadingComponent />
+	{/if}
+{/snippet}
+
 {#snippet renderLayout(index: number, leafDepth: number)}
 	{@const Layout = layoutComponents[index]}
 	{@const data = layoutData[index] ?? {}}

package/src/core/routeFile.ts

@@ -45,6 +45,8 @@ export function generateRoutesFile(manifest: RouteManifest): void {
 	// (re-run). One id per layout in order, plus an optional page id.
 	lines.push("  pageId: string | null;");
 	lines.push("  layoutIds: (string | null)[];");
+	lines.push("  loading: (() => Promise<any>) | null;");
+	lines.push("  layoutPaths: string[];");
 	lines.push("}> = [");
 	for (const r of pages) {
 		const layoutImports = r.layouts
@@ -75,6 +77,10 @@ export function generateRoutesFile(manifest: RouteManifest): void {
 		lines.push(`    trailingSlash: ${JSON.stringify(r.trailingSlash)},`);
 		lines.push(`    pageId: ${pageId},`);
 		lines.push(`    layoutIds: [${layoutIds}],`);
+		lines.push(
+			`    loading: ${r.loading ? `() => import(${JSON.stringify(toImportPath(r.loading))})` : "null"},`,
+		);
+		lines.push(`    layoutPaths: ${JSON.stringify(r.layouts)},`);
 		lines.push("  },");
 	}
 	lines.push("];\n");
@@ -175,6 +181,8 @@ function generateClientRoutesFile(
 	lines.push('  trailingSlash: "never" | "always" | "ignore";');
 	lines.push("  pageId: string | null;");
 	lines.push("  layoutIds: (string | null)[];");
+	lines.push("  loading: (() => Promise<any>) | null;");
+	lines.push("  layoutPaths: string[];");
 	lines.push("}> = [");
 	for (const r of pages) {
 		const layoutImports = r.layouts
@@ -202,6 +210,10 @@ function generateClientRoutesFile(
 		lines.push(`    trailingSlash: ${JSON.stringify(r.trailingSlash)},`);
 		lines.push(`    pageId: ${pageId},`);
 		lines.push(`    layoutIds: [${layoutIds}],`);
+		lines.push(
+			`    loading: ${r.loading ? `() => import(${JSON.stringify(toImportPath(r.loading))})` : "null"},`,
+		);
+		lines.push(`    layoutPaths: ${JSON.stringify(r.layouts)},`);
 		lines.push("  },");
 	}
 	lines.push("];\n");

package/src/core/scanner.ts

@@ -8,6 +8,7 @@ import type { PageRoute, ApiRoute, RouteManifest, TrailingSlash } from "./types.
 // Conventions (SvelteKit-compatible):
 //   +page.svelte         — page component
 //   +page.server.ts      — server loader for the page
+//   +loading.svelte      — client skeleton shown during navigation
 //   +layout.svelte       — layout component (wraps all children)
 //   +layout.server.ts    — server loader for the layout
 //   +server.ts           — API route (GET, POST, etc.)
@@ -93,6 +94,10 @@ export function scanRoutes(): RouteManifest {
 				? join(dir, "+page.server.ts")
 				: null;
 
+			const loadingFile = items.some((i) => i.isFile() && i.name === "+loading.svelte")
+				? join(dir, "+loading.svelte")
+				: null;
+
 			const pageTs = pageServerFile ? readTrailingSlash(join(ROUTES_DIR, pageServerFile)) : null;
 			const effectiveTs: TrailingSlash = pageTs ?? currentTrailingSlash;
 
@@ -101,6 +106,7 @@ export function scanRoutes(): RouteManifest {
 				page: join(dir, "+page.svelte"),
 				layouts: [...currentLayouts],
 				pageServer: pageServerFile,
+				loading: loadingFile,
 				layoutServers: [...currentLayoutServers],
 				errorPages: [...currentErrorPages],
 				trailingSlash: effectiveTs,

package/src/core/server.ts

@@ -1003,6 +1003,7 @@ function loadBuiltManifest(): RouteManifest {
 			page: "",
 			layouts: [],
 			pageServer: r.pageServer ? "" : null,
+			loading: null,
 			layoutServers: [],
 			errorPages: [],
 			trailingSlash: r.trailingSlash,

package/src/core/types.ts

@@ -13,6 +13,8 @@ export interface PageRoute {
 	layouts: string[];
 	/** Path to +page.server.ts if exists, relative to src/routes/ */
 	pageServer: string | null;
+	/** Path to +loading.svelte if exists, relative to src/routes/ (client skeleton). */
+	loading: string | null;
 	/** Chain of +layout.server.ts files root → leaf, with their layout depth */
 	layoutServers: { path: string; depth: number }[];
 	/**