Infinite loop while rendering page

[ALJCepeda]

Describe the bug

Hello everyone!

This is is my first time reporting a bug to a major framework like Svelte so please show me some patience..

After playing around with it in the debugger and inspecting the components.. it seems like a second reactive context is created for the Conversation component but it fails to mount properly as it's stuck in this infinite rendering.. and so any updates to the store causes the other reactive context to spit off another update and the two contexts ping pong back and forth between each other causing an infinite loop in the rendering!

Why does this only happen if the resolution is above 768 px?

Reproduction

https://github.com/ALJCepeda/svelte-bug

• Start up project and go to http://localhost:5174/test/anotherone
• Notice the page freezes if your resolution is above 768 px

Logs

No response

System Info

System:
    OS: macOS 14.4.1
    CPU: (10) x64 Apple M1 Pro
    Memory: 17.38 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.15.1 - ~/.nodenv/versions/16.15.1/bin/node
    Yarn: 1.22.18 - /opt/homebrew/bin/yarn
    npm: 8.11.0 - ~/.nodenv/versions/16.15.1/bin/npm
  Browsers:
    Brave Browser: 103.1.41.96
    Chrome: 124.0.6367.62
    Safari: 17.4.1
  npmPackages:
    svelte: ^4.2.7 => 4.2.15

Severity

annoyance

[paoloricciuti]

Hi, can you create a much more minimal reproduction, possibly in the REPL ? The more minimal the reproduction is the more is possible that the bug is actually in svelte and not in application code (and the easier would be to find the root cause and fix it).

[svelte-kit-so-good]

@ALJCepeda gave it a shot (but you should make a StackBlitz/ SvelteLab demo)

In /test/[id]/+layout.svelte you forgot a '$':

- windowW >= screenSizes.sm}
+ $windowW >= screenSizes.sm}

... but I narrowed it down to an issue with <slot/> in this component, i.e. doing this temporarily won't freeze things:

{#if loggedIn && windowW}
	{#if $windowW >= screenSizes.sm}
		<!-- <DesktopLayout>
			<slot />
		</DesktopLayout> -->
		foo
	{:else}
		<!-- <slot /> -->
		bar
	{/if}
{:else}
	<Spinner size={150} />
{/if}

Update: given that <slot/> was an issue I narrowed it down further to FullScreenDrawer.svelte in the +page.svelte, specifically something's borked with the 'wrapper' class.