From 47f81d452529b8ea3336566ff1a8afd176f99745 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 | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/ilc/client/CssTrackedApp.js b/ilc/client/CssTrackedApp.js index 6781baeb..776fa0a6 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,10 @@ export class CssTrackedApp { this.#cssLinkUri = cssLink; this.#delayCssRemoval = delayCssRemoval; - // add route change listener for embedded apps if (!delayCssRemoval) { + // In an embedded app, removing CSS immediately after unmounting can cause visual glitches + // while a spinner is loading and the route is changing. Delaying CSS removal until the route + // change is complete ensures styles remain intact during the transition. this.#addRouteChangeListener(); } } @@ -128,6 +131,7 @@ export class CssTrackedApp { } #shouldDelayRemoval() { + // If the route is changing, we should delay CSS removal to prevent visual glitches. return this.#delayCssRemoval || this.#isRouteChanged; }