Migrating NProgress Layout from Svelte 4 to 5

[girishnuli]

We are migrating a Sveltekit project that uses Svelte 4 to Svelte 5. The root layout of this project uses nprogress to display page navigation progress status using the below code. I tried to use $effect instead of $:, but it does not seem to work. Any ideas on what could be wrong with it?

// nprogress.ts

import NProgress from 'nprogress'
NProgress.configure({ showSpinner: false, speed: 400, minimum: 0.1 })
export default NProgress

// Svelte 4

<script lang="ts">
	import { page } from '$app/stores'
	import NProgress from '$lib/utils/nprogress'
	import { onMount } from 'svelte'
	import { navigating } from '$app/stores'

	$: {
		if ($navigating) {
			NProgress.start()
		} else NProgress.done()
	}

	onMount(() => {
		NProgress.start()
		const unsubscribe = page.subscribe(($page) => {
			NProgress.done()
		})
		return unsubscribe
	})
</script>

<slot />

// Svelte 5

<script lang="ts">

	let { children } = $props()

	$effect(() => {
		if ($navigating) {
			NProgress.start()
		} else {
			NProgress.done()
		}
	})

	onMount(() => {
		NProgress.start()
		const unsubscribe = page.subscribe(($page) => {
			NProgress.done()
		})
		return unsubscribe
	})
</script>

{@render children()}