Skip to content

Adding blocks to a collection do not always render correctly while Live Preview is open #12281

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

Open
tschwartz opened this issue Apr 30, 2025 · 4 comments
Labels
status: cant-reproduce If an issue cannot be reproduced

Comments

@tschwartz
Copy link

tschwartz commented Apr 30, 2025

Describe the Bug

Adding blocks to a collection do not always render correctly while Live Preview is open, sometimes the loading animation just cycles forever unless the user toggles back to Edit and then back to Live Preview.

Link to the code that reproduces this issue

https://github.com/tschwartz/payload-cms-repro

Reproduction Steps

Expected

  • Run npm install
  • Run npm run dev
  • Navigate to http://localhost:3000/admin
  • Create the default user
  • Navigate to the Pages collection
  • Create a new page
  • Give the page a slug ('home' will work with the root route)
  • Click the Live Preview tab/button
  • Add a Rich Text content block
  • Observe that the Rich Text content renders a form element
  • Enter some content, or don't
  • Add another Rich Text content block
  • Observe that the Rich Text content renders a form element

Observed

  • Run npm install
  • Run npm run dev
  • Navigate to http://localhost:3000/admin
  • Create the default user
  • Navigate to the Pages collection
  • Create a new page
  • Give the page a slug ('home' will work with the root route)
  • Click the Live Preview tab/button
  • Add a Rich Text content block
  • Observe that the Rich Text content renders a form element
  • Enter some content or don't
  • Add another Rich Text content block
  • Observe that the Rich Text content loading animation does not stop and reveal a form element

Note, this is not specific to the Rich Text block but all content block types.

Image

Which area(s) are affected? (Select all that apply)

Not sure

Environment Info

Binaries:
  Node: 20.18.1
  npm: 11.3.0
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  payload: 3.35.1
  next: 15.2.4
  @payloadcms/graphql: 3.35.1
  @payloadcms/live-preview: 3.35.1
  @payloadcms/live-preview-react: 3.35.1
  @payloadcms/next/utilities: 3.35.1
  @payloadcms/richtext-lexical: 3.35.1
  @payloadcms/translations: 3.35.1
  @payloadcms/ui/shared: 3.35.1
  react: 19.0.0
  react-dom: 19.0.0
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.4.0: Fri Apr 11 18:33:39 PDT 2025; root:xnu-11417.101.15~117/RELEASE_ARM64_T6020
  Available memory (MB): 65536
  Available CPU cores: 12
@tschwartz tschwartz added status: needs-triage Possible bug which hasn't been reproduced yet validate-reproduction Auto-added tag on create to tell bot to check recreation URL, removed after check. labels Apr 30, 2025
Copy link
Contributor

Please add a reproduction in order for us to be able to investigate.

Depending on the quality of reproduction steps, this issue may be closed if no reproduction is provided.

Why was this issue marked with the invalid-reproduction label?

To be able to investigate, we need access to a reproduction to identify what triggered the issue. We prefer a link to a public GitHub repository created with create-payload-app@latest -t blank or a forked/branched version of this repository with tests added (more info in the reproduction-guide).

To make sure the issue is resolved as quickly as possible, please make sure that the reproduction is as minimal as possible. This means that you should remove unnecessary code, files, and dependencies that do not contribute to the issue. Ensure your reproduction does not depend on secrets, 3rd party registries, private dependencies, or any other data that cannot be made public. Avoid a reproduction including a whole monorepo (unless relevant to the issue). The easier it is to reproduce the issue, the quicker we can help.

Please test your reproduction against the latest version of Payload to make sure your issue has not already been fixed.

I added a link, why was it still marked?

Ensure the link is pointing to a codebase that is accessible (e.g. not a private repository). "example.com", "n/a", "will add later", etc. are not acceptable links -- we need to see a public codebase. See the above section for accepted links.

Useful Resources

@github-actions github-actions bot removed the validate-reproduction Auto-added tag on create to tell bot to check recreation URL, removed after check. label Apr 30, 2025
@DanRibbens
Copy link
Contributor

@tschwartz thank you for providing access to the repo.

I was able to observe the error once but then it wasn't occuring again. How often are you able to reproduce it?
I'm not sure how to prioritize this one without consistent reproduction or an example of the error if there is one.

Let us know!

@DanRibbens DanRibbens added status: cant-reproduce If an issue cannot be reproduced and removed status: needs-triage Possible bug which hasn't been reproduced yet labels May 1, 2025
@tschwartz
Copy link
Author

Hello @DanRibbens I am able to reproduce the issue every time using the repro steps provided above. The issue typically will not present itself on the first content block added but rather on every instance thereafter.

@tschwartz
Copy link
Author

@DanRibbens I have pushed up a minimal repro, removing everything but the pages collection, all extraneous dependencies, etc and am still able to reproduce the issue using the steps above. That said, I am not able to reproduce this with the Payload website template...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status: cant-reproduce If an issue cannot be reproduced
Projects
None yet
Development

No branches or pull requests

2 participants