Add update trigger to scroll-reveal action for dynamic elements

src/lib/actions/reveal.ts

@@ -1,20 +1,42 @@
+export interface RevealOptions {
+	threshold?: number;
+	rootMargin?: string;
+	trigger?: unknown;
+}
+
 export function reveal(
 	node: HTMLElement,
-	options = { threshold: 0.08, rootMargin: '0px 0px -30px 0px' }
+	options: RevealOptions = { threshold: 0.08, rootMargin: '0px 0px -30px 0px' }
 ) {
+	const observerOptions = {
+		threshold: options?.threshold !== undefined ? options.threshold : 0.08,
+		rootMargin: options?.rootMargin || '0px 0px -30px 0px'
+	};
+
 	const observer = new IntersectionObserver((entries) => {
 		for (const entry of entries) {
 			if (entry.isIntersecting) {
 				entry.target.classList.add('visible');
 				observer.unobserve(entry.target);
 			}
 		}
-	}, options);
+	}, observerOptions);
+
+	const observeElements = () => {
+		const reveals = node.querySelectorAll('.reveal');
+		reveals.forEach((el) => {
+			if (!el.classList.contains('visible')) {
+				observer.observe(el);
+			}
+		});
+	};
 
-	const reveals = node.querySelectorAll('.reveal');
-	reveals.forEach((el) => observer.observe(el));
+	observeElements();
 
 	return {
+		update() {
+			observeElements();
+		},
 		destroy() {
 			observer.disconnect();
 		}

src/routes/cv/+page.svelte

@@ -46,13 +46,6 @@
 			.save()
 			.then(async () => {
 				showLinks = true;
-				const { tick } = await import('svelte');
-				await tick();
-				if (container) {
-					container.parentElement?.querySelectorAll('.reveal').forEach((el) => {
-						el.classList.add('visible');
-					});
-				}
 			});
 	}
 </script>
@@ -65,7 +58,7 @@
 	/>
 </svelte:head>
 
-<div use:reveal class="flex flex-col gap-6">
+<div use:reveal={{ trigger: showLinks }} class="flex flex-col gap-6">
 	<div bind:this={container} class="flex flex-col {showLinks ? 'gap-6' : 'gap-2 pb-8'}">
 		<!-- Header -->
 		<section class="section-shell {showLinks ? 'reveal' : ''}">