add lazy component loading helper

src/lib/index.ts

@@ -50,3 +50,4 @@ export {
 	getNavigationManager,
 	type NavigationItemOpts
 } from './navigation.svelte';
+export { createLazyComponent, type LazyComponentProps } from './lazy.svelte';

src/lib/lazy.svelte.ts

@@ -0,0 +1,43 @@
+import type { Component, ComponentProps } from 'svelte';
+
+/**
+ * Create a lazy-loaded Svelte component.
+ * Example:
+ * const LazyComponent = createLazyComponent(() => import('./MyComponent.svelte'));
+ * @param importFn - Function that returns a promise resolving to the component module.
+ * @returns An object containing the lazy-loaded component, loading state, error state, and a load function.
+ */
+export function createLazyComponent<T extends Component>(importFn: () => Promise<{ default: T }>) {
+	let component = $state<T | null>(null);
+	let loading = $state(true);
+	let error = $state<Error | null>(null);
+
+	const load = async () => {
+		try {
+			const module = await importFn();
+			component = module.default;
+			loading = false;
+		} catch (e) {
+			error = e as Error;
+			loading = false;
+		}
+	};
+
+	return {
+		get component() {
+			return component;
+		},
+		get loading() {
+			return loading;
+		},
+		get error() {
+			return error;
+		},
+		load
+	};
+}
+
+/**
+ * Props for a lazy-loaded Svelte component.
+ */
+export type LazyComponentProps<T extends Component> = ComponentProps<T>;

src/routes/+page.svelte

@@ -9,13 +9,11 @@
 	import FramelessButton from '$lib/FramelessButton.svelte';
 	import InputGroup from '$lib/InputGroup.svelte';
 	import Link from '$lib/Link.svelte';
-	import PhoneInput from '$lib/PhoneInput.svelte';
 	import PinInput from '$lib/PinInput.svelte';
 	import RadioGroup from '$lib/RadioGroup.svelte';
 	import StyledRawInput from '$lib/StyledRawInput.svelte';
 	import TextInput from '$lib/TextInput.svelte';
 	import TimeInput, { formatTime } from '$lib/TimeInput.svelte';
-	import TimezoneInput from '$lib/TimezoneInput.svelte';
 	import ToggleGroup from '$lib/ToggleGroup.svelte';
 	import ToggleSelect from '$lib/ToggleSelect.svelte';
 	import { Toolbar } from '$lib/Toolbar';
@@ -29,9 +27,21 @@
 		TextStrikethrough,
 		TextUnderline
 	} from 'phosphor-svelte';
-	import { ErrorMessage, type ComboboxOption, type Option } from '$lib';
+	import { createLazyComponent, type ComboboxOption, type Option } from '$lib';
 	import Tabs from '$lib/Tabs.svelte';
 	import { Time } from '@internationalized/date';
+	import { onMount, type Component } from 'svelte';
+	import ErrorBox from '$lib/ErrorBox.svelte';
+
+	// Lazy-load heavy components
+	let PhoneInput = createLazyComponent(() => import('$lib/PhoneInput.svelte'));
+	let TimezoneInput = createLazyComponent(() => import('$lib/TimezoneInput.svelte'));
+
+	// Load heavy components on mount
+	onMount(() => {
+		PhoneInput.load();
+		TimezoneInput.load();
+	});
 
 	const comboboxOptions = [
 		{ value: 'option1', label: 'Option 1' },
@@ -223,7 +233,13 @@
 
 <div class="component">
 	<p class="title">Phone Input</p>
-	<PhoneInput label="Phone Number" name="phone" defaultISO="CA" />
+	{#if PhoneInput.loading}
+		<div class="h-12 animate-pulse rounded bg-gray-200">Loading...</div>
+	{:else if PhoneInput.error}
+		<div class="text-red-500">Failed to load component</div>
+	{:else}
+		<PhoneInput.component label="Phone Number" name="phone" defaultISO="CA" />
+	{/if}
 </div>
 
 <div class="component">
@@ -282,7 +298,13 @@
 <div class="component">
 	<p class="title">TimezoneInput</p>
 
-	<TimezoneInput name="example-timezone" label="Pick your timezone" />
+	{#if TimezoneInput.loading}
+		<div class="h-12 animate-pulse rounded bg-gray-200">Loading...</div>
+	{:else if TimezoneInput.error}
+		<div class="text-red-500">Failed to load component</div>
+	{:else}
+		<TimezoneInput.component name="example-timezone" label="Pick your timezone" />
+	{/if}
 </div>
 
 <div class="component">