svelte-ag 0.0.2-dev.82 → 0.0.2-dev.83

package/dist/lib/components/animated/animated.svelte

@@ -74,47 +74,30 @@
     children
   }: Props = $props();
 
-  let animationComplete = $state<boolean>(true);
+  let animationComplete = $state<boolean>(disableInitialAnimation);
   let isInitialRender = $state(true);
   //svelte-ignore non_reactive_update
   let growHeightElement: HTMLDivElement | undefined;
 
   function handleAnimationEnd(e: AnimationEvent) {
-    if (!visible) {
-      animationComplete = true;
-    } else {
-      animationComplete = false;
-    }
-
-    // Mark initial render as complete after animation
-    isInitialRender = false;
-
-    if (onAnimationComplete) {
-      onAnimationComplete(visible);
-    }
+    animationComplete = true;
+    onAnimationComplete?.(visible);
   }
 
   // Reset animation state when visibility changes
   watch(
     () => visible,
-    (newValue) => {
-      if (newValue) {
-        animationComplete = false;
-      }
+    () => {
+      isInitialRender = false;
+      animationComplete = false;
     },
-    { lazy: false }
+    // Dont run on mount
+    { lazy: true }
   );
 
-  // Set initial render to false when component mounts if disableInitialAnimation is true
-  $effect(() => {
-    if (disableInitialAnimation) {
-      isInitialRender = false;
-    }
-  });
-
   const dataState = $derived(visible ? 'visible' : 'hidden');
   // Skip animation classes on initial render when disableInitialAnimation is true
-  const shouldApplyAnimationClasses = $derived(!isInitialRender || !disableInitialAnimation);
+  const shouldApplyAnimationClasses = $derived(!(isInitialRender && disableInitialAnimation));
 
   // Duration in ms for animations
   const durationMap = {
@@ -210,11 +193,14 @@
     }
   }
 
-  $effect(() => {
-    if (animation === 'growHeight') {
-      animateHeight();
+  watch(
+    () => visible,
+    () => {
+      if (animation === 'growHeight') {
+        animateHeight();
+      }
     }
-  });
+  );
 </script>
 
 {#if animation === 'growHeight'}

package/dist/lib/components/animated/animated.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"animated.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/animated/animated.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yDA2C3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAGvE,OAAO,EAAM,KAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAKpD,MAAM,MAAM,KAAK,GAAG,cAAc,CAAC,iBAAiB,CAAC,GAAG;IACtD,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,mBAAmB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAwLJ,QAAA,MAAM,QAAQ,kDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"animated.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/animated/animated.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yDA2C3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAGvE,OAAO,EAAM,KAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAKpD,MAAM,MAAM,KAAK,GAAG,cAAc,CAAC,iBAAiB,CAAC,GAAG;IACtD,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,mBAAmB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA0KJ,QAAA,MAAM,QAAQ,kDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "svelte-ag",
   "description": "Useful svelte components",
-  "version": "0.0.2-dev.82",
+  "version": "0.0.2-dev.83",
   "author": "Alexander Hornung",
   "bugs": "https://github.com/ageorgeh/cms/issues",
   "dependencies": {
@@ -24,7 +24,7 @@
     "formsnap": "2.0.1",
     "valibot": "1.1.0",
     "radash": "12.1.0",
-    "ts-ag": "0.0.1-dev.2"
+    "ts-ag": "0.0.1-dev.3"
   },
   "peerDependencies": {
     "svelte": "^5.28.2",

package/src/lib/components/animated/animated.svelte

@@ -74,47 +74,30 @@
     children
   }: Props = $props();
 
-  let animationComplete = $state<boolean>(true);
+  let animationComplete = $state<boolean>(disableInitialAnimation);
   let isInitialRender = $state(true);
   //svelte-ignore non_reactive_update
   let growHeightElement: HTMLDivElement | undefined;
 
   function handleAnimationEnd(e: AnimationEvent) {
-    if (!visible) {
-      animationComplete = true;
-    } else {
-      animationComplete = false;
-    }
-
-    // Mark initial render as complete after animation
-    isInitialRender = false;
-
-    if (onAnimationComplete) {
-      onAnimationComplete(visible);
-    }
+    animationComplete = true;
+    onAnimationComplete?.(visible);
   }
 
   // Reset animation state when visibility changes
   watch(
     () => visible,
-    (newValue) => {
-      if (newValue) {
-        animationComplete = false;
-      }
+    () => {
+      isInitialRender = false;
+      animationComplete = false;
     },
-    { lazy: false }
+    // Dont run on mount
+    { lazy: true }
   );
 
-  // Set initial render to false when component mounts if disableInitialAnimation is true
-  $effect(() => {
-    if (disableInitialAnimation) {
-      isInitialRender = false;
-    }
-  });
-
   const dataState = $derived(visible ? 'visible' : 'hidden');
   // Skip animation classes on initial render when disableInitialAnimation is true
-  const shouldApplyAnimationClasses = $derived(!isInitialRender || !disableInitialAnimation);
+  const shouldApplyAnimationClasses = $derived(!(isInitialRender && disableInitialAnimation));
 
   // Duration in ms for animations
   const durationMap = {
@@ -210,11 +193,14 @@
     }
   }
 
-  $effect(() => {
-    if (animation === 'growHeight') {
-      animateHeight();
+  watch(
+    () => visible,
+    () => {
+      if (animation === 'growHeight') {
+        animateHeight();
+      }
     }
-  });
+  );
 </script>
 
 {#if animation === 'growHeight'}