@svelkit/delay
Version:
> a delay component for [svelte] (part of [svelkit])
78 lines (50 loc) • 2.14 kB
Markdown
# @svelkit/delay
> a delay component for [svelte] (part of [svelkit])
[](https://github.com/kenoxa/@svelkit/delay/blob/main/LICENSE)
[](https://www.npmjs.com/package/@svelkit/delay)
[](https://changelogs.xyz/@svelkit/delay)
[](https://bundlephobia.com/result?p=@svelkit/delay)
## What?
A component that shows its content only after a delay.
## Why?
Sometimes content, like a loading indicator, may only be visible very briefly and result in a flickering experience. This component prevents that.
<!-- prettier-ignore-start -->
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
- [Installation](#installation)
- [Usage](#usage)
- [License](#license)
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
<!-- prettier-ignore-end -->
## Installation
```sh
npm install @svelkit/delay
```
And then import it:
```js
// using es modules
import Delay from '@svelkit/delay'
// common.js
const Delay = require('@svelkit/delay')
```
Alternatively use [UNPKG](https://unpkg.com/@svelkit/delay/) or [jsDelivr](https://cdn.jsdelivr.net/npm/@svelkit/delay/) packages.
Hotlinking from unpkg: _(no build tool needed!)_
```js
import Delay from 'https://unpkg.com/@svelkit/delay?module'
```
## Usage
```html
<Delay>content</Delay>
```
Increasing the default delay of `200` ms:
```html
<Delay ms="{500}">content</Delay>
```
The `show` property (default `true`) is used to determine if the content should be shown. Each change of its value cause the internal timer to reset, eg restarting the delay.
```html
<Delay show="{someKey}">content</Delay>
```
## License
`svelkit` is open source software [licensed as MIT](https://github.com/kenoxa/svelkit/blob/main/LICENSE).
[svelkit]: https://svelkit.js.org/
[svelte]: https://svelte.dev/