sveltejs / sapper

The next small thing in web development, powered by Svelte
https://sapper.svelte.dev
MIT License
7k stars 434 forks source link

$preloading stuck to true when using 3 level deep in slots #1746

Open mirvaris opened 3 years ago

mirvaris commented 3 years ago

Describe the bug When you use $preloading in template and:

  1. You put it inside of a component that uses slot and that component uses a component that uses slot and that component uses a slot. So {$preloading} end up in 3 level of slots.
  2. You use exported property along with {$preloading} inside of component.
  3. Navigate to same route but with different parameters just to trigger preload.

$preloading value in the template turns to true once preload is started but doesn't return back to false once preload is finished.

To Reproduce Here is a minimal Sapper project to recreate the problem: https://github.com/mirvaris/SapperPreloadingSlots

  1. Run with npm run dev
  2. Go to home page at localhost:3000
  3. Click the link "Home with query params"

You should see that all the preloading values remain false (or quickly turn to true and then false) but the one in Deep3 component that uses exported props turn to true and stays like that.

Deep1.svelte
<div><slot></slot></div>
Deep2.svelte
<Deep1><slot></slot></Deep1>
Deep3.svelte
<Deep2><slot></slot></Deep2>
index.svelte
...
<Deep2>
  {$preloading}    <!-- This works -->
  {exportedProp}
</Deep2>

<Deep3>
  {$preloading}    <!-- This doesn't. It first shows false, upon navigation turns to true and stays true-->
  {exportedProp}
</Deep3>

<Deep3>
  {$preloading}    <!-- This also works-->
</Deep3>

Expected behavior

All {$preloading} expressions in the template should return to false once preload function is finished.

Severity As a workaround you can assign $preloading value to a variable after a tick() so it's not too severe.