ui5-datetime-picker: 30k nodes within dom

[Roba1993]

Bug Description

I'm using the ui5-datetime-picker and ui5-datet-picker component a few times on some pages. We recognized that on these pages the performance is dropping significantly. After looking into the problem I detected, that a single picker component is creating around 30k dom nodes. This has a big impact on the performance on lighter devices from our customers.

I'm using the following script to check the amount of nodes.

(() => {
  const root = document.querySelector('body');
  let count = 0;
  const walk = (node) => {
    count++;
    if (node.shadowRoot) {
      node.shadowRoot.querySelectorAll('*').forEach(walk);
    }
    node.children && [...node.children].forEach(walk);
  };
  root && walk(root);
  return count;
})()

My request would be to not render the picker popup when it's not needed. This would reduce the amount of nodes just to the one needed for the input. When a user wants to change the daytime/time the nodes can be added and shown.

Affected Component

ui5-datetime-picker | ui5-datet-picker

Expected Behaviour

The nodes of the picker should only be added to the dom, when they are needed.

Isolated Example

No response

Steps to Reproduce

1. Use the component
2. Count the nodes with the script above

Log Output, Stack Trace or Screenshots

No response

Priority

High

UI5 Web Components Version

2.8

Browser

Chrome

Operating System

Mac

Additional Context

No response

Organization

Exolynk AG

Declaration

• I’m not disclosing any internal or sensitive information.

[Vonahz]

Hi @UI5/ui5-team-ctr-bal

Please take a look.

Regards,
Milen

[vladitasev]

Hello, @UI5/ui5-team-ctr-bal

Here are my findings:

• the date picker/datetime picker input is just 69 DOM elements
• once the date picker popup is opened, we get 3 000 DOM elements
• once the datetime picker popup is opened, we get 18 000 DOM elements

I can imagine a page with multiple datetime pickers (f.e. for each row in a list/table) would create a performance issue. @pskelin what do you think?

Please:

• investigate why the clock amounts to 15 000 DOM elements.
• I did a quick PoC to not render the picker until open (but then remain rendered and just hidden) after it's been opened the first time (chore: improve ui5-date-picker performance #12824). Please evaluate whether it makes sense to merge and if you see any side effects of such a change. A calendar test, seemingly completely unrelated to this, is failing at the time I submitted this PR.
• If you think the PoC should be merged, a similar change for ui5-time-picker should be submitted too.

BR,
Vladi