bug(calcite-flow): visual stuttering if reduce-motion is on

[maxpatiiuk]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

(see original issue in JS API: https://devtopia.esri.com/WebGIS/arcgis-js-api/issues/59317)

Slowed down video recording:

Screen.Recording.2024-05-29.at.08.56.07.mov

See more video reproductions in the original issue

Expected Behavior

There should be fewer animations and visual artifacts if reduce motion is enabled

Reproduction Sample

https://next.sites.afd.arcgis.com/javascript/latest/sample-code/sandbox/?sample=popup-multipleelements

Reproduction Steps

1. Open this sample
2. Click on any polygon on the map that has more than one feature
3. Click on the "Select feature" button in the top right - the widget disappears for a moment, before the feature list slides in - this creates needless visual noise
4. Select any feature - if user has "Reduce motion" enabled, a lot more layout shifts here

Reproduction Version

2.8.4

Relevant Info

See also #5072

Regression?

No response

Priority impact

impact - p3 - not time sensitive

Impact

Causes excessive layout shift in JS API's Popup widget if reduce motion is on

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Maps SDK for JavaScript

[jcfranco]

This doesn't seem to be reproducible in the latest release. @maxpatiiuk Can you confirm?

[maxpatiiuk]

Can confirm the issue is no longer reproducible in the test app provided in the original description in Calcite 3.1

Screen.Recording.2025-02-21.at.16.42.20.mov

There is a tiny layout shift when feature-selection checkboxes appear, but is is barely noticeable. Happens on 2nd+ render too so not caused by lazy loading. Also, this might be caused on JS API side.

Slowed down version with backtracking:

Screen.Recording.2025-02-21.at.16.46.08.mov

Overally, I would consider this a non issue compared to the original issue. Feel free to close as resolved.

[jcfranco]

@maxpatiiuk Thanks for testing! Closing as resolved per ☝️.

There is a tiny layout shift when feature-selection checkboxes appear, but is is barely noticeable. Happens on 2nd+ render too so not caused by lazy loading. Also, this might be caused on JS API side.

@driskull Could you look at this and help confirm if it's a Maps SDK issue?