Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: React Node Views are not rendered on the initial render, causing layout shift #5166

Open
1 task done
Nantris opened this issue May 19, 2024 · 2 comments
Open
1 task done
Labels
Category: Open Source The issue or pull reuqest is related to the open source packages of Tiptap. Type: Bug The issue or pullrequest is related to a bug

Comments

@Nantris
Copy link
Contributor

Nantris commented May 19, 2024

Affected Packages

@tiptap/react

Version(s)

2.1.x (also 2.4.x)

Bug Description

Upon the initial load the node view will not be rendered if it's a React node view. This causes a substantial and jarring layout shift

Browser Used

Chrome

Code Example URL

No response

Expected Behavior

There should be no delay rendering node views of any type.

Additional Context

This is a very significant polish problem - the first impression is that the editor we spent a lot of time upgrading is worse than the old one due to this issue. First impressions matter.

Dependency Updates

  • Yes, I've updated all my dependencies.
@Nantris Nantris added Category: Open Source The issue or pull reuqest is related to the open source packages of Tiptap. Type: Bug The issue or pullrequest is related to a bug labels May 19, 2024
@Nantris
Copy link
Contributor Author

Nantris commented May 19, 2024

This could be worked around easily (by the maintainers, not end-developers) by providing an option to only render once things are truly ready to display.

@nperez0111
Copy link
Contributor

I have some thoughts on how to improve this without resorting to flushSync, but need the time to implement it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Category: Open Source The issue or pull reuqest is related to the open source packages of Tiptap. Type: Bug The issue or pullrequest is related to a bug
Projects
Status: Triage open
Development

No branches or pull requests

2 participants