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.)

3 comments

/phoenix #liveview #events

0 209 3

2024-12-05 19:40:17 UTC

First 3 of 3 Posts

Hermanverschooten

a grep shows them in phoenix_live_view/assets/js/phoenix_live_view/live_socket.js around line 763.

Post #1

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.2.5*

Post #2

James_E

oh, wow, guess I was looking in the entirely wrong source tree. Thanks for the pointer.

Though it looks like that file just contains a wrapper function… a bit more digging didn’t reveal any obvious hooks into the larger state.

I see, thank you! I didn’t realize Phoenix really does have a separate set of events for that.

I’m still not sure how to quantify a LiveView resync (for example, is there any interface to check the size of the socket’s queue during reconnect), but this at least allows my app to react differently to a mere loading event that happens to be taking a while vs. a clear disconnect from the LiveView.

/* app.js */
{
  // Show progress bar on live navigation and form submits
  // https://forum.elixirforum.com/t/phx-error-topbar-canvas-tell-the-difference-between-loading-and-connecting/67898?u=james_e
  topbar.config({
    barColors: {0: "#29d", "0.5": "orange", "1.0": "#29d"},
    shadowColor: "rgba(0, 0, 0, .3)",
    autoRun: "indeterminate" // https://github.com/buunguyen/topbar/issues/21
  })
  let is_loading = false, is_connected = true;
  window.addEventListener("phx:page-loading-start", _info => {
    is_loading = true;
    topbar.show(300); // TODO make this actually show reconnection, resync, or loading progress
  })
  window.addEventListener("phx:page-loading-stop", _info => {
    is_loading = false;
    if (is_connected)
      topbar.hide()
  })
  window.addEventListener("phx:x-liveview-disconnected", _info => {
    is_connected = false;
    topbar.show()
  })
  window.addEventListener("phx:x-liveview-connected", _info => {
    is_connected = true;
    if (!is_loading)
      topbar.hide();
  })
}

<%!-- home.html.heex -->
<main
  phx-disconnected={JS.dispatch("phx:x-liveview-disconnected")}
  phx-connected={JS.dispatch("phx:x-liveview-connected")}
>
  …
</main>

Post #3

— All posts loaded —