✨ Loading state for acknowledge button

sequinstream · Jan 2, 2025 · abe0446 · abe0446
1 parent 47ecda2
commit abe0446
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 31 deletions.
diff --git a/assets/svelte/consumers/ShowMessages.svelte b/assets/svelte/consumers/ShowMessages.svelte
@@ -11,6 +11,7 @@
     Pause,
     RefreshCw,
     RotateCw,
+    Check,
   } from "lucide-svelte";
   import { slide, fade } from "svelte/transition";
 
@@ -21,12 +22,12 @@
   export let live;
   export let paused: boolean = false;
   export let showAcked: boolean = true;
-  export let consumerType = null;
+  export let consumer: { type: string };
 
   let page: number = 0;
   let loading = false;
   let selectedMessage = null;
-  let alreadyAcked = false;
+  let selectedMessageAcked = false;
   let isDrawerOpen = false;
   let messageData = null;
   let messageDataError = null;
@@ -42,6 +43,9 @@
   let totalAvailableHeight = 0;
   let resettingMessageVisibility = false;
 
+  // Add this new state variable near the top with other state variables
+  let isAcknowledging = false;
+
   onMount(() => {
     // Calculate row height after the component is mounted
     const sampleRow = document.querySelector("tr.sample-row");
@@ -152,9 +156,11 @@
   function openDrawer(message) {
     selectedMessage = message;
 
-    alreadyAcked =
-      message.state === "acknowledged" ||
-      (message.state === "delivered" && consumerType !== "sequin_stream");
+    selectedMessageAcked =
+      selectedMessage?.state === "acknowledged" ||
+      (selectedMessage?.state === "delivered" &&
+        consumer.type !== "sequin_stream");
+
     isDrawerOpen = true;
     messageData = null;
     messageDataError = null;
@@ -195,6 +201,7 @@
   function closeDrawer() {
     isDrawerOpen = false;
     selectedMessage = null;
+    selectedMessageAcked = false;
     messageData = null;
     messageDataError = null;
     resettingMessageVisibility = false;
@@ -272,21 +279,24 @@
         } else {
           // Optionally, update the message state locally or refresh the drawer
           selectedMessage = reply.updated_message;
-          alreadyAcked = false;
           refreshLogs();
         }
       },
     );
   }
 
   function acknowledgeMessage(ackId) {
+    isAcknowledging = true;
     live.pushEvent("acknowledge_message", { ack_id: ackId }, (reply) => {
-      if (reply.error) {
-        // Handle error (e.g., show a toast notification)
-        console.error("Failed to acknowledge:", reply.error);
-      }
+      isAcknowledging = false;
       if (reply.ok) {
-        selectedMessage = reply.updated_message;
+        selectedMessageAcked = true;
+
+        if (reply.updated_message) {
+          selectedMessage = reply.updated_message;
+        }
+
+        refreshLogs();
       }
     });
   }
@@ -596,27 +606,32 @@
                     <h3 class="text-lg font-semibold mb-2">Acknowledge</h3>
                     <div class="bg-gray-50 p-4 rounded-lg space-y-4">
                       <p class="text-sm text-gray-700">
-                        {#if alreadyAcked}
+                        {#if selectedMessageAcked}
                           This message has been acknowledged.
                         {:else}
                           Acknowledge this message to remove it from the sink's
                           delivery queue.
                         {/if}
                       </p>
 
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        on:click={() => {
-                          acknowledgeMessage(selectedMessage.ack_id);
-                          alreadyAcked = true;
-                        }}
-                        class="flex items-center space-x-2"
-                        hidden={alreadyAcked}
-                      >
-                        <RotateCw class="h-4 w-4" />
-                        <span>Acknowledge</span>
-                      </Button>
+                      {#if !selectedMessageAcked}
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          on:click={() => {
+                            acknowledgeMessage(selectedMessage.ack_id);
+                          }}
+                          disabled={isAcknowledging}
+                          class="flex items-center space-x-2"
+                        >
+                          {#if isAcknowledging}
+                            <Loader2 class="h-4 w-4 animate-spin" />
+                          {:else}
+                            <Check class="h-4 w-4" />
+                          {/if}
+                          <span>Acknowledge</span>
+                        </Button>
+                      {/if}
                     </div>
                   </div>
 

diff --git a/lib/sequin/consumers/acknowledged_messages/acknowledged_messages.ex b/lib/sequin/consumers/acknowledged_messages/acknowledged_messages.ex
@@ -68,7 +68,7 @@ defmodule Sequin.Consumers.AcknowledgedMessages do
     end
   end
 
-  defp to_acknowledged_message(%ConsumerRecord{} = record) do
+  def to_acknowledged_message(%ConsumerRecord{} = record) do
     %AcknowledgedMessage{
       id: record.id,
       consumer_id: record.consumer_id,
@@ -84,7 +84,7 @@ defmodule Sequin.Consumers.AcknowledgedMessages do
     }
   end
 
-  defp to_acknowledged_message(%ConsumerEvent{} = event) do
+  def to_acknowledged_message(%ConsumerEvent{} = event) do
     %AcknowledgedMessage{
       id: event.id,
       consumer_id: event.consumer_id,

diff --git a/lib/sequin_web/live/sink_consumers/show.ex b/lib/sequin_web/live/sink_consumers/show.ex
@@ -171,7 +171,6 @@ defmodule SequinWeb.SinkConsumersLive.Show do
               props={
                 %{
                   consumer: encode_consumer(@consumer),
-                  consumerType: @consumer.type,
                   messages: encode_messages(@consumer, @messages),
                   totalCount: @total_count,
                   pageSize: @page_size,
@@ -306,10 +305,20 @@ defmodule SequinWeb.SinkConsumersLive.Show do
   def handle_event("acknowledge_message", %{"ack_id" => ack_id}, socket) do
     consumer = socket.assigns.consumer
     Consumers.ack_messages(consumer, [ack_id])
-    updated_socket = load_consumer_messages(socket)
 
-    updated_message = Enum.find(socket.assigns.messages, &(&1.ack_id == ack_id))
-    {:reply, %{ok: true, updated_message: encode_message(consumer, updated_message)}, updated_socket}
+    updated_socket =
+      socket
+      |> load_consumer_messages()
+      |> put_flash(:toast, %{kind: :success, title: "Message acknowledged"})
+
+    case Enum.find(socket.assigns.messages, &(&1.ack_id == ack_id)) do
+      nil ->
+        {:reply, %{ok: true}, updated_socket}
+
+      message ->
+        message = AcknowledgedMessages.to_acknowledged_message(message)
+        {:reply, %{ok: true, updated_message: encode_message(consumer, message)}, updated_socket}
+    end
   end
 
   def handle_event("update_page_size", %{"page_size" => page_size}, socket) when page_size < 0 do
@@ -483,6 +492,7 @@ defmodule SequinWeb.SinkConsumersLive.Show do
       id: consumer.id,
       name: consumer.name,
       kind: :push,
+      type: consumer.type,
       status: consumer.status,
       message_kind: consumer.message_kind,
       ack_wait_ms: consumer.ack_wait_ms,