A better Device tab UI experience when there is latency (#2382)

When a tab is clicked, select it straight away, reduce the opacity of
the current tab content by 50%, and when the tab has finished loading,
fade the new content in.


https://github.com/user-attachments/assets/482fc102-ee25-478b-97ba-c343c41b2146

This is using the latency simulator set to 300ms

Author: joshk

assets/ui-rework/app.js

@@ -58,10 +58,26 @@ topbar.config({
   shadowColor: "rgba(0, 0, 0, .3)"
 })
 
-window.addEventListener("phx:page-loading-start", () => {
+window.addEventListener("phx:page-loading-start", info => {
+  if (info.detail.kind == "initial") {
+    document.querySelectorAll(".tab-content").forEach(el => {
+      el.classList.remove("opacity-0")
+    })
+  }
+
+  if (info.detail.kind == "patch") {
+    document.querySelectorAll(".tab-content").forEach(el => {
+      el.classList.add("phx-click-loading")
+    })
+  }
+
   topbar.show(300)
 })
 window.addEventListener("phx:page-loading-stop", () => {
+  document.querySelectorAll(".tab-content").forEach(el => {
+    el.classList.remove("phx-click-loading")
+  })
+
   topbar.hide()
 })
 

lib/nerves_hub_web.ex

@@ -272,6 +272,7 @@ defmodule NervesHubWeb do
     quote do
       use Phoenix.Component
       alias Phoenix.Socket.Broadcast
+      alias Phoenix.LiveView.JS
     end
   end
 

lib/nerves_hub_web/components/device_page/activity_tab.ex

@@ -34,7 +34,11 @@ defmodule NervesHubWeb.Components.DevicePage.ActivityTab do
 
   def render(assigns) do
     ~H"""
-    <div class="h-full flex flex-col items-start justify-between gap-4">
+    <div
+      id="activity-tab"
+      phx-mounted={JS.remove_class("opacity-0")}
+      class="transition-all duration-500 opacity-0 tab-content phx-click-loading:opacity-50 h-full flex flex-col items-start justify-between gap-4"
+    >
       <div class="p-6 w-full">
         <div class="w-full flex flex-col bg-zinc-900 border border-zinc-700 rounded">
           <div class="flex justify-between items-center h-14 px-4 border-b border-zinc-700">

lib/nerves_hub_web/components/device_page/console_tab.ex

@@ -81,7 +81,11 @@ defmodule NervesHubWeb.Components.DevicePage.ConsoleTab do
     assigns = Map.put(assigns, :user_token, token)
 
     ~H"""
-    <div class="size-full">
+    <div
+      id="console-tab"
+      phx-mounted={JS.remove_class("opacity-0")}
+      class="transition-all duration-500 opacity-0 tab-content phx-click-loading:opacity-50 size-full"
+    >
       <div class="flex flex-col size-full items-start justify-between">
         <.async_result :let={online?} assign={@console_active?}>
           <:loading>

lib/nerves_hub_web/components/device_page/details_tab.ex

@@ -74,7 +74,11 @@ defmodule NervesHubWeb.Components.DevicePage.DetailsTab do
     assigns = Map.put(assigns, :auto_refresh_health, !!assigns.health_check_timer)
 
     ~H"""
-    <div class="flex items-start justify-between gap-4 p-6">
+    <div
+      id="details-tab"
+      phx-mounted={JS.remove_class("opacity-0")}
+      class="transition-all duration-500 opacity-0 tab-content phx-click-loading:opacity-50 flex items-start justify-between gap-4 p-6"
+    >
       <div class="w-1/2 flex flex-col gap-4">
         <div :if={!@product.extensions.health || !@device.extensions.health} class="flex flex-col rounded border border-zinc-700 bg-zinc-900 shadow-device-details-content">
           <div class="h-14 pl-4 pr-3 flex items-center justify-between">

lib/nerves_hub_web/components/device_page/health_tab.ex

@@ -90,7 +90,11 @@ defmodule NervesHubWeb.Components.DevicePage.HealthTab do
     assigns = Map.put(assigns, :health_enabled?, health_enabled)
 
     ~H"""
-    <div class="w-full p-6">
+    <div
+      id="health-tab"
+      phx-mounted={JS.remove_class("opacity-0")}
+      class="transition-all duration-500 opacity-0 tab-content phx-click-loading:opacity-50 w-full p-6"
+    >
       <div :if={Enum.any?(@latest_metrics) && @health_enabled?} class="mb-6 w-full flex flex-col bg-zinc-900 border border-zinc-700 rounded">
         <div class="flex flex-col shadow-device-details-content">
           <div class="flex pt-2 px-4 pb-4 gap-2 items-center justify-items-stretch flex-wrap">

lib/nerves_hub_web/components/device_page/local_shell_tab.ex

@@ -64,7 +64,11 @@ defmodule NervesHubWeb.Components.DevicePage.LocalShellTab do
     assigns = Map.put(assigns, :user_token, token)
 
     ~H"""
-    <div class="size-full">
+    <div
+      id="local-shell-tab"
+      phx-mounted={JS.remove_class("opacity-0")}
+      class="transition-all duration-500 opacity-0 tab-content phx-click-loading:opacity-50 size-full"
+    >
       <div class="flex flex-col size-full items-start justify-between">
         <.async_result :let={online?} assign={@local_shell_active?}>
           <:loading>

lib/nerves_hub_web/components/device_page/logs_tab.ex

@@ -121,7 +121,11 @@ defmodule NervesHubWeb.Components.DevicePage.LogsTab do
 
   def render(assigns) do
     ~H"""
-    <div class="size-full bg-[#0e1019] pb-10">
+    <div
+      id="logs-tab"
+      phx-mounted={JS.remove_class("opacity-0")}
+      class="transition-all duration-500 opacity-0 tab-content phx-click-loading:opacity-50 size-full bg-[#0e1019] pb-10"
+    >
       <div :if={!@has_logs} class="size-full flex justify-center items-center p-6 gap-6 text-medium font-mono">
         <div>No logs have been received yet.</div>
       </div>

lib/nerves_hub_web/components/device_page/settings_tab.ex

@@ -31,7 +31,11 @@ defmodule NervesHubWeb.Components.DevicePage.SettingsTab do
     assigns = Map.put(assigns, :device, device)
 
     ~H"""
-    <div class="flex flex-col items-start justify-between gap-4 p-6">
+    <div
+      id="settings-tab"
+      phx-mounted={JS.remove_class("opacity-0")}
+      class="transition-all duration-500 opacity-0 tab-content phx-click-loading:opacity-50 flex flex-col items-start justify-between gap-4 p-6"
+    >
       <.form id="settings-form" for={@settings_form} class="w-full" phx-change="validate-device-settings" phx-submit="update-device-settings">
         <div class="flex flex-col w-full bg-zinc-900 border border-zinc-700 rounded">
           <div class="flex justify-between items-center h-14 px-4 border-b border-zinc-700">

lib/nerves_hub_web/live/devices/show.ex

@@ -392,13 +392,17 @@ defmodule NervesHubWeb.Live.Devices.Show do
     assign(socket, :tab, socket.assigns.live_action || :details)
   end
 
-  # TODO: refactor to use tailwind attributes
-  def tab_classes(tab_selected, tab) do
-    if tab_selected == tab do
-      "px-6 py-2 h-11 font-normal text-sm text-neutral-50 border-b border-indigo-500 bg-tab-selected relative -bottom-px"
-    else
-      "px-6 py-2 h-11 font-normal text-sm text-zinc-300 hover:border-b hover:border-indigo-500 relative -bottom-px"
-    end
+  defp tab(assigns) do
+    ~H"""
+    <.link
+      data-selected={"#{@selected}"}
+      class="px-6 py-2 h-11 font-normal text-sm text-zinc-300 hover:border-b hover:border-indigo-500 data-[selected=true]:text-neutral-50 data-[selected=true]:border-b data-[selected=true]:border-indigo-500 relative -bottom-px"
+      phx-click={JS.set_attribute({"data-selected", "false"}, to: "#tabs a") |> JS.set_attribute({"data-selected", "true"})}
+      patch={@path}
+    >
+      {@display}
+    </.link>
+    """
   end
 
   defp health_polling_seconds() do