delay phx-disconnected to prevent reconnect flash

See https://elixirforum.com/t/delaying-liveview-js-commands-avoid-quick-flash-of-trying-to-reconnect/64035.
Relates to: phoenixframework/phoenix#5735

Maybe we need to tweak the timeout or make it configurable?

assets/js/phoenix_live_view/constants.js

@@ -67,6 +67,7 @@ export const PHX_RELOAD_STATUS = "__phoenix_reload_status__"
 export const LOADER_TIMEOUT = 1
 export const MAX_CHILD_JOIN_ATTEMPTS = 3
 export const BEFORE_UNLOAD_LOADER_TIMEOUT = 200
+export const DISCONNECTED_TIMEOUT = 500
 export const BINDING_PREFIX = "phx-"
 export const PUSH_TIMEOUT = 30000
 export const LINK_HEADER = "x-requested-with"

assets/js/phoenix_live_view/view.js

@@ -1,5 +1,6 @@
 import {
   BEFORE_UNLOAD_LOADER_TIMEOUT,
+  DISCONNECTED_TIMEOUT,
   CHECKABLE_INPUTS,
   CONSECUTIVE_RELOADS,
   PHX_AUTO_RECOVER,
@@ -143,6 +144,7 @@ export default class View {
     this.lastAckRef = null
     this.childJoins = 0
     this.loaderTimer = null
+    this.disconnectedTimer = null
     this.pendingDiffs = []
     this.pendingForms = new Set()
     this.redirect = false
@@ -254,6 +256,7 @@ export default class View {
 
   hideLoader(){
     clearTimeout(this.loaderTimer)
+    clearTimeout(this.disconnectedTimer)
     this.setContainerClasses(PHX_CONNECTED_CLASS)
     this.execAll(this.binding("connected"))
   }
@@ -891,7 +894,13 @@ export default class View {
     if(this.isMain()){ DOM.dispatchEvent(window, "phx:page-loading-start", {detail: {to: this.href, kind: "error"}}) }
     this.showLoader()
     this.setContainerClasses(...classes)
-    this.execAll(this.binding("disconnected"))
+    this.delayedDisconnected()
+  }
+
+  delayedDisconnected(){
+    this.disconnectedTimer = setTimeout(() => {
+      this.execAll(this.binding("disconnected"))
+    }, DISCONNECTED_TIMEOUT)
   }
 
   wrapPush(callerPush, receives){