@spartan-ng/cli 0.0.1-alpha.651 → 0.0.1-alpha.653

package/src/generators/ui/libs/utils/files/lib/hlm.ts.template

@@ -18,7 +18,6 @@ export function hlm(...inputs: ClassValue[]) {
 
 // Global map to track class managers per element
 const elementClassManagers = new WeakMap<HTMLElement, ElementClassManager>();
-
 // Global mutation observer for all elements
 let globalObserver: MutationObserver | null = null;
 const observedElements = new Set<HTMLElement>();
@@ -30,6 +29,13 @@ interface ElementClassManager {
 	isUpdating: boolean;
 	nextOrder: number;
 	hasInitialized: boolean;
+	restoreRafId: number | null;
+	/** Transitions are suppressed until the first effect writes correct classes */
+	transitionsSuppressed: boolean;
+	/** Original inline transition value to restore after suppression (empty string = none was set) */
+	previousTransition: string;
+	/** Original inline transition priority to preserve !important when restoring */
+	previousTransitionPriority: string;
 }
 
 let sourceCounter = 0;
@@ -72,12 +78,26 @@ export function classes(computed: () => ClassValue[] | string, options: ClassesO
 				isUpdating: false,
 				nextOrder: 0,
 				hasInitialized: false,
+				restoreRafId: null,
+				transitionsSuppressed: false,
+				previousTransition: '',
+				previousTransitionPriority: '',
 			};
 			elementClassManagers.set(element, manager);
 
 			// Setup global observer if needed and register this element
 			setupGlobalObserver(platformId);
 			observedElements.add(element);
+
+			// Suppress transitions until the first effect writes correct classes and
+			// the browser has painted them. This prevents CSS transition animations
+			// during hydration when classes change from SSR state to client state.
+			if (isPlatformBrowser(platformId)) {
+				manager.previousTransition = element.style.getPropertyValue('transition');
+				manager.previousTransitionPriority = element.style.getPropertyPriority('transition');
+				element.style.setProperty('transition', 'none', 'important');
+				manager.transitionsSuppressed = true;
+			}
 		}
 
 		// Assign order once at registration time
@@ -95,10 +115,31 @@ export function classes(computed: () => ClassValue[] | string, options: ClassesO
 
 			// Update the element
 			updateElement(manager!);
+
+			// Re-enable transitions after the first effect writes correct classes.
+			// Deferred to next animation frame so the browser paints the class change
+			// with transitions disabled first, then re-enables them.
+			if (manager!.transitionsSuppressed) {
+				manager!.transitionsSuppressed = false;
+				manager!.restoreRafId = requestAnimationFrame(() => {
+					manager!.restoreRafId = null;
+					restoreTransitionSuppression(manager!);
+				});
+			}
 		}
 
 		// Register cleanup with DestroyRef
 		destroyRef.onDestroy(() => {
+			if (manager!.restoreRafId !== null) {
+				cancelAnimationFrame(manager!.restoreRafId);
+				manager!.restoreRafId = null;
+			}
+
+			if (manager!.transitionsSuppressed) {
+				manager!.transitionsSuppressed = false;
+				restoreTransitionSuppression(manager!);
+			}
+
 			// Remove this source from the manager
 			manager!.sources.delete(sourceId);
 
@@ -120,6 +161,15 @@ export function classes(computed: () => ClassValue[] | string, options: ClassesO
 	});
 }
 
+function restoreTransitionSuppression(manager: ElementClassManager): void {
+	const prev = manager.previousTransition;
+	if (prev) {
+		manager.element.style.setProperty('transition', prev, manager.previousTransitionPriority || undefined);
+	} else {
+		manager.element.style.removeProperty('transition');
+	}
+}
+
 // eslint-disable-next-line @typescript-eslint/no-wrapper-object-types
 function setupGlobalObserver(platformId: Object): void {
 	if (isPlatformBrowser(platformId) && !globalObserver) {