Enhancement: added status dot for indicating that assigns are loading

assets/app/styles/themes/dark.css

@@ -90,5 +90,9 @@
     --diff-pulse-text: var(--gray-900);
     --diff-negative-bg: var(--red-900);
     --diff-positive-bg: rgb(from var(--swm-green-100) r g b / 0.3);
+
+    --status-dot-success-bg: var(--swm-green-100);
+    --status-dot-warning-bg: var(--swm-yellow-100);
+    --status-dot-error-bg: var(--swm-pink-100);
   }
 }

assets/app/styles/themes/light.css

@@ -89,4 +89,8 @@
   --diff-pulse-text: var(--slate-900);
   --diff-negative-bg: var(--red-300);
   --diff-positive-bg: var(--swm-green-60);
+
+  --status-dot-success-bg: var(--swm-green-100);
+  --status-dot-warning-bg: var(--swm-yellow-100);
+  --status-dot-error-bg: var(--swm-pink-100);
 }

assets/app/tailwind.config.js

@@ -69,6 +69,9 @@ module.exports = {
         'diff-border': 'var(--diff-border)',
         'diff-negative-bg': 'var(--diff-negative-bg)',
         'diff-positive-bg': 'var(--diff-positive-bg)',
+        'status-dot-success-bg': 'var(--status-dot-success-bg)',
+        'status-dot-warning-bg': 'var(--status-dot-warning-bg)',
+        'status-dot-error-bg': 'var(--status-dot-error-bg)',
       },
       screens: { xs: '380px' },
       fontFamily: {

lib/live_debugger/app/debugger/node_state/web/components.ex

@@ -33,6 +33,7 @@ defmodule LiveDebugger.App.Debugger.NodeState.Web.Components do
   attr(:assigns_sizes, AsyncResult, required: true)
   attr(:assigns_search_phrase, :string, default: "")
   attr(:pinned_assigns, :map, default: %{})
+  attr(:node_assigns_loading_status, :list, required: true)
 
   def assigns_section(assigns) do
     opened_term_node =
@@ -42,7 +43,15 @@ defmodule LiveDebugger.App.Debugger.NodeState.Web.Components do
 
     ~H"""
     <div id="assigns-section-container" phx-hook="AssignsBodySearchHighlight">
-      <.section id="assigns" class="h-max overflow-y-hidden" title="Assigns">
+      <.section id="assigns" class="h-max overflow-y-hidden" title="Assigns" title_class="!min-w-18">
+        <:title_sub_panel>
+          <.status_dot
+            status={status_dot_status(@node_assigns_loading_status)}
+            pulse?={status_dot_pulse?(@node_assigns_loading_status)}
+            tooltip={status_dot_tooltip(@node_assigns_loading_status)}
+          />
+        </:title_sub_panel>
+
         <:right_panel>
           <div class="flex gap-2">
             <AssignsSearch.render
@@ -59,16 +68,18 @@ defmodule LiveDebugger.App.Debugger.NodeState.Web.Components do
           class="w-full h-max max-h-full overflow-y-auto"
           data-search_phrase={@assigns_search_phrase}
         >
-          <div id="pinned-assigns" class="p-4 border-b border-default-border">
+          <div id="pinned-assigns" class="p-4 border-b border-default-border overflow-x-auto">
             <.pinned_assigns_section
               id="pinned-"
               term_node={@term_node}
               pinned_assigns={@pinned_assigns}
             />
           </div>
-          <div id="all-assigns" class="p-4 relative">
+          <div id="all-assigns" class="relative">
             <.assigns_sizes_section assigns_sizes={@assigns_sizes} id="display-container-size-label" />
-            <ElixirDisplay.static_term id="assigns-" node={@term_node} selectable_level={1} />
+            <div class="p-4 overflow-x-auto">
+              <ElixirDisplay.static_term id="assigns-" node={@term_node} selectable_level={1} />
+            </div>
           </div>
         </div>
       </.section>
@@ -80,16 +91,18 @@ defmodule LiveDebugger.App.Debugger.NodeState.Web.Components do
           />
         </:search_bar_slot>
         <div id="assigns-display-fullscreen-container" data-search_phrase={@assigns_search_phrase}>
-          <div class="p-4 border-b border-default-border">
+          <div class="p-4 border-b border-default-border overflow-x-auto">
             <.pinned_assigns_section
               id="pinned-fullscreen-"
               term_node={@term_node}
               pinned_assigns={@pinned_assigns}
             />
           </div>
-          <div class="p-4 relative">
+          <div class="relative">
             <.assigns_sizes_section assigns_sizes={@assigns_sizes} id="display-fullscreen-size-label" />
-            <ElixirDisplay.static_term id="fullscreen-" node={@term_node} selectable_level={1} />
+            <div class="p-4 overflow-x-auto">
+              <ElixirDisplay.static_term id="fullscreen-" node={@term_node} selectable_level={1} />
+            </div>
           </div>
         </div>
       </.fullscreen>
@@ -111,7 +124,7 @@ defmodule LiveDebugger.App.Debugger.NodeState.Web.Components do
       :if={pinned}
       class="flex min-h-4.5 [&>div>button]:hidden hover:[&>div>button]:block"
     >
-      <div class="w-4">
+      <div class="w-4 shrink-0">
         <button
           class="text-button-red-content hover:text-button-red-content-hover"
           phx-click="unpin-assign"
@@ -209,4 +222,39 @@ defmodule LiveDebugger.App.Debugger.NodeState.Web.Components do
     </div>
     """
   end
+
+  attr(:status, :atom, required: true)
+  attr(:pulse?, :boolean, default: false)
+  attr(:tooltip, :string, required: true)
+
+  defp status_dot(assigns) do
+    assigns =
+      case assigns.status do
+        :success -> assign(assigns, :bg_class, "bg-status-dot-success-bg")
+        :warning -> assign(assigns, :bg_class, "bg-status-dot-warning-bg")
+        :error -> assign(assigns, :bg_class, "bg-status-dot-error-bg")
+      end
+
+    ~H"""
+    <.tooltip id="loading-dot-tooltip" content={@tooltip}>
+      <span class="relative flex size-2">
+        <span
+          :if={@pulse?}
+          class={"absolute inline-flex h-full w-full animate-ping rounded-full #{@bg_class} opacity-75"}
+        >
+        </span>
+        <span class={"relative inline-flex size-2 rounded-full #{@bg_class}"}></span>
+      </span>
+    </.tooltip>
+    """
+  end
+
+  defp status_dot_status(stage: :update), do: :warning
+  defp status_dot_status(_), do: :success
+
+  defp status_dot_pulse?(stage: :update), do: true
+  defp status_dot_pulse?(_), do: false
+
+  defp status_dot_tooltip(stage: :update), do: "Updating assigns..."
+  defp status_dot_tooltip(_), do: "Assigns are up to date."
 end

lib/live_debugger/app/debugger/node_state/web/hooks/node_assigns.ex

@@ -30,8 +30,8 @@ defmodule LiveDebugger.App.Debugger.NodeState.Web.Hooks.NodeAssigns do
     |> attach_hook(:node_assigns, :handle_async, &handle_async/3)
     |> attach_hook(:node_assigns, :handle_event, &handle_event/3)
     |> register_hook(:node_assigns)
-    |> assign(:node_assigns_info, AsyncResult.loading())
-    |> assign(:assigns_sizes, AsyncResult.loading())
+    |> assign(:node_assigns_info, AsyncResult.loading(stage: :init))
+    |> assign(:assigns_sizes, AsyncResult.loading(stage: :init))
     |> assign(:pinned_assigns, %{})
     |> put_private(:pulse_cleared?, true)
     |> assign_async_node_assigns()
@@ -55,16 +55,16 @@ defmodule LiveDebugger.App.Debugger.NodeState.Web.Hooks.NodeAssigns do
       when not is_nil(node_id) do
     node_assigns_info =
       if Keyword.get(opts, :reset, false) do
-        AsyncResult.loading()
+        AsyncResult.loading(stage: :initial)
       else
-        socket.assigns.node_assigns_info
+        AsyncResult.loading(socket.assigns.node_assigns_info, stage: :update)
       end
 
     assigns_sizes =
       if Keyword.get(opts, :reset, false) do
-        AsyncResult.loading()
+        AsyncResult.loading(stage: :initial)
       else
-        socket.assigns.assigns_sizes
+        AsyncResult.loading(socket.assigns.assigns_sizes, stage: :update)
       end
 
     socket

lib/live_debugger/app/debugger/node_state/web/node_state_live.ex

@@ -89,6 +89,7 @@ defmodule LiveDebugger.App.Debugger.NodeState.Web.NodeStateLive do
           assigns_sizes={@assigns_sizes}
           pinned_assigns={@pinned_assigns}
           assigns_search_phrase={@assigns_search_phrase}
+          node_assigns_loading_status={@node_assigns_info.loading}
         />
         <HookComponents.AssignsHistory.render
           current_history_index={@current_history_index}

lib/live_debugger/app/web/components.ex

@@ -288,9 +288,11 @@ defmodule LiveDebugger.App.Web.Components do
   attr(:id, :string, required: true)
   attr(:title, :string, required: true)
   attr(:class, :any, default: nil)
+  attr(:title_class, :any, default: nil)
   attr(:inner_class, :any, default: nil)
 
   slot(:right_panel)
+  slot(:title_sub_panel)
   slot(:inner_block)
 
   def section(assigns) do
@@ -304,7 +306,13 @@ defmodule LiveDebugger.App.Web.Components do
     >
       <div class="pl-4 flex items-center h-12 p-2 border-b border-default-border">
         <div class="flex justify-between items-center w-full gap-2">
-          <div class="font-medium text-sm min-w-26"><%= @title %></div>
+          <div class={[
+            "font-medium text-sm min-w-26 flex items-center gap-2"
+            | List.wrap(@title_class)
+          ]}>
+            <p><%= @title %></p>
+            <%= render_slot(@title_sub_panel) %>
+          </div>
           <div class="w-max">
             <%= render_slot(@right_panel) %>
           </div>