Skip to content
This repository has been archived by the owner on Jan 11, 2023. It is now read-only.

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

Open
mirvaris opened this issue Mar 12, 2021 · 0 comments
Open

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

mirvaris opened this issue Mar 12, 2021 · 0 comments

Comments

@mirvaris
Copy link

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.

# for free to subscribe to this conversation on GitHub. Already have an account? #.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant