feat: Prevent flash of unstyled content by fading in sidebar after styles load.

src/sidebar/SidebarSettings.ts

@@ -281,10 +281,16 @@ function createSection(title: string, defaultCollapsed: boolean = false): { sect
 
     const body = document.createElement('div');
     body.className = `magnify-sidebar-section-body${collapsed ? ' collapsed' : ''}`;
+    // Apply inline style to prevent flash before CSS loads
+    if (collapsed) {
+        body.style.display = 'none';
+    }
 
     header.addEventListener('click', () => {
         const isCollapsed = header.classList.toggle('collapsed');
         body.classList.toggle('collapsed');
+        // Also toggle inline style for immediate effect
+        body.style.display = isCollapsed ? 'none' : '';
         // Save the new state
         saveSectionState(title, isCollapsed);
     });

src/sidebar/sidebar.ts

@@ -19,30 +19,41 @@ let sidebarRegistered = false;
 /**
  * Load sidebar CSS
  */
-function loadSidebarStyles(): void {
-    if (!document.getElementById('magnify-sidebar-styles')) {
-        const link = document.createElement('link');
-        link.id = 'magnify-sidebar-styles';
-        link.rel = 'stylesheet';
-        link.type = 'text/css';
-        link.href = 'extensions/comfyui-magnifyglass/sidebar.css';
-        document.head.appendChild(link);
+function loadSidebarStyles(onLoaded?: () => void): void {
+    const existingLink = document.getElementById('magnify-sidebar-styles') as HTMLLinkElement;
+
+    if (existingLink) {
+        // Already exists, call callback immediately
+        if (onLoaded) onLoaded();
+        return;
     }
+
+    const link = document.createElement('link');
+    link.id = 'magnify-sidebar-styles';
+    link.rel = 'stylesheet';
+    link.type = 'text/css';
+    link.href = 'extensions/comfyui-magnifyglass/sidebar.css';
+
+    if (onLoaded) {
+        link.onload = onLoaded;
+        link.onerror = onLoaded; // Still show content even if CSS fails
+    }
+
+    document.head.appendChild(link);
 }
 
 /**
  * Render the sidebar content
  */
 function renderSidebar(container: HTMLElement): void {
-    // Load styles
-    loadSidebarStyles();
-
     // Clear existing content to prevent duplicates
     container.innerHTML = '';
 
-    // Create main container
+    // Create main container (hidden initially to prevent flash of unstyled content)
     const sidebar = document.createElement('div');
     sidebar.className = 'magnify-sidebar';
+    sidebar.style.visibility = 'hidden';
+    sidebar.style.opacity = '0';
 
     // Header
     const header = document.createElement('div');
@@ -59,6 +70,16 @@ function renderSidebar(container: HTMLElement): void {
 
     sidebar.appendChild(content);
     container.appendChild(sidebar);
+
+    // Load styles and show sidebar after loaded
+    loadSidebarStyles(() => {
+        // Small delay to ensure styles are applied
+        requestAnimationFrame(() => {
+            sidebar.style.visibility = 'visible';
+            sidebar.style.opacity = '1';
+            sidebar.style.transition = 'opacity 0.1s ease-in';
+        });
+    });
 }
 
 /**

web/sidebar/SidebarSettings.js

@@ -153,9 +153,13 @@ function createSection(title, defaultCollapsed = false) {
   header.innerHTML = `${Icons.chevronDown}<span>${title}</span>`;
   const body = document.createElement("div");
   body.className = `magnify-sidebar-section-body${collapsed ? " collapsed" : ""}`;
+  if (collapsed) {
+    body.style.display = "none";
+  }
   header.addEventListener("click", () => {
     const isCollapsed = header.classList.toggle("collapsed");
     body.classList.toggle("collapsed");
+    body.style.display = isCollapsed ? "none" : "";
     saveSectionState(title, isCollapsed);
   });
   section.appendChild(header);

web/sidebar/sidebar.js

@@ -2,21 +2,29 @@ import { app } from "/scripts/app.js";
 import { renderSettingsPanel } from "./SidebarSettings.js";
 const MAGNIFY_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>`;
 let sidebarRegistered = false;
-function loadSidebarStyles() {
-  if (!document.getElementById("magnify-sidebar-styles")) {
-    const link = document.createElement("link");
-    link.id = "magnify-sidebar-styles";
-    link.rel = "stylesheet";
-    link.type = "text/css";
-    link.href = "extensions/comfyui-magnifyglass/sidebar.css";
-    document.head.appendChild(link);
+function loadSidebarStyles(onLoaded) {
+  const existingLink = document.getElementById("magnify-sidebar-styles");
+  if (existingLink) {
+    if (onLoaded) onLoaded();
+    return;
   }
+  const link = document.createElement("link");
+  link.id = "magnify-sidebar-styles";
+  link.rel = "stylesheet";
+  link.type = "text/css";
+  link.href = "extensions/comfyui-magnifyglass/sidebar.css";
+  if (onLoaded) {
+    link.onload = onLoaded;
+    link.onerror = onLoaded;
+  }
+  document.head.appendChild(link);
 }
 function renderSidebar(container) {
-  loadSidebarStyles();
   container.innerHTML = "";
   const sidebar = document.createElement("div");
   sidebar.className = "magnify-sidebar";
+  sidebar.style.visibility = "hidden";
+  sidebar.style.opacity = "0";
   const header = document.createElement("div");
   header.className = "magnify-sidebar-header";
   header.innerHTML = `${MAGNIFY_ICON}<h2>Magnify G.</h2>`;
@@ -26,6 +34,13 @@ function renderSidebar(container) {
   renderSettingsPanel(content);
   sidebar.appendChild(content);
   container.appendChild(sidebar);
+  loadSidebarStyles(() => {
+    requestAnimationFrame(() => {
+      sidebar.style.visibility = "visible";
+      sidebar.style.opacity = "1";
+      sidebar.style.transition = "opacity 0.1s ease-in";
+    });
+  });
 }
 function registerSidebar() {
   if (sidebarRegistered) {