[Eugene (OEvgeny)]

With React 19, the Fluent typing indicator and livestream loader show a broken image in Strict Mode and after an <Activity> hides and shows Web Chat.

Changelog Entry

Fixed

• Fixed Fluent typing indicator image broken with React 19 Strict Mode or <Activity>, in PR #6051, by @OEvgeny

Description

AssetComposer created the sliding dots blob: URLs while rendering and revoked them in an effect cleanup, which Strict Mode and <Activity> run again without rendering. The URLs are now created on first use and kept for the page lifetime.

Design

• Module-level URLs, created on first use and never revoked, the same as getDefaultTypingAnimationImageURL.ts in the default theme: the 2 SVGs are small and constant, and are ready on first render; creating them in an effect would need a second render.
• Not a data URI: it would need img-src data: in a Content Security Policy.

Specific Changes

• AssetComposer.tsx: create the 2 URLs once per page, remove the revoking effects

• react19/fluentTheme.typingIndicator.strictMode.html: the image loads in Strict Mode

• react19/fluentTheme.typingIndicator.activity.html: the image loads before hide and after show; no snapshots, as react-scroll-to-bottom loses its styles in both cases

• I have added tests and executed them locally

• I have added .changelog/<PR#>-<slug>.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)

[Copilot]

🟢 Approval recommended

No active review issues remain for the Fluent theme asset URL lifetime fix.

No open issues 🎉

What changed in this PR

Fixes broken Fluent theme typing indicator and livestream loader images when React 19 Strict Mode or <Activity> replays effect cleanup.

Changes:

• Creates and caches both sliding-dot image URLs on first use, keeping them for the page lifetime.
• Adds regression tests for image loading in Strict Mode and after an <Activity> hide/show cycle.
• Adds a changelog entry documenting the fix.

File	Description
packages/​fluent-theme/​src/​components/​assets/​AssetComposer.tsx	Shares lazily created asset URLs and removes cleanup-based revocation.
.changelog/​6051-fix-fluent-asset-urls.md	Documents the Fluent typing indicator fix.
__tests__/​html2/​react19/​fluentTheme.typingIndicator.strictMode.html	Checks that the image loads after Strict Mode effect replay.
__tests__/​html2/​react19/​fluentTheme.typingIndicator.activity.html	Checks image loading before and after an Activity hide/show cycle.

_{Review effort: Balanced}