Skip to content

[EuiBasicTable] Do not animate loading bar when user prefers reduced motion#9095

Merged
mgadewoll merged 4 commits intoelastic:mainfrom
smith:nls/euitable-anim
Oct 15, 2025
Merged

[EuiBasicTable] Do not animate loading bar when user prefers reduced motion#9095
mgadewoll merged 4 commits intoelastic:mainfrom
smith:nls/euitable-anim

Conversation

@smith
Copy link
Copy Markdown
Contributor

@smith smith commented Oct 13, 2025 •
edited by mgadewoll
Loading

Summary

(This is a follow-up to #9054, which makes a similar change to EuiProgress. This PR is for the loading state of EuiBasicTable.)

When the user settings request reduced motion, the EUI basic table component's loading state does not respect this setting. Fix this by only animating it when reduced motion is not requested.

Why are we making this change?

The prefers-reduced-motion media feature detects whether a user has requested reduced animations. The can be because of vestibular disorders.

Screenshots #

CleanShot 2025-10-13 at 15 11 20

prefers-contrast forced-colors
image image

Impact to users

  • If no preference for reduced motion: No change
  • If prefers reduced motion: Shows a static bar instead of a moving one

QA

Remove or strikethrough items that do not apply to your PR.

General checklist

  • Browser QA
    • Checked in both light and dark modes
    • Checked in both MacOS and Windows high contrast modes
    • Checked in mobile
    • Checked in Chrome, Safari, Edge, and Firefox
    • Checked for accessibility including keyboard-only and screenreader modes
  • Docs site QA
  • Code quality checklist
  • Release checklist
    • A changelog entry exists and is marked appropriately.
    • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
  • Designer checklist
    • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

@smith smith requested a review from a team as a code owner October 13, 2025 20:12
@mgadewoll mgadewoll self-requested a review October 14, 2025 06:33
mgadewoll
mgadewoll requested changes Oct 14, 2025
View reviewed changes
@smith smith requested a review from mgadewoll October 15, 2025 04:42
@elasticmachine
Copy link
Copy Markdown
Collaborator

elasticmachine commented Oct 15, 2025

💚 Build Succeeded

History

@elasticmachine
Copy link
Copy Markdown
Collaborator

elasticmachine commented Oct 15, 2025

💚 Build Succeeded

History

@mgadewoll mgadewoll changed the title Do not animate EuiBasicTable loading bar when user prefers reduced motion [EuiBasicTable] Do not animate loading bar when user prefers reduced motion Oct 15, 2025
mgadewoll
mgadewoll approved these changes Oct 15, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@mgadewoll mgadewoll left a comment •
edited
Loading

Choose a reason for hiding this comment

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

🟢 The changes are LGTM and reduced motion styling works as expected. Thank you for contributing! 🎉

@mgadewoll mgadewoll merged commit badbb1f into elastic:main Oct 15, 2025
7 checks passed
tsullivan pushed a commit that referenced this pull request Oct 15, 2025
@smith @tsullivan
[EuiBasicTable] Do not animate loading bar when user prefers reduced …
901069b 
…motion (#9095)
@acstll acstll mentioned this pull request Oct 20, 2025
Merged
acstll added a commit to elastic/kibana that referenced this pull request Oct 23, 2025
@acstll @kibanamachine @elasticmachine
Update EUI to v107.0.1 (#239744)
ee293d6 
- `@elastic/eui`: `v107.0.0` ⏩ `v107.0.1`
- `@elastic/eslint-plugin-eui`: `v2.4.0` ⏩ `v2.5.0`

[Questions? Please see our Kibana upgrade
FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)

---

## Changes

Related to elastic/eui#9100

- Updated snapshot f90ae29
- Added missing `aria-label` for `EuiBetaBadge`
  - [Reporting] 6d10edd
  - [ML] ce58009
- Added new translation key, ran `node scripts/i18n_check` — is there
anything else that should be done in this regard?

## Package updates

### `@elastic/eui`
[`v107.0.1`](https://github.com/elastic/eui/releases/v107.0.1)

**Bug fixes**

- Fixed `prismjs` theme in `EuiCodeBlock` to improve highlighting for
the `yaml` language ([#9089](elastic/eui#9089))
- Fixed a visual bug on `EuiTable` where the border for rows in dark
mode wasn't applied correctly
([#9115](elastic/eui#9115))

**Dependency updates**

- Updated `@elastic/prismjs-esql` to v1.1.2
([#9102](elastic/eui#9102))

**Accessibility**

- Fixed incorrect role attribute on `EuiIcon` and `EuiBetaBadge`
([#9100](elastic/eui#9100))
- Make `EuiBasicTable` respect user's reduced motion setting by not
animating when in loading state.
([#9095](elastic/eui#9095))

### `@elastic/eslint-plugin-eui`
[`v2.5.0`](https://github.com/elastic/eui/blob/main/packages/eslint-plugin/changelogs/CHANGELOG_2025.md#v250)

- Added new `accessible-interactive-element` rule.
([#9093](elastic/eui#9093))
- Added new `tooltip-focusable-anchor` rule.
([#9051](elastic/eui#9051))
- Excluded `EuiButtonEmpty` from the `no-unnamed-interactive-element`
rule. ([#9046](elastic/eui#9046))

**Bug fixes**

- Fixed `no-css-color` rule to allow CSS keywords like `currentcolor`,
`transparent`, and `inherit`
([#9092](elastic/eui#9092))

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mgadewoll mgadewoll mgadewoll approved these changes

Assignees

No one assigned

Labels

accessibility

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@smith @elasticmachine @mgadewoll @JasonStoltz