A default Phoenix LiveView project shows a NProgress progress bar on live navigation and form submits.

This makes up for the fact that the browser won't show its regular feedback, since we're not doing traditional navigation or form submissions.

But seeing a progress bar for a quick navigation makes it feel slower.

So I modified the default callbacks to introduce a delay. Now it only appears after 100 ms, unless the navigation is done by then.

// Show progress bar on live navigation and form submits
let progressTimeout = null
window.addEventListener("phx:page-loading-start", () => { clearTimeout(progressTimeout); progressTimeout = setTimeout(NProgress.start, 100) })
window.addEventListener("phx:page-loading-stop", () => { clearTimeout(progressTimeout); NProgress.done() })

(There is an open issue about adding a delay option to NProgress itself.)

From experimentation, 100 ms seemed about right to me, and the science seems to bear that out.

If you want to experiment with it yourself, LiveView's latency simulator is handy. Run e.g.

liveSocket.enableLatencySim(200)

in your browser's JavaScript console to simulate 200 ms latency from client to server.