component with transition directive didn't update correctly when store updated

[kjj6198]

Describe the bug

When store get updated, I found component with transition directive won't update. It only happens when:

• store.update() inside Promise then() block, if I move store.update() call to outside, it works as expected.
• transition directive was added in component.

To Reproduce

demo

1. click tab2 button, text should be updated to Hello Tab2 (can check console for store detail)
2. click tab1 button again
3. click tab2 button again, it now updates.

work around

• go to Title.svelte, remove transition:fade, rerun it
• move store.update() outside of then(), rerun it.

Expected behavior
text should be updated.

Severity
small.

[kjj6198]

Not sure if it's helpful but I found if I change Promise.resolve() to new Promise(resolve => ...) it seems to work.

+$: $store[currentTab] !== 'LOADED' && new Promise(resolve => {...})
-$: $store[currentTab] !== 'LOADED' && Promise.resolve(...)

You can check repl here.

[markoboy]

Hello,

That's not exactly a resolution as you are setting a timeout in order to wait for the promise to resolve. The codes provided are slightly different, as the first snippet resolves immediately, but the second one has a timeout with 1s delay. If you set the delay to 0ms it would behave the same.

The issue is that you are updating the currentTab before the store has been updated, so when the if statment passes the condition, it will not update the children because the currentTab variable is not being reassinged.

A solution to that would be to either create a store that will store the currentTab as well as the loading. Or based on the current code with a small tweek if you add this reactive value:

$: current = $store[currentTab] === 'LOADED' && currentTab;

And update the template:

<Title title={`Hello ${current}`}>
	<caption slot="caption">{current}</caption>
</Title>

This would update the children because the current variable will be updated when the store is updated resulting in updating the view.

You can check the repl here.