Show connection status flash

assets/js/app.js

@@ -183,6 +183,8 @@ window.addEventListener("phx:page-loading-stop", info => topbar.hide())
 window.addEventListener("js:exec", e => e.target[e.detail.call](...e.detail.args))
 
 // connect if there are any LiveViews on the page
+liveSocket.getSocket().onOpen(() => execJS("#connection-status", "js-hide"))
+liveSocket.getSocket().onError(() => execJS("#connection-status", "js-show"))
 liveSocket.connect()
 
 // expose liveSocket on window for web console debug logs and latency simulation:

lib/live_beats_web/live/live_helpers.ex

@@ -16,12 +16,37 @@ defmodule LiveBeatsWeb.LiveHelpers do
     Routes.song_index_path(LiveBeatsWeb.Endpoint, :index, profile.username)
   end
 
+  def connection_status(assigns) do
+    ~H"""
+    <div
+      id="connection-status"
+      class="hidden rounded-md bg-red-50 p-4 fixed top-1 right-1 w-96 fade-in-scale"
+      js-show={show("#connection-status")}
+      js-hide={hide("#connection-status")}
+    >
+      <div class="flex">
+        <div class="flex-shrink-0">
+          <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-red-800" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+        </div>
+        <div class="ml-3">
+          <p class="text-sm font-medium text-red-800">
+            <%= render_slot(@inner_block) %>
+          </p>
+        </div>
+      </div>
+    </div>
+    """
+  end
+
   def flash(%{kind: :error} = assigns) do
     ~H"""
     <%= if live_flash(@flash, @kind) do %>
       <div
         id="flash"
-        class="rounded-md bg-green-50 p-4 top-0 right-0 w-96 fade-in-scale"
+        class="rounded-md bg-red-50 p-4 fixed top-1 right-1 w-96 fade-in-scale"
         phx-click={JS.push("lv:clear-flash") |> JS.remove_class("fade-in-scale", to: "#flash") |> hide("#flash")}
         phx-value-key="error"
         phx-hook="Flash"
@@ -154,6 +179,17 @@ defmodule LiveBeatsWeb.LiveHelpers do
     )
   end
 
+  def show(js \\ %JS{}, selector) do
+    JS.show(js,
+      to: selector,
+      time: 300,
+      display: "inline-block",
+      transition:
+        {"ease-out duration-300", "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+         "opacity-100 translate-y-0 sm:scale-100"}
+    )
+  end
+
   def hide(js \\ %JS{}, selector) do
     JS.hide(js,
       to: selector,

lib/live_beats_web/templates/layout/live.html.heex

@@ -144,6 +144,9 @@
 
     <.flash flash={@flash} kind={:info}/>
     <.flash flash={@flash} kind={:error}/>
+    <.connection_status>
+      Re-establishing connection...
+    </.connection_status>
 
     <%= @inner_content %>
   </main>