James_E
Phx-error topbar canvas: tell the difference between "loading" and "connecting"?
Whenever there’s a connection error on LiveView, the current version of phx.new sticks a completely fake progress bar at the top of the screen, which fills at the hardcoded rate of 5% of the remaining distance to 95%, each frame, without regard to any actual reconnection progress or post-reconnection sync progress.
I’d like to replace this with a less misleading disconnection indicator, such as an indeterminate progress bar. But I’d also like to (in the event that the latter takes more than 1 frame) switch over to showing a “real” progress bar showing the approximate completion of the actual post-reconnection sync.
So: does Phoenix have any hooks to tell the difference between these? I tried to find it myself, but I couldn’t spot where the existing “page-loading” hooks are coded, so I wasn’t immediately able to just look around at the neighboring code to check.
(I’m not asking about how to program the replacement topbar drawing code as that’s going to be a pretty simple exercise and is entirely out-of-scope of Elixir/Phoenix anyway; I’m only asking how I would hook into LiveView to know when to run which version of the drawing code.)
Marked As Solved
gushonorato
Have you tried to implement a disconnection feedback using lifecycle events?
<div id="status" class="hidden" phx-disconnected={JS.show()} phx-connected={JS.hide()}>
Attempting to reconnect...
</div>
You can find more information here: Bindings — Phoenix LiveView v1.0.0*







