Delaying LiveView.JS commands (avoid quick flash of "Trying to reconnect")

Phoenix Forum Questions / Help
, ,
5

I found a simpler solution that seems to work as intended. It consists of simply adding animation-delay to the appropriate element permanently and unrelated to the transition classes used in show/2, no JavaScript involved.

  1. Update the CoreComponents.flash/1 component to take extra classes:
   attr :kind, :atom, values: [:info, :error], doc: "used for styling and flash lookup"
+
+  attr :extra_classes, :string,
+    default: nil,
+    doc: "the extra CSS classes to add to the flash container"
+
   attr :rest, :global, doc: "the arbitrary HTML attributes to add to the flash container"

       class={[
         "fixed top-2 right-2 mr-2 w-80 sm:w-96 z-50 rounded-lg p-3 ring-1",
         @kind == :info && "bg-emerald-50 text-emerald-800 ring-emerald-500 fill-cyan-900",
-        @kind == :error && "bg-rose-50 text-rose-900 shadow-md ring-rose-500 fill-rose-900"
+        @kind == :error && "bg-rose-50 text-rose-900 shadow-md ring-rose-500 fill-rose-900",
+        @extra_classes
       ]}
       {@rest}
     >
  1. Update only the client-error flash in CoreComponents.flash_group/1:
         id="client-error"
         kind={:error}
         title="We can't find the internet"
+        extra_classes="delay-[3s]"
         phx-disconnected={show(".phx-client-error #client-error")}
         phx-connected={hide("#client-error")}
         hidden
12 Likes