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>
preload
function.
Pass any additional props and <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