From dd10974997d61d536dc58eb4f536f2dcc4f0e063 Mon Sep 17 00:00:00 2001
From: Ulas <ulas@kalayci.cloud>
Date: Sat, 4 Apr 2026 07:04:52 +0200
Subject: [PATCH] fix(ux): defer old stylesheet removal until after page
 content is gone

Previous fix removed the old CSS when new CSS loaded, but that happened
BEFORE the out-animation completed - causing a flash of unstyled content.
Now the old stylesheet stays until replaceChildren removes the old DOM.
---
 public/router.js | 31 ++++++++++++++++---------------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/public/router.js b/public/router.js
index c77aa7c..6f9b59c 100644
--- a/public/router.js
+++ b/public/router.js
@@ -70,9 +70,11 @@ function updateThemeColorForRoute(route) {
 let activePageStyle = null;
 
 function loadPageStyle(moduleName) {
-  if (!moduleName) return Promise.resolve();
+  if (!moduleName) return { ready: Promise.resolve(), cleanup: () => {} };
   const href = `/styles/${moduleName}.css`;
-  if (activePageStyle?.getAttribute('href') === href) return Promise.resolve();
+  if (activePageStyle?.getAttribute('href') === href) {
+    return { ready: Promise.resolve(), cleanup: () => {} };
+  }
 
   const link = document.createElement('link');
   link.rel = 'stylesheet';
@@ -80,20 +82,18 @@ function loadPageStyle(moduleName) {
 
   const oldLink = activePageStyle;
 
-  const loaded = new Promise((resolve) => {
-    link.onload = () => {
-      if (oldLink) oldLink.remove();
-      resolve();
-    };
-    link.onerror = () => {
-      if (oldLink) oldLink.remove();
-      resolve();
-    };
+  const ready = new Promise((resolve) => {
+    link.onload = resolve;
+    link.onerror = resolve;
   });
 
   document.head.appendChild(link);
   activePageStyle = link;
-  return loaded;
+
+  return {
+    ready,
+    cleanup: () => { if (oldLink) oldLink.remove(); },
+  };
 }
 
 // --------------------------------------------------------
@@ -202,9 +202,10 @@ async function renderPage(route, previousPath = null) {
   if (loading) loading.hidden = true;
 
   try {
+    const style = loadPageStyle(route.module);
     const [module] = await Promise.all([
       importPage(route.page),
-      loadPageStyle(route.module),
+      style.ready,
     ]);
 
     if (typeof module.render !== 'function') {
@@ -232,12 +233,12 @@ async function renderPage(route, previousPath = null) {
       await new Promise(r => setTimeout(r, 120));
     }
 
-    // Seiten-Wrapper unsichtbar in den DOM einfügen, damit
-    // document.getElementById() in render() die richtigen Elemente findet.
+    // Alter Inhalt ist jetzt weg - altes Stylesheet kann entfernt werden
     const pageWrapper = document.createElement('div');
     pageWrapper.className = 'page-transition';
     pageWrapper.style.opacity = '0';
     content.replaceChildren(pageWrapper);
+    style.cleanup();
 
     await module.render(pageWrapper, { user: currentUser });