Collection rendering performance improvements Part 1: Improve Entity actions render performance (#19605)

* Add null checks for editPath and name in render method

The render method now checks for the presence of both editPath and _name before rendering the button, preventing potential errors when these values are missing.

* Refactor dropdown open state handling

Replaces the public 'open' property with a private field and getter/setter to better control dropdown state. Moves popover open/close logic into the setter, removes the 'updated' lifecycle method, and conditionally renders dropdown content based on the open state.

* add opened and closed events

* dispatch opened and closed events

* Render dropdown content only when open

Introduces an _isOpen state to control rendering of the dropdown content in UmbEntityActionsBundleElement. Dropdown content is now only rendered when the dropdown is open, improving performance and preventing unnecessary DOM updates.

* Update dropdown.element.ts

* create a cache elements

* Optimize entity actions observation with IntersectionObserver

Adds an IntersectionObserver to only observe entity actions when the element is in the viewport, improving performance. Refactors element creation to use constructors, updates event handling, and ensures cleanup in disconnectedCallback.

* only observe once

* Update entity-actions-bundle.element.ts

* Update dropdown.element.ts

* Update entity-actions-bundle.element.ts

* split dropdown component

* pass compact prop

* fix label

* Update entity-actions-dropdown.element.ts

* Update entity-actions-dropdown.element.ts

---------

Co-authored-by: Niels Lyngsø <nsl@umbraco.dk>
This commit is contained in:
Mads Rasmussen
2025-07-01 10:37:57 +02:00
committed by GitHub
parent d5159ae4f7
commit 3b4639de08
12 changed files with 202 additions and 111 deletions

View File

@@ -8,7 +8,7 @@
"hasInstallScript": true,
"dependencies": {
"@umbraco/json-models-builders": "^2.0.36",
"@umbraco/playwright-testhelpers": "^16.0.25",
"@umbraco/playwright-testhelpers": "^16.0.27",
"camelize": "^1.0.0",
"dotenv": "^16.3.1",
"node-fetch": "^2.6.7"
@@ -66,9 +66,10 @@
}
},
"node_modules/@umbraco/playwright-testhelpers": {
"version": "16.0.25",
"resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-16.0.25.tgz",
"integrity": "sha512-IvRkkrTIxlXbg2dw0RhAUgkb7KSBJCyktK6zJynOORgZ5RXRae19hqKk7yEu2EwJpTstl6m9AzoVf1x4b94x5w==",
"version": "16.0.27",
"resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-16.0.27.tgz",
"integrity": "sha512-KxjIpfFsiK5b1Au8QrlWceK88eo53VxogLs0LMrxsRS3rt4rdmD1YRP6U+yIucdPKnhVgfIsh40J/taGAZyPFQ==",
"license": "MIT",
"dependencies": {
"@umbraco/json-models-builders": "2.0.36",
"node-fetch": "^2.6.7"