Skip to content

RelationshipTable: join table with an async server Cell blanks the whole admin when cacheComponents is enabled #19268

Open

Description

@isaac-openmic

Describe the Bug

With cacheComponents: true, opening a document whose join field shows a column with an async server Cell hides the entire admin, not just the table, until every cell has loaded.

RelationshipTable awaits getTableState and applies the result with plain state setters, outside a transition (index.tsx#L157, #L172-L175). getTableState resolves while the returned Table is still streaming, so rendering it suspends. With cacheComponents on, withPayload sets PAYLOAD_CACHE_COMPONENTS_ENABLED (withPayload.js#L40) and the root layout wraps the admin in <Suspense fallback={null}> (Root/index.tsx#L52-L53), so the suspension reaches that boundary and the page goes blank.

Expected: "Loading…" stays until the table has arrived, as it does with cacheComponents: false.

Applying the result in a transition fixes it (verified on the reproduction: "Loading…" stays until the whole table is in, and the page never blanks):

-import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'
+import React, { Fragment, startTransition, useCallback, useEffect, useRef, useState } from 'react'
@@
-      setData(newData)
-      setTable(NewTable)
-      setColumnState(newColumnState)
-      setIsLoadingTable(false)
+      startTransition(() => {
+        setData(newData)
+        setTable(NewTable)
+        setColumnState(newColumnState)
+        setIsLoadingTable(false)
+      })

The same code is unchanged on 3.x and main. 4.0.0-beta.6 doesn't show the symptom because its root layout no longer wraps the admin in Suspense, but the cause in RelationshipTable remains.

Link to the code that reproduces this issue

https://github.com/isaac-openmic/upstream-repros/tree/main/payload-19268

Reproduction Steps

  1. npm install && npm run build && npm start
  2. Log in at http://localhost:3000/admin as dev@example.com / test (seeded on first start).
  3. Open Teams → Team. The Members table shows "Loading…", then the whole admin goes blank for ~1.5 s (the Cell's timer), then the full table appears.

Which area(s) are affected?

area: ui

Environment Info

payload: 3.92.1
@payloadcms/next, @payloadcms/ui, @payloadcms/db-sqlite: 3.92.1
next: 16.3.3 (production build, cacheComponents: true)
react / react-dom: 19.2.6
node: 24.22.2

Activity

  1. lord-0011 commented on Nov 2, 2026

    @lord-0011

    Hi! I'd like to open a PR for this. I'll reproduce it with your repro, apply the startTransition change you verified to RelationshipTable, and credit your diagnosis in the PR. Should I target main and open a separate backport to 3.x, or just one of them? I'll also check whether a test in test/joins can cover it.

  2. isaac-openmic commented on Nov 2, 2026

    @isaac-openmic
    Author

    4. Hi! I'd like to open a PR for this. I'll reproduce it with your repro, apply the startTransition change you verified to RelationshipTable, and credit your diagnosis in the PR. Should I target main and open a separate backport to 3.x, or just one of them? I'll also check whether a test in test/joins can cover it.

    Thanks for offering! I've already opened #19272 with the fix against 3.x. Happy to adjust it or add a backport to main if the maintainers prefer.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Bugarea: uiRelated to the admin panel.

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions