Félix Malfait ece7a384df fix(front): wait for viewFields + fieldMetadataItems before opening the metadata gate (#21713)
## Problem

On twenty-main, loading a record-index/standalone page for the first
time renders the page chrome (title, view chip with record count) but
the table body stays blank. A subsequent reload fixes it. Regression
introduced by the cache-first `currentUser` bootstrap (#21532);
follow-up to #21592, which already mentioned the experiment "should be
reviewed."

## Root cause (concurrency)

The metadata loader runs in two phases and the gate opens between them:

1. **`loadMinimalMetadata`** fast-paths `objectMetadataItems` and
`views` to `status: 'up-to-date'` with only their *minimal* fields.
`viewFields` and `fieldMetadataItems` stay `'empty'`.
2. **`IsMinimalMetadataReadyEffect`** opens the gate as soon as those
two are `'up-to-date'` — before viewFields exist.
3. The page mounts. `viewsSelector` joins views with an empty
`viewFields` collection, so `view.viewFields = []`.
`RecordIndexLoadBaseOnContextStoreEffect` calls
`loadRecordIndexStates(view, …)` with the empty viewFields and pins
`loadedViewId === contextStoreCurrentViewId`.
4. `loadStaleMetadataEntities` later populates viewFields; the selector
recomputes, but the effect bails out on the `loadedViewId` guard.
`currentRecordFields` stays empty.
5. `visibleRecordFields` stays empty →
`RecordTableVirtualizedInitialDataLoadEffect` hits its
`isEmpty(visibleRecordFields)` guard and never fetches → empty body. The
"300" count visible in the screenshot comes from
`useGetRecordIndexTotalCount`'s separate aggregate query, which doesn't
depend on viewFields.

**Why the gate close/reopen self-heal doesn't work reliably:**
`replaceDraft → applyChanges` happen in the same microtask chain. React
18 automatic batching collapses both into a single render where status
goes `'empty' → 'up-to-date'` without an intermediate `'draft-pending'`
observable to React. The gate never closes, children never unmount,
`loadedViewId` is never reset.

**Why it surfaced after #21532:** Before, `currentUser` was loaded only
after `GetCurrentUser` returned — by which time
`loadStaleMetadataEntities` had typically also completed and viewFields
were populated when the gate opened. Now the cached `currentUser` lets
the gate open the moment `loadMinimalMetadata` finishes.

## Fix

Extend `IsMinimalMetadataReadyEffect` to also require
`fieldMetadataItems` and `viewFields` to be `'up-to-date'` before
opening the gate. Both are joined into the data the record-index page
reads on first paint (`objectMetadataItemsWithFieldsSelector` reads
fieldMetadataItems; `viewsSelector` reads viewFields), so the page can't
render correctly without them.

- **Warm cache** (all entities hydrated `up-to-date` from IndexedDB):
unaffected — gate opens immediately.
- **Cold cache and the first load post–IndexedDB-migration**: the gate
stays closed until `loadStaleMetadataEntities` + `applyChanges` finish,
then opens with full metadata. The page mounts once with a populated
view; no race.

## Tests

- [x] `nx typecheck twenty-front` clean (file change passes `oxlint` on
the touched file).
- [ ] Manual on twenty-main: cold reload + first navigation to a
record-index page renders the table body without needing a second
reload.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

https://claude.ai/code/session_01DD3469JAWYURa2sKUTJ85e

---
_Generated by [Claude
Code](https://claude.ai/code/session_01DD3469JAWYURa2sKUTJ85e)_

<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/21713?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->

---------

Co-authored-by: Claude <noreply@anthropic.com>
2026-06-17 11:40:55 +00:00
2026-06-11 11:02:28 +02:00

Twenty logo

The #1 Open-Source CRM

Website · Documentation · Roadmap · Discord · Figma

Twenty banner


Why Twenty

Twenty gives technical teams the building blocks for a custom CRM that meets complex business needs and quickly adapts as the business evolves. Twenty is the CRM you build, ship, and version like the rest of your stack.

Learn more about why we built Twenty


Installation

Cloud

The fastest way to get started. Sign up at twenty.com and spin up a workspace in under a minute, with no infrastructure to manage and always up to date.

Build an app

Scaffold a new app with the Twenty CLI:

npx create-twenty-app my-app

Define objects, fields, and views as code:

import { defineObject, FieldType } from 'twenty-sdk/define';

export default defineObject({
  nameSingular: 'deal',
  namePlural: 'deals',
  labelSingular: 'Deal',
  labelPlural: 'Deals',
  fields: [
    { name: 'name', label: 'Name', type: FieldType.TEXT },
    { name: 'amount', label: 'Amount', type: FieldType.CURRENCY },
    { name: 'closeDate', label: 'Close Date', type: FieldType.DATE_TIME },
  ],
});

Then ship it to your workspace:

npx twenty app:publish --private

See the app development guide for objects, views, agents, and logic functions.

Self-hosting

Run Twenty on your own infrastructure with Docker Compose, or contribute locally via the local setup guide.



Everything you need

Twenty gives you the building blocks of a modern CRM (objects, views, workflows, and agents) and lets you extend them as code. Here's a tour of what's in the box.

Want to go deeper? Read the User Guide for product walkthroughs, or the Documentation for developer reference.

Create your apps

Learn more about apps in doc

Stay on top with version control

Learn more about version control in doc

All the tools you need to build anything

Learn more about primitives in doc

Customize your layouts

Learn more about layouts in doc

AI agents and chats

Learn more about AI in doc

Plus all the tools of a good CRM

Learn more about CRM features in doc


Stack

Thanks

Greptile      Sentry      Crowdin

Thanks to these amazing services that we use and recommend for code review (Greptile), catching bugs (Sentry) and translating (Crowdin).

Join the Community

Star the repo · Discord · Feature requests · Releases · X · LinkedIn · Crowdin · Contribute

S
Description
The open alternative to Salesforce, designed for AI.
Readme AGPL-3.0 1.4 GiB
Languages
TypeScript 79.6%
MDX 17.3%
JavaScript 2.7%
Python 0.2%
SCSS 0.1%