beforeNavigation() and afterNavigation() not working?

Question

I'm using svelte on electron and want to implement a loading animation based on this article. But there would be no output and the event doesn't seem to fire at all.

I've used both

//this is in +layout.svelte
<svelte:window
    on:sveltekit:navigation-start={() => {
        console.log('Navigation started!');
        navigationState.set('loading');
    }}
    on:sveltekit:navigation-end={() => {
        console.log('Navigation ended!');
        navigationState.set('loaded');
    }}
/>

and

 //this is in +layout.svelte
import {beforeNavigate, afterNavigate } from '$app/navigation';

beforeNavigate(() => {
    console.log('Navigation started!');
    navigationState.set('loading');
});

afterNavigate(() => {
    console.log('Navigation ended!');
    navigationState.set('loaded');
});

but it doesn't seem to work. I've also tried putting it inside an onMount() function but there would be no output at all. I also tried using navigation to see what's going on by typing

navigating.subscribe( (value) => {
    console.log(value)
})

but all it would do is return null everytime the page change or refresh happens.

Is there a way to listen to before and after navigating event?