Flashing element on phx-connected / phx-disconnected

[moogle19]

Environment

• Elixir version (elixir -v): 1.14.1
• Phoenix version (mix deps): 1.16.4
• Phoenix LiveView version (mix deps): 0.18.2
• Operating system: macOS
• Browsers you attempted to reproduce this bug on (the more the merrier): Chrome / Firefox
• Does the problem persist after removing "assets/node_modules" and trying again? Yes/no:

Actual behavior

Currently the phx-disconnected binding is executed on every page load before the LiveSocket is connected.
This means if a message is displayed (like in the example) the message flashes on every page reload.
I think it would be nice to delay the phx-disconnected binding on initial page load.

The same problem exists when changing the page from a live view to a dead view where the message flashes for a moment before the page changes.

Here are two examples:

Reloading (fresh Phoenix 1.16.4 project with the code snippet from the hex docs example):

Screen.Recording.2022-10-12.at.14.49.37.mov

Page changing (project generated from the current phoenix master branch and phx.gen.auth --live generated pages) :

Screen.Recording.2022-10-12.at.15.18.18.mov

[chrismccord]

To be clear just so I understand the problem correctly, the containers are not shown on initial page load correct? Only on refresh or navigate away? Thanks!

[moogle19]

No, it also shows during the initial page load:

Screen.Recording.2022-10-12.at.15.49.46.mov

[lud]

To me it only happens on leave. For instance if the page displays a link to an external page and I click on it. On page load the behaviour is as expected.

[rgraff]

Not sure if related or helpful, but this occurs for me when I remove the hidden class from the flash div.

[coladarci]

@rgraff this save me a lot of time - I must have removed the hidden class from the parent div at some point when debugging something. Putting it back did the trick..