Skip to content

Live Preview + Autosave race condition on large pages #12691

Open
@beease

Description

@beease

Describe the Bug

In production, when Live Preview is enabled with fast autosave and the document is large (≈ 30 KB+ body), the admin UI hangs:

  • Adding/duplicating a block → infinite spinner.
  • Conditional fields stop reacting (checkbox ⇄ field visibility).

In both situation a manual page refresh restores the UI.

Environment Setting Page size Result
Prod (vps) autosave.interval = 100 ms & live preview enabled 60ko Bug 100 % reproducible
Prod (vps) autosave.interval = 100 ms & live preview enabled 30ko Bug randomly 50 % reproducible
Prod (vps) autosave.interval = 500 ms & live preview enabled 60ko Bug disappears
Dev mode autosave.interval = 100 ms & live preview enabled 60ko Bug 5 % reproducible
Dev mode autosave.interval = 100 ms & live preview enabled & network throttling 60ko Bug 100 % reproducible

This strongly suggests a race condition between Live Preview autosave drafts and the admin form state for large payloads.

Enregistrement.de.l.ecran.2025-06-05.a.13.10.38.mov
Image

Link to the code that reproduces this issue

https://github.com/beease/payload-autosave-issue

Reproduction Steps

  1. Create a collection with the following:
  • autosave.interval = 100 ms
  • A checkbox field (e.g. showCta)
  • A conditional field (e.g. ctaTitle) that depends on the checkbox using admin.condition
  • A richText field
  1. Enable Live Preview for the collection.
  2. Go to the admin panel and create a new entry for this collection.
  3. Paste a large amount of content into the richText field (around 30 KB or more).
  4. Open Live Preview (the right-side preview iframe should appear).
  5. In Chrome DevTools, enable Network throttling (e.g. “Fast 3G”) to simulate slower response times.
  6. Toggle the checkbox — you’ll see the conditional field does not appear or disappear as expected.
  7. A manual page refresh will restore the correct state.

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

area: ui

Environment Info

Binaries:
  Node: 22.16.0
  npm: 10.9.2
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  payload: 3.40.0
  next: 15.3.3
  @payloadcms/db-mongodb: 3.40.0
  @payloadcms/db-postgres: 3.40.0
  @payloadcms/graphql: 3.40.0
  @payloadcms/live-preview: 3.40.0
  @payloadcms/live-preview-react: 3.40.0
  @payloadcms/next/utilities: 3.40.0
  @payloadcms/plugin-seo: 3.40.0
  @payloadcms/richtext-lexical: 3.40.0
  @payloadcms/translations: 3.40.0
  @payloadcms/ui/shared: 3.40.0
  react: 19.1.0
  react-dom: 19.1.0
Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Debian 6.1.129-1 (2025-03-06)
  Available memory (MB): 7953
  Available CPU cores: 2

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions