A component that shows its content only after a delay.
Sometimes content, like a loading indicator, may only be visible very briefly and result in a flickering experience. This component prevents that.
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'
<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>
svelkit
is open source software licensed as MIT.