There’s a related issue with using LiveView apps on mobile that these solutions don’t address.

Scenario:

• LiveView-based web app is loaded in mobile browser (or embedded web view in a mobile app)
• User backgrounds the browser or mobile app
• After some time (depends on OS and a number of factors, but say at least a minute or so), user returns to browser or app

Assuming that the OS hasn’t unloaded the web page entirely, what you’ll usually see is a quick flash of “trying to reconnect”. The delay doesn’t help (it actually makes it worse because it also delays the hide); I think what’s happening is that the browser is killing the tab’s networking, which causes the “trying to reconnect” flash to render (while the tab isn’t visible to the user), and when you come back later, it’s already on screen.

I think the Page Visibility API can help here. LiveView already has bindings for blur and focus; it’s reasonable to consider including built-in bindings for Document.visibilityState (and changing the logic to only show the flash if the page is visible, and the socket is disconnected).

FWIW, my solution for now is much less complicated: simply make this particular flash look different than the other flashes (just a loading spinner, with “Connecting…” text), and neutral colours that don’t suggest any sort of error:

# A custom flash notice for communicating that the client has disconnected.
def flash(%{id: "client-error"} = assigns) do
  ~H"""
  <div
    id={@id}
    role="alert"
    class="fixed top-2 right-2 z-50 mt-1 mr-2 w-fit rounded-md bg-slate-300 p-3 text-slate-900 shadow-md"
    {@rest}
  >
    <p class="flex items-center gap-1.5 text-sm leading-6">
      <span class="font-semibold">
        <.icon name="hero-arrow-path" class="mr-2 h-5 w-5 animate-spin" />
        <%= gettext("Connecting...") %>
      </span>
    </p>
  </div>
  """

I’d try using JS.dispatch Phoenix.LiveView.JS — Phoenix LiveView v1.2.5 to send a custom event that then uses liveSocket.execJS.

This is pseudo code, I didn’t test it, but I hope that it shows the idea:

<.flash
  id="client-error"
  kind={:error}
  title={gettext("We can't find the internet")}
  phx-disconnected={JS.dispatch("delayed-exec", detail: %{id: "client-error", target: "data-disconnected"})}
  phx-connected={JS.dispatch("clear-delayed-exec", detail: %{id: "client-error"}) |> JS.exec("data-connected")}
  data-disconnected={show(".phx-client-error #client-error")}
  data-connected={hide("#client-error")}
  hidden
>
  <%= gettext("Attempting to reconnect") %>
  <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
</.flash>

And in your app.js something like:

const timeouts = {};
window.addEventListener("delayed-exec", (e) => {
  clearTimeout(timeouts[e.detail.id]);
  timeouts[e.detail.id] = setTimeout(() => {
    liveSocket.execJS(e.target, e.target.getAttribute(e.detail.target));
  }, e.detail.timeout);
});

window.addEventListener("clear-delayed-exec", (e) => {
  clearTimeout(timeouts[e.detail.id]);
});

<.flash delay> with <div class={["...", @delay && "delay-2s"]} with attr :delay, :boolean, default: false gets my vote