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

``bash
npm i svelte-viewpoint --save-dev
`

`bash
yarn add svelte-viewpoint
`

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

`html



`

Usage

`html



`

$3

`html



Wait for a few seconds, please...


`

$3

`html



`

Define preload in UserProfile.svelte:

`html


`

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