allow flushsync to wait fro async ui

[zhihengGet]

Describe the problem

i want to scroll to bottom after async component is rendered, is there a way to do this ? i used flushSync after adding the async component the array but apparently flushSync is called before async component is rendered which caused scrollTop to scroll to near the end but not end. i can use mutationObserver but wondering if there's better way to 'wait'.

Describe the proposed solution

flushAllSync

Importance

nice to have

[dummdidumm]

Please provide a reproduction, I don't know what you're asking for.

[zhihengGet]

hope this can give an idea, repro

[zhihengGet]

basically, i want to scroll to bottom in an div as list renders async child

[leonidaz]

@zhihengGet is this what you're looking for?

updated example with tick() and completed list

• I added a list to track completed items, in case the height changes (it seems kind of long)
• added key to the #each loop, see https://svelte.dev/docs/svelte/each#Keyed-each-blocks
• tick() to schedule the scrollTop to be set once the items are rendered
• only set scrollTop if necessary, just for performance

[zhihengGet]

@leonidaz thanks, but it didnt work after i made height work, i had a flex ; play

[leonidaz]

@zhihengGet

oops sorry, i commented out the line for adding the completed list.

Also:

• for the effect needed to make sure that it runs if either change so the sum of lengths should do it. I replaced it with a $derived just to to be more declarative but it could've been inline.

So, here's the working copy: track a.length + b.length for effect

[zhihengGet]

thanks @leonidaz Leonidaz, watching for async component 's completion with runes will work i.e use rune to keep track if promise resolves @ dummdidumm if you don't think we need a method that 'wait' for all async child to finish then feel free to close.

[dummdidumm]

Using $effect and/or tick is the correct solution, therefore closing.