Super tiny, loadable component for SvelteJS with blackjack and data preloading.

Features

• Static & dynamic components.
• loading placeholder component with delay.
• waiting placeholder component after timeout.
• error component.
• Proxes any additional props to target component.
• Preloads target component data using Sapper-like preload function in context of module.

Install

npm i svelte-viewpoint --save-dev

yarn add svelte-viewpoint

CDN: UNPKG | jsDelivr (available as window.Viewpoint)

<script src="https://unpkg.com/svelte-viewpoint/dist/viewpoint.min.js"></script>

<!-- OR in modern browsers -->

<script type="module" src="https://unpkg.com/svelte-viewpoint/dist/viewpoint.min.mjs"></script>

Usage

<Viewpoint {component} />

<script>
	import Viewpoint from 'svelte-viewpoint';

	const component = () => import('./Component.svelte');
</script>

Using loading, waiting & error components.

<Viewpoint {component} timeout={3000} delay={500}>
	<div slot="loading">
		<Spinner />
	</div>
	<div slot="waiting">
		Wait for a few seconds, please...
	</div>
	<div slot="error" let:error>
		<Error {error} />
	</div>
</Viewpoint>

<script>
	import Viewpoint from 'svelte-viewpoint';

	import Error from './Error.svelte';
	import Spinner from './Spinner.svelte';

	const component = () => import('./Component.svelte');
</script>

Pass any additional props and preload function.

<Viewpoint {component} {user} />

<script>
	import Viewpoint from 'svelte-viewpoint';

	const component = () => import('./UserProfile.svelte');

	let user = { firstname: 'John', lastname: 'Doe' };
</script>

Define preload in UserProfile.svelte:

<script context="module">
	export async function preload({ user }) {
		const res = await fetch(`/user/${user.id}/messages`);
		const messages = res.json();
		return { messages };
	}
</script>

API

Props

| Name | Type | Description | Required | Default | | --- | --- | --- | --- | --- | | component | Function | Returns target component. | No | null | | delay | Number | Delay in ms before the loading component is shown. | No | 200 | | timeout | Number | Timeout in ms before the waiting component is shown. If not defined or 0 waiting component won't be shown. | No | 0 | | abort | Number | Timeout in ms before target component loading will be aborted. If not defined or 0 loading won't be aborted until the error. | No | 0 | | preloading | Boolean | Activates data preloading. | No | true |

Slots

• waiting — elements to be placed on waiting
• loading — elements to be placed on loading
• error — elements to be placed on error

License

MIT © PaulMaly