Closed m2broth closed 5 days ago
Commit SHA:b263b90d03158096816b3b619038798696edd52b
Code coverage diff between base branch:master and head branch: fix/broken_css_after_unmount
Commit SHA:b263b90d03158096816b3b619038798696edd52b
Code coverage diff between base branch:master and head branch: fix/broken_css_after_unmount
Commit SHA:b263b90d03158096816b3b619038798696edd52b
Code coverage diff between base branch:master and head branch: fix/broken_css_after_unmount
This PR addresses an issue with CSS removal timing during component unmounting, particularly when components are wrapped for smooth transitions. The key improvement is the use of the setTimeout function to delay CSS removal. This ensures that the CSS is only removed after the component has been fully unmounted, preventing the visual glitch where the component briefly appears without styles.
Key Changes: We now use setTimeout to delay CSS removal, ensuring that the component is fully unmounted before its styles are removed. This avoids cases where CSS is removed too early, causing visual issues. There are scenarios where the embedded app is wrapped by another component that clones its children for smoother transitions. In such cases, removing CSS for the original node could break the styles for the cloned node. This update addresses that by allowing a delay for CSS removal, ensuring that both the original and cloned nodes retain their styles until they are fully unmounted.
Additional Refactors: TypeScript Migration: The CssTrackedApp class was refactored from JavaScript to TypeScript Refactored Options Handling: A new options property was added to CssTrackedApp, allowing more flexibility. The delayCssRemoval flag is now handled through this options object. New removeCssTimeout Option: Introduced the removeCssTimeout option, which can be set when calling createNew({ appConfig: { removeCssTimeout: ... } }). This allows users to specify a custom delay for CSS removal after the component unmounts.