svelte-toolkit/sui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add lazy component loading helper

Browse Source
This commit is contained in:
Elijah Duffy
2025-09-01 17:19:32 -07:00
parent db4f149302
commit 31049fc343
3 changed files with 71 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/routes/+page.svelte
View File

@@ -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">