$effect.pending flaky behaviour

[dylan1951]

Describe the bug

Sometimes $effect.pending() doesn't work, I don't know the exact conditions but check out the repro below for an example.

Reproduction

REPL

<script>
	let value = $state(0);

	async function delayed(v) {
		await new Promise(r => setTimeout(r, 1000));
		return v;
	}
	
	let slowSquare = $derived(await delayed(value ** 2));
</script>

<button onclick={() => value++}>Increment</button>

{#if $effect.pending()}
	<p>Performing intensive mathematical calculations...</p>
{:else if value >= -1}
	<p>{value} ^ 2 = {slowSquare}</p>
{/if}

Logs

System Info

svelte playground

Severity

blocking an upgrade

[dylan1951]

Maybe that one makes sense because the evaluation of the #if statement itself is syncronised?

But what about this one then: REPL

I can't see any reason why the loading state shouldn't be working here.

If the rule was "all UI updates that effect the state are synchronised" that would make sense, however that is clearly not the case because if you remove the inner {#if delayedFruit} it will immediately update the UI to show the loading state.

I'm not sure if there is a bug here but can we please get some clarification of how this works.