Skip to content

Switching back to a dialog tab containing a large data grid is slow — DataGridView re-measures every row on show #10143

Description

@VIBVEL47

Describe the bug

In SchemaView dialogs, each field group is rendered as a tab and inactive
tabs are kept mounted but hidden with display: none. A DataGridView
(collection grid) inside such a tab is always virtualized. The virtualizer's
measureElement runs a synchronous getBoundingClientRect() on every
rendered row through a fresh ref callback on each render.

While a tab is hidden, its scroll viewport measures 0, so the virtual window
collapses. When you switch back to that tab, the virtualizer's ResizeObserver
fires as the viewport goes from 0 to its real height, triggering a re-render
and a re-measure of every row — a forced-layout settle loop. On grids with
many rows of editable cell controls (react-select / switch / etc.), this
produces a visible lag and an apparent "reload" of the grid every time the
tab is shown again. At small row counts virtualization provides no benefit,
so this is pure overhead.

To Reproduce

Steps to reproduce the behavior:

  1. Open a dialog that contains an editable data grid inside a tab — for
    example, right-click a table with many columns (30+) and open Properties,
    then go to the "Columns" tab.
  2. Let the Columns grid render.
  3. Switch to another tab (e.g. "Constraints"), then switch back to "Columns".
  4. Observe a noticeable delay before the grid rows repaint each time you
    return to the tab (the grid appears to re-load its rows).

The effect grows with the number of rows and with the complexity of the
cell editors, and repeats on every switch back to the tab.

Expected behavior

Switching between tabs should be instant. A grid that has already rendered
should not re-measure and re-render all of its rows when its tab is shown
again.

Error message

No error message is produced — this is a UI performance/jank issue, not a
thrown error. Nothing is logged to the console.

Screenshots

(Attach a short screen recording showing the delay when switching back to
the tab.)

Desktop (please complete the following information):

  • OS: macOS
  • pgAdmin version: [e.g. 8.x — fill in]
  • Mode: [Desktop or Server]
  • Browser (if running in server mode): [e.g. Chrome]
  • Package type: [e.g. Python, Container, etc.]

Additional context

Root cause: DataGridView (web/pgadmin/static/js/SchemaView/DataGridView/
grid.jsx) unconditionally virtualizes rows and uses measureElement
(getBoundingClientRect per row). Combined with tabs that hide content via
display: none (TabPanel), showing a tab again forces a full re-measure of
every rendered row.

Suggested fix: skip virtualization below a row-count threshold. Render every
row in normal document flow (no measureElement, no absolute positioning)
so hide/show becomes a pure CSS toggle; keep virtualization for large grids.
A minimal patch is available (adds a virtualiseThreshold, default 100, and
a pgrt-row--static CSS rule that opts small-grid rows out of the
virtualizer's absolute positioning).

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions