@svelkit/delay

a delay component for svelte (part of svelkit)

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.

• Installation
• Usage
• License

Installation

npm install @svelkit/delay

And then import it:

// using es modules
import Delay from '@svelkit/delay'

// common.js
const Delay = require('@svelkit/delay')

Alternatively use UNPKG or jsDelivr packages.

Hotlinking from unpkg: (no build tool needed!)

import Delay from 'https://unpkg.com/@svelkit/delay?module'

Usage

<Delay>content</Delay>

Increasing the default delay of 200 ms:

<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.

<Delay show="{someKey}">content</Delay>

License

svelkit is open source software licensed as MIT.