<script lang="ts"> 
  let length = $state(10)
  
  async function generateArray(length: number) {
    const result = new Promise(resolve => setTimeout(() => resolve([...Array(length).keys()]), 500))
    return result;
  }
	
  let testValues = $derived(await generateArray(length))
	$inspect('$effect.pending()', $effect.pending());
</script>

<div>
	<p>Value of length: {length}</p>

	<div>
		<button onclick={() => {console.log('clicked'); length--;}}>-</button>
		<button onclick={() => {console.log('clicked'); length++;}}>+</button>
	</div>
	<p>
		Clicking any of buttons will cause $effect.pending() to become 0 after the promise resolves.
	</p>
	<p>
		Value of $effect.pending(): {$effect.pending()}
	</p>
	
	{#if $effect.pending()}
		<p><strong>Imagine this is a loading indicator that should only be visible while updating data, but it doesn't go away on its own...</strong></p>
	{/if}
		
	<div>
		<span>Values:</span>
		<div style="display: flex; gap: 10px;">
			{#each testValues as value (value)}
				<p>{value}</p>
			{/each}
		</div>
	</div>
</div>