TableOfContents title flickering while notebook is loading

[fonsp]

Schermopname.2024-02-06.om.14.57.54.mov

Will be fixed s00n by @Beramos

[Beramos]

I dove into this issue, I was not yet able to implement a fix but I'm documenting progress here.

The origin of the problem is

PlutoUI.jl/src/TableOfContents.jl

Line 138 in 1798c47

currently_highlighted_set.forEach(a => a.classList.remove("in-view"))

The in-view-class is removed on every intersection_callback. During scrolling, the InteractionObserver executes this callback ->

PlutoUI.jl/src/TableOfContents.jl

Lines 167 to 178 in 1798c47

	let intersection_observer_1 = new IntersectionObserver(intersection_callback, {
	root: null, // i.e. the viewport
	threshold: 1,
	rootMargin: "-15px", // slightly smaller than the viewport
	// delay: 100,
	})
	let intersection_observer_2 = new IntersectionObserver(intersection_callback, {
	root: null, // i.e. the viewport
	threshold: 1,
	rootMargin: "15px", // slightly larger than the viewport
	// delay: 100,
	})

which works fine since every callback seems to result in change of the <a>-tag that receives the in-view-class.

Now the problem arises when the intersection_callback is called from UpdateCallback

PlutoUI.jl/src/TableOfContents.jl

Lines 239 to 245 in 1798c47

	const updateCallback = () => {
	if (!invalidated.current) {
	tocNode.querySelector("section").replaceWith(
	html`<section>\${render(getHeaders())}</section>`
	)
	}
	}

) (which happens quite often). Because the highlight is always removed during an intersection_callback this results in the flickering effect.

I'll try to think about an elegant solution (suggestions are welcome) if I have some time tomorrow.

[fonsp]

Perhaps you can use this to persist some data inbetween the renders? Check out the "Stateful output with this" in https://featured.plutojl.org/web/javascript