Giters

vmware-clarity / core

Clarity is a scalable, accessible, customizable, open-source design system built with web components. Works with any JavaScript framework, created for enterprises, and designed to be inclusive.

Home Page:https://clarity.design

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

CdsElements memory leak issue

aravindh-nagarajan opened this issue · comments

commented

Describe the bug

In our project, we are using lot of cds-elements. Recently I was doing a memory profile and found that we have lot of detached HTML Elements and most of those are clarity core alert/button/icon elements.

I am not sure why these elements are still in memory even after they are removed in DOM.

How to reproduce

Sample repo: https://github.com/aravindh-nagarajan/angular-clarity-core-sample-project

Steps to reproduce the behavior:

  1. Clone the above github repo
  2. ng serve --open
  3. Stay on the first page, you can see a alert element and button element:

Screenshot 2022-05-13 at 2 32 45 PM

  1. Click on the second tab, cds elements are not present in dom, record memory snapshot:
    (memory snapshot shows the existence of detached cds elements)
    Screenshot 2022-05-13 at 2 33 39 PM

  2. Click on the third tab, cds elements are not present in dom, record memory snapshot:
    (memory snapshot shows the existence of detached cds elements)
    Screenshot 2022-05-13 at 2 35 07 PM

Expected behavior

Expect not to see these elements in memory after they are removed from DOM.

Versions

Clarity project: Clarity Core
Clarity version: v6.x
Framework: - Angular
Framework version: Angular 13
Device:

  • Type: Macbook
  • OS: iOS
  • Browser Chrome
commented

This may be related to this issue: #61

I might have a fix for icons, and then I'll check the other elements as well.