Defer initialization after PJAX navigation

Author: sjockers

package-lock.json

@@ -17,6 +17,7 @@
 		"@eslint/js": "^9.39.2",
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
 		"@swr-data-lab/components": "^2.43.0",
+		"@types/jquery": "^4.0.0",
 		"@types/node": "^22",
 		"eslint": "^9.39.2",
 		"eslint-config-prettier": "^10.1.8",

sophora-components/package.json

@@ -1,30 +1,37 @@
 import { mount } from 'svelte';
 import type { SvelteComponent } from 'svelte';
 
+declare global {
+	interface Window {
+		$?: unknown;
+	}
+}
+
 export default async function mountEmbeds(
 	Component: typeof SvelteComponent,
 	targetSelector: string
 ): Promise<void> {
-	const _mountEmbeds = () => {
-		console.log(
-			`Mounting components for selector: ${targetSelector}`,
-			document.querySelectorAll(targetSelector)
-		);
-		document.querySelectorAll(targetSelector).forEach((target) => {
-			console.log(`Mounting individual component on target:`, target);
-			mount(Component, { target });
-		});
-	};
+	const _mountEmbeds = () =>
+		(() => {
+			console.log(
+				`Mounting components for selector: ${targetSelector}`,
+				document.querySelectorAll(targetSelector)
+			);
+			document.querySelectorAll(targetSelector).forEach((target) => {
+				console.log(`Mounting individual component on target:`, target);
+				mount(Component, { target });
+			});
+		})();
+
+	// Mount the components on initial load
+	console.log('Mounting Datawrapper Switcher on initial load');
+	_mountEmbeds();
 
 	// Listen for PJAX navigation events to remount the component if needed
 	if (window.$) {
 		$(document).on('pjax:end', () => {
-			console.log('PJAX navigation detected (jQuery), remounting Datawrapper Switcher');
-			_mountEmbeds();
+			// Delay to ensure new DOM is ready before attempting to mount
+			setTimeout(() => _mountEmbeds(), 100);
 		});
 	}
-
-	// Mount the components on initial load
-	console.log('Mounting Datawrapper Switcher on initial load');
-	_mountEmbeds();
 }