Skip to content

feat(List): support custom empty views#2440

Open
mfal wants to merge 6 commits intomainfrom
2437-how-to-customize-the-empty-view-of-the-list-component
Open

feat(List): support custom empty views#2440
mfal wants to merge 6 commits intomainfrom
2437-how-to-customize-the-empty-view-of-the-list-component

Conversation

@mfal
Copy link
Copy Markdown
Member

@mfal mfal commented Apr 9, 2026

No description provided.

@mfal mfal linked an issue Apr 9, 2026 that may be closed by this pull request
How to customize the "empty" view of the List component? #2437
Open
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 9, 2026 •
edited
Loading

Coverage Report for ./packages/components/

Status Category Percentage Covered / Total
🔵 Lines 81.76% 278 / 340
🔵 Statements 82.08% 284 / 346
🔵 Functions 87.83% 65 / 74
🔵 Branches 70.87% 129 / 182
File CoverageNo changed files found.
Generated in workflow #5098 for commit ac71fab by the Vitest Coverage Report Action

@mfal mfal requested a review from Lisa18289 April 9, 2026 15:19
@mfal mfal force-pushed the 2437-how-to-customize-the-empty-view-of-the-list-component branch from ddb2f55 to ca7bb02 Compare April 9, 2026 15:22
@Lisa18289 Lisa18289 added the update-screenshots Label a PR to update the screenshots used for visual regression testing label Apr 10, 2026
@github-actions github-actions bot removed the update-screenshots Label a PR to update the screenshots used for visual regression testing label Apr 10, 2026
@mfal mfal enabled auto-merge (squash) April 10, 2026 06:22
@mfal mfal disabled auto-merge April 10, 2026 06:36
@mfal mfal force-pushed the 2437-how-to-customize-the-empty-view-of-the-list-component branch from 12bbbf4 to b7a7899 Compare April 10, 2026 07:01
@mfal mfal force-pushed the 2437-how-to-customize-the-empty-view-of-the-list-component branch from b7a7899 to 2d90501 Compare April 10, 2026 07:22
@mfal mfal added the update-screenshots Label a PR to update the screenshots used for visual regression testing label Apr 10, 2026
@github-actions github-actions bot removed the update-screenshots Label a PR to update the screenshots used for visual regression testing label Apr 10, 2026
Lisa18289
Lisa18289 reviewed Apr 10, 2026
View reviewed changes
Comment thread apps/docs/src/content/04-components/structure/list/overview.mdx Outdated
github-actions bot and others added 3 commits April 10, 2026 07:34
@github-actions @mfal
test: update visual regression screenshots
437a6d8 
Co-authored-by: mfal <4696750+mfal@users.noreply.github.com>
@mfal
feat(List): support custom empty views
ad5e0b2
@mfal
Merge branch '2437-how-to-customize-the-empty-view-of-the-list-compon…
17bcfae 
…ent' of github.com:mittwald/flow into 2437-how-to-customize-the-empty-view-of-the-list-component

# Conflicts:
#	apps/docs/src/content/04-components/structure/list/overview.mdx
@mfal mfal added ux feedback required Additional infos from the author required labels Apr 10, 2026
@mfal mfal requested a review from Jan-Eimertenbrink April 10, 2026 08:37
@mfal
Copy link
Copy Markdown
Member Author

mfal commented Apr 10, 2026

We must have closer look into the layout-shifts from the initial loading state to the empty/non-empty list view.

@mfal mfal mentioned this pull request Apr 10, 2026
Open
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 10, 2026

🚀 Preview Deployment

Preview environments are ready:

Type URL
docs pr-2440.docs.review.flow-components.de
storybook pr-2440.storybook.review.flow-components.de

Images:

  • docs: ghcr.io/mittwald/flow/docs:pr-2440
  • storybook: ghcr.io/mittwald/flow/storybook:pr-2440

@mfal
Merge remote-tracking branch 'origin/main' into 2437-how-to-customize…
ac71fab 
…-the-empty-view-of-the-list-component

# Conflicts:
#	packages/remote-react-components/src/tests/visual/__screenshots__/Button.browser.test.tsx/Button-with-avatar-firefox-darwin.png
#	packages/remote-react-components/src/tests/visual/__screenshots__/Button.browser.test.tsx/Button-with-avatar-webkit-darwin.png
#	packages/remote-react-components/src/tests/visual/__screenshots__/Link.browser.test.tsx/Link-edge-cases-firefox-darwin.png
#	packages/remote-react-components/src/tests/visual/__screenshots__/Link.browser.test.tsx/Link-edge-cases-webkit-darwin.png
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 10, 2026

🚀 Preview Deployment

Preview environments are ready:

Type URL
docs pr-2440.docs.review.flow-components.de
storybook pr-2440.storybook.review.flow-components.de

Images:

  • docs: ghcr.io/mittwald/flow/docs:pr-2440
  • storybook: ghcr.io/mittwald/flow/storybook:pr-2440

@Jan-Eimertenbrink
Copy link
Copy Markdown
Member

Jan-Eimertenbrink commented Apr 15, 2026

We must have closer look into the layout-shifts from the initial loading state to the empty/non-empty list view.

In general, I think it’s a good decision to integrate the initial EmptyView directly into the list. In the past, we often saw cases where the EmptyView for initial empty states where no items exist yet was simply forgotten by developers, so this approach helps avoid that.

However, in the mStudio context, it does not feel visually appropriate to display a disabled ListHeader above the EmptyView. Because of this, I would prefer switching to a loading spinner during the initial loading state. A layout shift during loading cannot really be avoided anyway, regardless of whether we use a skeleton or a spinner. Using a spinner also keeps the option open to transition directly to an IllustratedMessage (EmptyView) without disabling the ListHeader. Visually, moving from fewer elements to more elements feels more natural and comfortable for users than the opposite direction.

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

Reviewers

@Lisa18289 Lisa18289 Lisa18289 approved these changes

@Jan-Eimertenbrink Jan-Eimertenbrink Awaiting requested review from Jan-Eimertenbrink

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

feedback required Additional infos from the author required ux

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

How to customize the "empty" view of the List component?

3 participants

@mfal @Jan-Eimertenbrink @Lisa18289