How to determine route is being changed on NodeJS SPA (internal link)?

Wappler General Need Help
1

Hi,

I need to programmatically detect when the user is moving to another page through an internal link (NodeJS only I think), so I can show a loading bar.

I can already detect once the page has loaded (stop the loading bar), by using dmx-on:load:

<div is="dmx-view" id="content" dmx-on:load="run([{runJS:{function:'pageLoaded',outputType:'text'}}])">
    <%- await include(content, locals); %>
</div>

That would call the pageLoaded() function I made

I’m trying to use this:
https://buunguyen.github.io/topbar/

Context: NodeJS SPA loader progress bar & icon

2

I haven’t checked the code but I guess Patrick would need to add an event listener when pushState/replaceState are called.

3

There were state events added to browser component not too long ago, but they don’t work for SPA.
We have made it a practice to do such things wherever we have internal anchor tags or gotos - its not ideal at all, but works for now.
If an actual solution can be provided here, it would be great.

One of our applications uses a 3rd party theme - I don’t remember the name - which has a built-in JS binding to do exactly what you are looking for - works on SPA’s internal redirection well. We can’t control or manipulate it from Wappler though. @nshkrsh can probably help with the theme name.