How to handle flicker on mount

[kylesuss]

What’s the bug you are facing?

Hi! We are working to integrate TipTap into our app & are pretty early in the process. Thanks for the hard work on the lib.

When first rendering the editor, we notice that there is a period of time where nothing is rendered. Taking the CodeSandbox (also linked below), I can toggle the editor & see that when the editor is meant to be shown, the first render cycle is empty.

Is this expected? Can it be fixed?

Before toggle

After toggle

Editor now visible ("test")

How can we reproduce the bug on our side?

I was using the Chrome devtools Performance tab to record the behavior and capture screenshots.

Can you provide a CodeSandbox?

https://codesandbox.io/s/brave-thunder-7h41n?file=/src/App.js

What did you expect to happen?

I would expect there to be a way to avoid this flicker situation & have the editor visible on mount, but perhaps I am missing something in my setup?

Anything to add? (optional)

I am using the React lib & useEditor.

Did you update your dependencies?

• Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• Yes, I’m a sponsor. 💖

[Miloshinjo]

Having the same issue in React with useEditor. Editor shows empty before showing text, causing the screen flicker.

[philippkuehn]

I had to revert the last change. If you want to prevent that flicker you can use a custom useEditor hook.

[ospfranco]

I'm seeing crazy amounts of flicker in my next.js app, even though I used the custom useEditor hook, any idea who to mitigate this issue? it happens every time I change any of the props

[ospfranco]

just realized it not only flickers but actually completely resets itself, when I type the cursor moves back to the first position

[hanspagel]

I can’t read the code on the screenshot, so without that it’s hard to say. :)

[ospfranco]

Trying to debug several issues right now, my entire code is here:

#2403

whenever adding a dependency to the useEditor hook the entire instance is destroyed which is not what I want

[Miloshinjo]

Has anyone found at least a workaround for this issue?

[ospfranco]

Only load the instance once, then you have to use internal methods to reset the content and any handlers you have passed, here you can see some code on how to reset the handlers:

#2403

For the content there are other calls like editor.commands.setContent

That is the only way you will avoid flickers, trying to change them via the hook results in the internal editor instance being completely destroyed and re-mounted, so no way to use that without having flickers

[Miloshinjo]

Only load the instance once, then you have to use internal methods to reset the content and any handlers you have passed, here you can see some code on how to reset the handlers:

#2403

For the content there are other calls like editor.commands.setContent

That is the only way you will avoid flickers, trying to change them via the hook results in the internal editor instance being completely destroyed and re-mounted, so no way to use that without having flickers

How do you load the instance only once? p.s. Sorry if this is common knowledge, I'm new to this lib :)

[Miloshinjo]

Just want to say that I used a custom hook that Phillip suggested and UI flicker is gone now. Edited it a bit to suit my case, but essentially it worked.

Thanks!

[rfgamaral]

Just want to say that I used a custom hook that Phillip suggested and UI flicker is gone now. Edited it a bit to suit my case, but essentially it worked.

@Miloshinjo Would you mind sharing your edited version and explain your changes? Maybe it can be useful to others :)

[Miloshinjo]

Just want to say that I used a custom hook that Phillip suggested and UI flicker is gone now. Edited it a bit to suit my case, but essentially it worked.

@Miloshinjo Would you mind sharing your edited version and explain your changes? Maybe it can be useful to others :)

hello, it's this gist https://gist.github.com/ryanto/4a431d822a98770c4ca7905d9b7b07da, but I just removed 2 calls to requestsAnimationFrame and in my case, flickers were gone.

Also the option I'm using on the editor is editable: false , not sure if it matters, but I wanted to give u the full picture.

[rfgamaral]

@Miloshinjo Thank you 👍

[benkingcode]

This is driving me crazy, is there really no fix coming for this? I have a very simple use case, an editor with the Collaboration extension, and I cannot switch documents without a jarring flicker.

[Nantris]

This issue seemingly should not be closed.