search

the-pudding / sleep-training

MIT License
2 stars 2 forks source link

Timeline component pre-rendering #7

Closed tomvaillant closed 4 months ago

tomvaillant commented 4 months ago

For some reason the Timeline component, used on line 222 in Index.svelte (loaded in the Section.svelte component) is flickering before it scrolls into viewport. I've set it up the same as Bubbles and Map which don't have this issue.

matthewfdaniels commented 4 months ago

add $: console.log(step) to Section and you'll see why it's flickering. the browser sees step constantly changing between undefined and 0. Since Timeline requires a step of 0 it's appearing and disappearing as step goes back and forth.

step is undefined until you enter the sticky section, and once you enter the sticky section, it starts at 0

easiest fix here is to add this, which will render the timeline, even when step is undefined (!step)

image
tomvaillant commented 4 months ago

Solved! Thank you :)