Page JS runs again before navigation

1

I’m using Turbo in a web project, and have lots of page-specific JS files. They are all loaded in <head> with data-turbo-track="reload" tags.
Whenever I click a link to navigate to a new page, I get flashes caused by the JS reloading on the page, before the page loads and the new page and JS runs.
So it goes
Open page → JS runs → click link → Page 1 JS reruns → Page navigates → Page 2 JS runs
In various cases where I’m loading external data from APIs for widgets, this causes those to rerun before page navigations happen.

I’m pretty sure I’m just missing something quite core but I’m not sure what.

Also, migrating to Stimulus is NOT an option here. I’ve got a TON of vanilla JS stuff which I don’t have the time to try and work out how it migrates to Stimulus.

Edit: All my page code is executed inside:

const loadEvent = typeof Turbo === 'object' ? 'turbo:load' : 'DOMContentLoaded'
window.addEventListener(loadEvent, () => {
  // code executes here
})
2

Console output for example.
Shows the before-visit, turbo:load firing from the starting page (once from my app.js and once from dashboard.js - dashboard turbo:load) before the page navigation occurs, then the actual page navigation, then turbo:load firing from app.js on the destination page.

image
image1080×906 142 KB