Skip to content

[content list] Bundle performance improvements#271117

Merged
clintandrewhall merged 1 commit into
mainfrom
content-list/perf-improvements
Jun 2, 2026
Merged

[content list] Bundle performance improvements#271117
clintandrewhall merged 1 commit into
mainfrom
content-list/perf-improvements

Conversation

@clintandrewhall
Copy link
Copy Markdown
Contributor

@clintandrewhall clintandrewhall commented May 25, 2026 •
edited
Loading

Summary

Reduces unnecessary re-renders and object allocations in @kbn/content-list-table and @kbn/content-list-toolbar to improve frame budget headroom as the content list scales.

kbn-content-list-table — TableSkeleton

  • Moved static tableCss out of the component body so it isn't re-allocated on every render.
  • Replaced the bodyCellCss and headerCellCss inline css calls with useMemo-wrapped versions, keyed on euiTheme and compressed.
  • Eliminated the RectangleCell wrapper component (which called useEuiTheme() once per cell). The theme value is now threaded in from the parent and passed to renderSkeletonCell as defaultRectangleHeight, so the hook is called exactly once for the whole skeleton regardless of row/column count.
  • Pre-computes a stable columnDescriptors array via useMemo so the body-row loop reuses the same React nodes across all rows instead of re-allocating per cell.

kbn-content-list-toolbar — filters

  • Converted created_by_filter, sort, starred_filter, and tag_filter from plain .ts modules to .tsx to support inline JSX in filter renderers (required by follow-on work in this stack).
  • Tightened up barrel exports in filters/index.ts and the toolbar index.ts.

Part of the @kbn/content-list stacked PR series:

Checklist

  • Unit or functional tests were updated or added to match the most common scenarios
  • The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines
  • Backport guidelines reviewed and applicable backport:* labels applied

Identify risks

No user-facing behavior changes. All modifications are internal to skeleton rendering and filter module structure.

@clintandrewhall clintandrewhall added backport:skip This PR does not require backporting release_note:skip Skip the PR/issue when compiling release notes v9.5.0 review Team:SharedUX Platform AppEx-SharedUX (formerly Global Experience) t// labels May 25, 2026
This was referenced May 25, 2026
Merged
Merged
Merged
Open
@clintandrewhall clintandrewhall force-pushed the content-list/perf-improvements branch 4 times, most recently from d08c8ae to e6e3d0f Compare May 25, 2026 17:42
@clintandrewhall clintandrewhall marked this pull request as ready for review May 25, 2026 17:42
@clintandrewhall clintandrewhall requested a review from a team as a code owner May 25, 2026 17:42
@infra-vault-gh-plugin-prod
Copy link
Copy Markdown

infra-vault-gh-plugin-prod Bot commented May 25, 2026

Pinging @elastic/appex-sharedux (Team:SharedUX)

kowalczyk-krzysztof
kowalczyk-krzysztof approved these changes May 25, 2026
View reviewed changes
Copy link
Copy Markdown
Member

@kowalczyk-krzysztof kowalczyk-krzysztof left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

I wonder if maybe we could use some eslint rule (and a skill or a mention in some existing skill) for css`` optimization because it's easy to miss.

@clintandrewhall clintandrewhall force-pushed the content-list/perf-improvements branch 3 times, most recently from de5dd7c to 34d26e5 Compare May 28, 2026 13:34
@clintandrewhall clintandrewhall force-pushed the content-list/perf-improvements branch from 34d26e5 to 93717bc Compare June 1, 2026 18:34
@kibanamachine
Copy link
Copy Markdown
Contributor

kibanamachine commented Jun 1, 2026

💛 Build succeeded, but was flaky

Failed CI Steps

Metrics [docs]

✅ unchanged

History

@clintandrewhall clintandrewhall merged commit 50d719b into main Jun 2, 2026
32 checks passed
@clintandrewhall clintandrewhall deleted the content-list/perf-improvements branch June 2, 2026 01:06
clintandrewhall added a commit that referenced this pull request Jun 2, 2026
@clintandrewhall
[content list] Custom filter and sort extensions (#271118)
20a728c 
## Summary

Extends `@kbn/content-list-provider-client` with a typed API for
defining custom filters and sort orders that content list providers can
contribute at registration time. This gives plugin-level providers
first-class control over the toolbar filters their listing exposes,
without having to reach into content list internals.

**New public API surface (`kbn-content-list-provider-client`)**
- `ContentListFilterDefinition<TItem, TValue, TOption>` — declarative
filter descriptor: title, the field it targets, how to extract values
from items, and the available options (either a static array or derived
from a data array via `getOptionValue`/`getOptionLabel`).
- `ResolvedContentListFilter` — runtime form of a filter definition with
methods: `getOptions()`, `getLabelForValue()`, `normalizeValues()`,
`toFieldDefinition()`.
- `ContentListFilterMap` — record of resolved filters keyed by id.
- `ContentListSortDefinition` / `sorting.ts` — analogous API for custom
sort fields.
- `CustomFilterRenderer` — React component that renders a resolved
filter as an EUI `FilterGroup` button.
- `useClientFilterCounts` — hook that counts how many items match each
option's value against the current item set, used to populate filter
option counts without a server round-trip.
- `ClientStrategyContext` — context type threading filter/sort
definitions into the client strategy.
- Updated `provider.tsx` and `strategy.ts` to wire custom filter and
sort definitions through the provider lifecycle.

**Part of the `@kbn/content-list` stacked PR series:**
- #271117 — performance foundations
- **This PR** — custom filter/sort extension API
- #271119 — render custom filters in toolbar
- #271120 — migrate annotation library listing
- #271121 — data view filter for annotation listing

### Checklist

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
- [x] [Backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
reviewed and applicable `backport:*` labels applied

### Identify risks

New API surface on a shared package. No existing callers are modified;
the new types are purely additive. The resolved filter/sort objects are
computed inside the provider, so a misconfigured definition fails loudly
at provider setup rather than silently at query time.
clintandrewhall added a commit that referenced this pull request Jun 2, 2026
@clintandrewhall
[content list] Render custom filters in toolbar (#271119)
6593f39 
## Summary

Wires the custom filter/sort definitions introduced in #271118 into the
content list toolbar so they render alongside the built-in filters
(tags, starred, created-by, sort).

**Changes**
- `use_filters.ts` — reads `customFilters` from the provider client
context and merges them into the resolved filter list handed to the
toolbar's `FilterGroup`.
- `dashboard_listing.stories.tsx` — adds a Storybook story demonstrating
a dashboard listing with a custom provider filter (data view picker),
serving as a live integration example and a visual regression target.
- `kbn-content-list-docs` `tsconfig.json` — adds the
`kbn-content-list-provider-client` reference needed by the new story.

**Part of the `@kbn/content-list` stacked PR series:**
- #271117 — performance foundations
- #271118 — custom filter/sort extension API
- **This PR** — render custom filters in toolbar
- #271120 — migrate annotation library listing
- #271121 — data view filter for annotation listing

### Checklist

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
- [x] [Backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
reviewed and applicable `backport:*` labels applied

### Identify risks

Small surface change to `use_filters.ts`. Custom filters only appear
when the provider registers them; listings with no custom filters are
unaffected.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@kowalczyk-krzysztof kowalczyk-krzysztof kowalczyk-krzysztof approved these changes

Assignees

No one assigned

Labels

backport:skip This PR does not require backporting release_note:skip Skip the PR/issue when compiling release notes review Team:SharedUX Platform AppEx-SharedUX (formerly Global Experience) t// v9.5.0

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@clintandrewhall @kibanamachine @kowalczyk-krzysztof