fix(ilc): fix unmount css for embedded application by adding timeout #624
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
m2broth
requested review from
blackrabbit99,
b1ff,
yehor-manzhula and
stas-nc
added 2 commits
November 4, 2024 12:34
Added options to the CssTrackedApp and moved delayCssRemoval there. Added additional option for remove css timeout (removeCssTimeout) that can be set from the createNew method of embedded app (appConfig->removeCssTimeout) property. The file was refactored to TypeScript. Added additional types
m2broth
changed the title
stas-nc
reviewed
Nov 4, 2024
Coverage ReportIlc/serverCommit SHA:b263b90d03158096816b3b619038798696edd52b Test coverage results 🧪File details
Ilc/clientCommit SHA:b263b90d03158096816b3b619038798696edd52b Test coverage results 🧪File details
RegistryCommit SHA:b263b90d03158096816b3b619038798696edd52b Test coverage results 🧪File details
|
wRLSS
approved these changes
Nov 11, 2024
stas-nc
approved these changes
Nov 11, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.