@sheepdog/svelte

Asynchronous work made easy!

Simplify your code

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis laoreet tortor. Sed facilisis diam a nibh blandit, ut tempor turpis pretium. Morbi sed turpis eu nisi tincidunt imperdiet in id quam. Maecenas vitae iaculis est, in feugiat enim. Etiam sagittis porta magna, et consequat est ultricies in.

<script>
	import { task, timeout } from '@sheepdog/svelte';

	let searchTask = task.restart(async function(value) {
		await timeout(500);
		let response = await fetch('/my-favourite-sheep?search=' + value);
		return await response.json();
	});
</script>

<label for="search">Search</label>
<input
	name="search"
	type="text"
	on:input={(event) => searchTask.perform(event.target.value)}
/>

{#if $searchTask.isRunning}
	Loading...
{:else if $searchTask.lastSuccessful?.value.length}
	<ul>
		{#each $searchTask.lastSuccesful.value as name}
			<li>{name}</li>
		{/each}
	</ul>
{:else}
	No sheep found
{/if}

<script>
	let _currentValue;
	let timeout;
	let search = (value) => {
		if (timeout) {
			clearTimeout(timeout);
		}

		let _timeout = setTimeout(async () => {
			let response = await fetch('/my-favourite-sheep?search=' + value);
			let results = await response.json();
			// only set results if this is the last started search
			if (timeout === _timeout) {
				currentValue = results;
				timeout = undefined;
			}
		}, 500);
		timeout = _timeout;
	};

	$: isRunning = Boolean(timeout);
	$: currentValue = _currentValue;
</script>

<label for="search">Search</label>
<input
	name="search"
	type="text"
	on:input={(event) => search(event.target.value)}
/>

{#if timeout}
	Loading...
{:else if currentValue?.length}
	<ul>
		{#each currentValue as name}
			<li>{name}</li>
		{/each}
	</ul>
{:else}
	No sheep found
{/if}

Demo

Search State: idle

Autumn
Buttercup
Chloe
Dolly
Emma
Freddie

Task modifiers

Specify what your task should do if there's another instance already running.

You can click an individual task instance to cancel it