graham/prop
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Delay disconnect alerts by 3s to avoid flashing on brief hiccups

Browse source
This commit is contained in:
Graham McIntire 2026-04-12 10:40:33 -05:00
parent e3b2d6315d
commit 91fb5cda22
2 changed files with 35 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
assets/js/app.ts
View file

@ -81,6 +81,41 @@ topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
window.addEventListener("phx:page-loading-start", _info => topbar.show(300))
window.addEventListener("phx:page-loading-stop", _info => topbar.hide())
// Delay disconnect alerts by 3 seconds so brief hiccups don't flash errors
let disconnectTimer: ReturnType<typeof setTimeout> | null = null
const DISCONNECT_DELAY_MS = 3000
function showDisconnectAlert(id: string) {
const el = document.getElementById(id)
if (el) el.removeAttribute("hidden")
}
function hideDisconnectAlert(id: string) {
const el = document.getElementById(id)
if (el) el.setAttribute("hidden", "")
}
new MutationObserver(() => {
const root = document.querySelector("[data-phx-main]")
if (!root) return
const hasError = root.classList.contains("phx-client-error") ||
root.classList.contains("phx-server-error")
if (hasError && !disconnectTimer) {
disconnectTimer = setTimeout(() => {
const r = document.querySelector("[data-phx-main]")
if (r?.classList.contains("phx-client-error")) showDisconnectAlert("client-error")
if (r?.classList.contains("phx-server-error")) showDisconnectAlert("server-error")
}, DISCONNECT_DELAY_MS)
} else if (!hasError && disconnectTimer) {
clearTimeout(disconnectTimer)
disconnectTimer = null
hideDisconnectAlert("client-error")
hideDisconnectAlert("server-error")
}
}).observe(document.body, {subtree: true, attributes: true, attributeFilter: ["class"]})
// connect if there are any LiveViews on the page
liveSocket.connect()

4
lib/microwaveprop_web/components/layouts.ex
View file

@ -141,8 +141,6 @@ defmodule MicrowavepropWeb.Layouts do
id="client-error"
kind={:error}
title={gettext("We can't find the internet")}
phx-disconnected={show(".phx-client-error #client-error") |> JS.remove_attribute("hidden")}
phx-connected={hide("#client-error") |> JS.set_attribute({"hidden", ""})}
hidden
>
{gettext("Attempting to reconnect")}
@ -153,8 +151,6 @@ defmodule MicrowavepropWeb.Layouts do
id="server-error"
kind={:error}
title={gettext("Something went wrong!")}
phx-disconnected={show(".phx-server-error #server-error") |> JS.remove_attribute("hidden")}
phx-connected={hide("#server-error") |> JS.set_attribute({"hidden", ""})}
hidden
>
{gettext("Attempting to reconnect")}