fix: effect deps handling

LottieFiles · Dec 3, 2024 · 04873b3 · 04873b3
1 parent 816e0ad
commit 04873b3
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/packages/svelte/src/lib/Dotlottie.svelte b/packages/svelte/src/lib/Dotlottie.svelte
@@ -18,7 +18,7 @@
 
 	let {
 		autoplay = false,
-		backgroundColor,
+		backgroundColor = '',
 		data,
 		loop = false,
 		mode = 'forward',
@@ -98,14 +98,13 @@
 	});
 
 	$effect(() => {
-		console.log(speed);
-		if (dotLottie && dotLottie.isLoaded && typeof speed == 'number') {
+		if (dotLottie && typeof speed == 'number' && dotLottie.isLoaded) {
 			dotLottie.setSpeed(speed);
 		}
 	});
 
 	$effect(() => {
-		if (dotLottie && dotLottie.isLoaded && typeof useFrameInterpolation == 'boolean') {
+		if (dotLottie && typeof useFrameInterpolation == 'boolean' && dotLottie.isLoaded) {
 			dotLottie.setUseFrameInterpolation(useFrameInterpolation);
 		}
 	});
@@ -125,19 +124,19 @@
 	});
 
 	$effect(() => {
-		if (dotLottie && dotLottie.isLoaded && typeof loop == 'boolean') {
+		if (dotLottie && typeof loop == 'boolean' && dotLottie.isLoaded) {
 			dotLottie.setLoop(loop);
 		}
 	});
 
 	$effect(() => {
-		if (dotLottie) {
-			dotLottie.setBackgroundColor(backgroundColor || '');
+		if (dotLottie && typeof backgroundColor == 'string' && dotLottie.isLoaded) {
+			dotLottie.setBackgroundColor(backgroundColor);
 		}
 	});
 
 	$effect(() => {
-		if (dotLottie && dotLottie.isLoaded && typeof mode == 'string') {
+		if (dotLottie && typeof mode == 'string' && dotLottie.isLoaded) {
 			dotLottie.setMode(mode);
 		}
 	});

diff --git a/packages/svelte/src/routes/+page.svelte b/packages/svelte/src/routes/+page.svelte
@@ -12,7 +12,7 @@
 	let isPaused = $state(false);
 	let isStopped = $state(false);
 	let isFrozen = $state(false);
-	let loop = true;
+	let loop = $state(true);
 	let backgroundColor = $state('#00000000');
 	let speed = $state(1);
 	let hasMultipleAnimations = $state(false);
@@ -49,6 +49,7 @@
 				isPlaying = true;
 				isPaused = false;
 				isStopped = false;
+        isFrozen = false;
 			});
 			dotLottie.addEventListener('pause', () => {
 				isPlaying = false;
@@ -96,6 +97,7 @@
 <button onclick={() => dotLottie?.stop()}>Stop</button>
 <button onclick={() => dotLottie?.freeze()}>Freeze</button>
 <button onclick={() => dotLottie?.unfreeze()}>Unfreeze</button>
+<button onclick={() => (loop = !loop)}>Toggle loop</button>
 <button onclick={() => (speed += 0.5)}>Increase speed</button>
 <button onclick={() => (speed -= 0.5)}>Decrease speed</button>
 <button onclick={next} disabled={!hasMultipleAnimations}>Next animation</button>
@@ -122,6 +124,7 @@
 <input type="color" bind:value={backgroundColor} />
 <ul>
 	<li>Speed: {speed}</li>
+	<li>Looped: {loop}</li>
 	<li>Loaded: {isLoaded}</li>
 	<li>Playing: {isPlaying}</li>
 	<li>Paused: {isPaused}</li>