<script>
/*
Demonstration of useTransition.
Type in a valid pokemon number and push update. The screen will immediately
jump to loading and then show you a new pokemon. If you push "Use Transition"
instead, Svelte will preserve the existing screen until the new data is loaded,
without flashing through "Loading...".
*/
import { Suspense } from '@svelte-drama/suspense'
import Pokemon from './Pokemon.svelte'
import Switch from './Switch.svelte'
let controller
let value = 133
let id = value
let onLoad = () => {}
function update () {
id = value
}
function transition () {
controller.useTransition(async () => {
id = value
await new Promise(resolve => {
onLoad = resolve
})
})
}
</script>
<div>
<p>
<input type="number" bind:value min="1" step="1" /><br />
<button on:click={ update }>Update</button>