How to get notified in JS that LiveView finished loading?


We need to signal Cypress somehow that a LiveView page finished loading, which should ideally work across the whole platform.
It’s pretty easy with the navigation - we just tapped into the phx:page-loading-stop event.

window.addEventListener('phx:page-loading-stop', (info) => {
  if (window.Cypress) {
    window.componentsReady = true;

But phx:page-loading-stop is not fired on an initial page load, and I wonder if there is another event for that?

TLDR: we are looking for an analogy of DOMContentLoaded for Liveview.


The LiveView documentation seems to imply that phx:page-loading-start and phx:page-loading-stop are triggered also by the initial page load, with the event detail set to "initial".

1 Like

Right, it worked just fine on the live route in the fresh app.

Maybe it has something to do that we are using live_render to render LiveView component as we are loading different dashboard for different types of users on the /dashboard route.

1 Like