Fluent: add decorators for loading and completion states

[OEvgeny]

Changelog Entry

Added

• Added decorators for loading and completion states to the Fluent theme, in PR #5269, by @OEvgeny

Description

This PR enhances the Fluent theme by introducing decorators for loading and completion states of activities.

Design

Added two new components:

1. BorderLoader: Displays an animated loading bar for activities in the preparation state.
2. BorderFlair: Shows a colorful animated border for activities in the completion state.

Then WebChatDecorator applies them based on the activity's livestreaming state. The implementation uses CSS animations and custom properties for flexibility and performance.

Specific Changes

• Added new files:
  • BorderFlair.module.css and BorderFlair.tsx
  • BorderLoader.module.css and BorderLoader.tsx
• Updated Decorator.tsx to use new BorderFlair and BorderLoader components
• Removed old decorator files (Flair.tsx, Loader.tsx, etc.)
• Updated FluentThemeProvider.tsx to wrap children with WebChatDecorator
• Added new CSS variables for animation colors in Theme.module.css
• Added test file withBuiltinDecorator.html for visual testing

-

• I have added tests and executed them locally
• I have updated CHANGELOG.md
• I have updated documentation

Review Checklist

This section is for contributors to review your work.

• Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Security reviewed (no data URIs, check for nonce leak)
• Tests reviewed (coverage, legitimacy)