export const load = async ({ isDataRequest }) => {
	const slowPromise = getSlowData()
	return {
		slow: isDataRequest ? slowPromise : await slowPromise,
	}
}

const getSlowData = async () => {
	await delay(3000)
	return '😴'
}

const delay = (ms) => new Promise((res) => setTimeout(res, ms))

<script>
	let { data } = $props()
</script>

{#await data.slow}
	loading...
{:then result}
	{result}
{/await}

import { getRequestEvent } from '$app/server'

export const load = async () => {
	// Mock a network request
	const promise = getData()

	const result = await Promise.race([delay(200), promise])

	return {
		promise: result ?? promise,
	}
}

const delay = (ms) => new Promise((res) => setTimeout(res, ms))

const getData = async () => {
	const { url } = getRequestEvent()

	// for repeatable testing
	const ms = Number(url.searchParams.get('delay'))
	await delay(ms)

	// for realistic network delay
	// await delay(Math.random() < 0.5 ? 50 : 3000)

	return '😴'
}

<script>
	let { data } = $props()
</script>

<a href="/">reset</a>

<hr />

{#await data.promise}
	loading...
{:then result}
	{result}
{/await}