Tag - Fix performance issues with single ResizeObserver #3033

meirish · 2025-07-18T17:38:35Z

📌 Summary

This PR changes Hds::Tag to use a single ResizeObserver for all instances of Hds:Tag. This drastically improves performance when rendering the component in large arrays.

🛠️ Detailed description

👋 This stemmed from an issue reported in Slack where users noted that when rendering a decently sized array of strings, changing from Hds::Tag to Hds::Badge drastically reduced the rendering time (60s to 5s - note: this also included all of the network calls, etc.).

Looking at the difference between those two components, the major difference is that the Hds::Tag adds a new ResizeObserver for each instance of the component. Refactoring the component so that only a single ResizeObserver is needed for all instances greatly improves the initial rendering performance.

NOTE: The best way to test this is to drop all but the first commit, and load up the Tag page in the showcase app which now renders a large list of tags. This will show the slow loading issue with the current implementation. Then adding in the second commit (or looking at the preview deploy) will show how the refactor improves the performance of the large list.

SECOND NOTE (😂): The first commit should be dropped if / when you want to merge this.

📸 Screenshots

Tag showcase page loading time w/ new example

Before

After

🔗 External links

Jira ticket: HDS-XXX
Figma file: [if it applies]

👀 Component checklist

Percy was checked for any visual regression
A changelog entry was added via Changesets if needed (see templates here)

💬 Please consider using conventional comments when reviewing this PR.

📋 PCI review checklist

If applicable, I've documented a plan to revert these changes if they require more than reverting the pull request.
If applicable, I've worked with GRC to document the impact of any changes to security controls.
Examples of changes to controls include access controls, encryption, logging, etc.
If applicable, I've worked with GRC to ensure compliance due to a significant change to the in-scope PCI environment.
Examples include changes to operating systems, ports, protocols, services, cryptography-related components, PII processing code, etc.

vercel · 2025-07-18T17:38:39Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
hds-showcase	✅ Ready (Inspect)	Visit Preview	Jul 23, 2025 1:22pm
hds-website	✅ Ready (Inspect)	Visit Preview	Jul 23, 2025 1:22pm

meirish · 2025-07-18T18:58:09Z

packages/components/src/components/hds/tag/index.ts

@@ -33,23 +34,44 @@ export interface HdsTagSignature {
  Element: HTMLSpanElement;
 }

+const overflowed = new TrackedWeakSet<Element>();


This is the key to getting this working - externalizing the observer is only possible if we can track what elements are overflowed. To do this with ember's tracking, tracked-built-ins provides a tracking-entangled WeakSet. This means that getters and other computed properties that rely on this WeakSet will recompute when items are added or removed.

Checked the performance times for before and after and this fix correct the issues greatly. Will add some screenshots to the PR description for visibility.

meirish · 2025-07-18T20:32:39Z

I think the Percy failure should go away once the showcase app commit is dropped.

showcase/app/routes/page-components/tag.js

didoo · 2025-07-21T10:25:49Z

@dchyun I've added you as reviewer, since you have more context about this feature.

dchyun

@meirish thank you for catching this issues, and coming up with this solution. It looks like a great solution to the problem to me. If you would like I can pick this up and address the feedback, and make the showcase changes @didoo mentioned previously.

packages/components/src/components/hds/tag/index.ts

showcase/app/routes/page-components/tag.js

dchyun · 2025-07-21T13:29:46Z

packages/components/src/components/hds/tag/index.ts

@@ -33,23 +34,44 @@ export interface HdsTagSignature {
  Element: HTMLSpanElement;
 }

+const overflowed = new TrackedWeakSet<Element>();


Checked the performance times for before and after and this fix correct the issues greatly. Will add some screenshots to the PR description for visibility.

meirish · 2025-07-21T18:35:34Z

@meirish thank you for catching this issues, and coming up with this solution. It looks like a great solution to the problem to me. If you would like I can pick this up and address the feedback, and make the showcase changes @didoo mentioned previously.

@dchyun thanks for taking a look! And feel free to pick it up - let me know if I can help or if you have other questions.

Copilot

Pull Request Overview

This PR refactors the Hds::Tag component to use a single shared ResizeObserver instead of creating one observer per tag instance, significantly improving rendering performance when displaying large numbers of tags (reducing loading time from 60s to 5s in reported cases).

Replaced per-instance ResizeObserver with a single shared observer
Added TrackedWeakSet to manage overflow state across all tag instances
Created performance demonstration page with 1000 tag instances

Reviewed Changes

Copilot reviewed 7 out of 10 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/components/src/components/hds/tag/index.ts	Core refactoring to use shared ResizeObserver and TrackedWeakSet for overflow tracking
packages/components/package.json	Added tracked-built-ins dependency
showcase/app/templates/page-components/tag/frameless/demo-observer-performance.hbs	Demo template rendering 1000 tags for performance testing
showcase/app/routes/page-components/tag/frameless/demo-observer-performance.js	Route generating test data array of 1000 items
showcase/app/templates/page-components/tag/index.hbs	Added link to performance demo
showcase/app/router.ts	Added nested route for frameless demo
.changeset/hungry-meals-serve.md	Changelog entry documenting the performance fix

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

Copilot · 2025-07-21T22:17:12Z

packages/components/src/components/hds/tag/index.ts

+      if (this._element) {
+        observer.unobserve(this._element);
+      }
+      delete this._element;


Using delete operator on object properties can impact performance and prevent optimizations. Consider setting this._element = undefined instead.

Suggested change

delete this._element;

this._element = undefined;

meirish · 2025-07-22T15:28:44Z

OK I take back what I said about the overflow being weird, that demo / iframe in the showcase app looks great ❤️

didoo

left a couple of suggestions

.changeset/hungry-meals-serve.md

showcase/app/templates/page-components/tag/frameless/demo-observer-performance.hbs

showcase/app/templates/page-components/tag/index.hbs

meirish requested a review from a team as a code owner July 18, 2025 17:38

hashibot-hds added packages/components showcase labels Jul 18, 2025

vercel bot deployed to Preview – hds-showcase July 18, 2025 17:44 View deployment

vercel bot deployed to Preview – hds-website July 18, 2025 17:46 View deployment

meirish force-pushed the tag-single-resize-observer branch from b3dea53 to 839a3dd Compare July 18, 2025 17:49

vercel bot deployed to Preview – hds-showcase July 18, 2025 17:50 View deployment

meirish force-pushed the tag-single-resize-observer branch from 839a3dd to 815bbb7 Compare July 18, 2025 17:52

vercel bot deployed to Preview – hds-showcase July 18, 2025 17:53 View deployment

vercel bot deployed to Preview – hds-website July 18, 2025 17:56 View deployment

meirish commented Jul 18, 2025

View reviewed changes

didoo reviewed Jul 21, 2025

View reviewed changes

showcase/app/routes/page-components/tag.js Outdated Show resolved Hide resolved

didoo requested review from dchyun, a team and Copilot July 21, 2025 10:24

This comment was marked as outdated.

Sign in to view

dchyun reviewed Jul 21, 2025

View reviewed changes

meirish and others added 3 commits July 21, 2025 16:57

use a single ResizeObserver for all Hds::Tag elements

d76f27a

add tracked-built-ins to components package

3b2102e

Fix: Remove elements from observer if element stops being overflowed

9839faa

dchyun force-pushed the tag-single-resize-observer branch from 815bbb7 to d7ecfeb Compare July 21, 2025 20:59

vercel bot deployed to Preview – hds-showcase July 21, 2025 21:00 View deployment

vercel bot deployed to Preview – hds-showcase July 21, 2025 21:03 View deployment

vercel bot deployed to Preview – hds-website July 21, 2025 21:07 View deployment

vercel bot deployed to Preview – hds-showcase July 21, 2025 21:09 View deployment

vercel bot deployed to Preview – hds-website July 21, 2025 21:11 View deployment

dchyun changed the title ~~POC - Use single ResizeObserver for Hds::Tag instances~~ Tag - Fix performance issues with single ResizeObserver Jul 21, 2025

dchyun added 3 commits July 21, 2025 18:00

Fix: Update observer.disconnect to observer.unobserve

32ec80f

Feat: Add tag observer performance demo page

efe6bb1

Chore: Add changeset

1a18adb

dchyun force-pushed the tag-single-resize-observer branch from f554fb6 to 1a18adb Compare July 21, 2025 22:02

vercel bot deployed to Preview – hds-showcase July 21, 2025 22:04 View deployment

vercel bot deployed to Preview – hds-website July 21, 2025 22:06 View deployment

dchyun requested review from didoo and Copilot July 21, 2025 22:16

Copilot AI reviewed Jul 21, 2025

View reviewed changes

didoo reviewed Jul 23, 2025

View reviewed changes

.changeset/hungry-meals-serve.md Outdated Show resolved Hide resolved

showcase/app/templates/page-components/tag/frameless/demo-observer-performance.hbs Outdated Show resolved Hide resolved

showcase/app/templates/page-components/tag/index.hbs Show resolved Hide resolved

dchyun added 3 commits July 23, 2025 09:10

Fix: Remove onDismiss from demo

c9b537c

Fix: Remove demo from Percy section

1b4c0be

Chore: Update changeset to include dependency

2b5b836

vercel bot deployed to Preview – hds-showcase July 23, 2025 13:17 View deployment

vercel bot deployed to Preview – hds-website July 23, 2025 13:22 View deployment

didoo approved these changes Jul 23, 2025

View reviewed changes

dchyun merged commit acf2ac2 into main Jul 23, 2025
16 checks passed

dchyun deleted the tag-single-resize-observer branch July 23, 2025 19:07

hashibot-hds mentioned this pull request Jul 23, 2025

Version Packages #3002

Merged

Tag - Fix performance issues with single ResizeObserver #3033

Tag - Fix performance issues with single ResizeObserver #3033

Uh oh!

Conversation

meirish commented Jul 18, 2025 • edited by dchyun Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📌 Summary

🛠️ Detailed description

📸 Screenshots

Tag showcase page loading time w/ new example

🔗 External links

👀 Component checklist

Uh oh!

vercel bot commented Jul 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

meirish Jul 18, 2025

Choose a reason for hiding this comment

Uh oh!

dchyun Jul 21, 2025

Choose a reason for hiding this comment

Uh oh!

meirish commented Jul 18, 2025

Uh oh!

Uh oh!

This comment was marked as outdated.

Uh oh!

didoo commented Jul 21, 2025

Uh oh!

dchyun left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dchyun Jul 21, 2025

Choose a reason for hiding this comment

Uh oh!

meirish commented Jul 21, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jul 21, 2025

Choose a reason for hiding this comment

Uh oh!

meirish commented Jul 22, 2025

Uh oh!

didoo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

meirish commented Jul 18, 2025 •

edited by dchyun

Loading

vercel bot commented Jul 18, 2025 •

edited

Loading