From abc4a09783bab9c682cde1a85f90212c716704a8 Mon Sep 17 00:00:00 2001 From: Volodymyr Malyhin Date: Wed, 16 Oct 2024 13:00:26 +0300 Subject: [PATCH] chore: comment about CSS removal on route change to prevent visual glitches - Added route change listener to delay CSS removal until route change is complete. - Updated `CssTrackedApp` to ensure styles remain intact during transitions. --- ilc/client/CssTrackedApp.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/ilc/client/CssTrackedApp.js b/ilc/client/CssTrackedApp.js index 6781baeb..289e5cfc 100644 --- a/ilc/client/CssTrackedApp.js +++ b/ilc/client/CssTrackedApp.js @@ -4,6 +4,7 @@ export class CssTrackedApp { #originalApp; #cssLinkUri; #delayCssRemoval; + // used to prevent removing CSS immediately after unmounting #isRouteChanged = false; #routeChangeListener; @@ -22,8 +23,11 @@ export class CssTrackedApp { this.#cssLinkUri = cssLink; this.#delayCssRemoval = delayCssRemoval; - // add route change listener for embedded apps if (!delayCssRemoval) { + // While CSS for an application rendered by another application is not always immediately necessary upon unmount, there is a non-trivial case to consider: + // - When the route changes and a spinner is enabled in the registry, the root application is unmounted and destroyed. + // - ILC then shows a copy of the previously rendered DOM node. + // - Which leads to a situation where both the root and inner applications unmount synchronously. Despite being unmounted, their styles are still required until the route transition is complete. this.#addRouteChangeListener(); } } @@ -128,6 +132,7 @@ export class CssTrackedApp { } #shouldDelayRemoval() { + // If the route is changing, we should delay CSS removal to prevent visual glitches. return this.#delayCssRemoval || this.#isRouteChanged; }