Problems with Asynchronous Svelte

[h4ckedneko]

Description

Hello, first of all thank you for creating this wonderful UI library.

I have created an application shell component that serves as the main layout for the pages of my app instead of utilizing the +layout.svelte feature of SvelteKit because I want to pass stuffs from page to shell/layout like breadcrumbs, current app, and current tab, which you can easily do with that setup.

The problem occurs when my application shell uses the menu or popover component from ark. When navigating to a page the second time, the current page does not unmount and the new page gets appended to the bottom. This only happens when you use the experimental async mode in Svelte.

Link to Reproduction (or Detailed Explanation)

https://stackblitz.com/edit/xbpxoa3j?file=src%2Flib%2Fcomponents%2Fshell.svelte

Steps to Reproduce

1. Go to about page
2. Go back to home

Ark UI Version

5.10.1

Framework

• React
• Solid
• Vue
• Svelte

Browser

Google Chrome

Additional Information

No response

[Tihomir971]

I have similar problem with Tree View. i get error in browser console:
errors.js:238 Uncaught Svelte error: flush_sync_in_effect
Cannot use flushSync inside an effect
https://svelte.dev/e/flush_sync_in_effect
at flush_sync_in_effect (errors.js:238:17)
at flushSync (batch.js:485:5)
at flush (machine.svelte.js:257:5)
at setInitial (index.mjs:259:9)
at action (machine.svelte.js:109:13)
at index.mjs:111:7
at $effect (track.svelte.js:25:13)
at update_reaction (runtime.js:292:16)
at update_effect (runtime.js:472:18)
at flush_queued_effects (batch.js:607:4)

I'm using basic Examples from doc. With:
compilerOptions: {
experimental: {
async: true
}
}.
I know it's experimental but it very useful :)

[Tihomir971]

I don't have problems with zag just with ark components.
Uncaught Svelte error: effect_in_teardown
$effect cannot be used inside an effect cleanup function