Area
React Components (@fluentui/react-components)
Describe the feature that you would like added
The v8 Shimmer component provided a complete loading-to-content transition experience with props like isDataLoaded, customElementsGroup, and shimmerColors. When isDataLoaded became true, the shimmer placeholder would fade out and the actual content would fade in - all handled by the component.
The v9 replacement (Skeleton) only provides the visual loading placeholder but has no built-in mechanism for:
- Transitioning from the loading state to the actual content (isDataLoaded equivalent)
- Accepting custom shimmer element groups (customElementsGroup equivalent)
- Customizing shimmer animation colors (shimmerColors equivalent -- shimmer, shimmerWave, background)
Use case: account.microsoft.com (AMC) uses a ShimmerProgressView component that wraps the shimmer-to-content transition for every page load. After migrating to v9, we had to completely reimplement the transition logic with custom CSS opacity transitions and setTimeout-based DOM cleanup, because Skeleton provides no equivalent to isDataLoaded + customElementsGroup. We also tried the Fade component in Fluent V9 but this led to layout bugs on page reloads when we tested it.
Proposed solution: Add a Shimmer or SkeletonTransition component (or extend Skeleton) that supports:
- An isLoaded prop that triggers the transition from placeholder to content
- A placeholder slot for the loading elements
- A children slot for the actual content
- Built-in fade-out/fade-in transition between the two states
Additional context
No response
Have you discussed this feature with our team
No response
Validations
Priority
High
Area
React Components (@fluentui/react-components)
Describe the feature that you would like added
The v8 Shimmer component provided a complete loading-to-content transition experience with props like isDataLoaded, customElementsGroup, and shimmerColors. When isDataLoaded became true, the shimmer placeholder would fade out and the actual content would fade in - all handled by the component.
The v9 replacement (Skeleton) only provides the visual loading placeholder but has no built-in mechanism for:
Use case: account.microsoft.com (AMC) uses a ShimmerProgressView component that wraps the shimmer-to-content transition for every page load. After migrating to v9, we had to completely reimplement the transition logic with custom CSS opacity transitions and setTimeout-based DOM cleanup, because Skeleton provides no equivalent to isDataLoaded + customElementsGroup. We also tried the Fade component in Fluent V9 but this led to layout bugs on page reloads when we tested it.
Proposed solution: Add a Shimmer or SkeletonTransition component (or extend Skeleton) that supports:
Additional context
No response
Have you discussed this feature with our team
No response
Validations
Priority
High