From 23193c5c98e41cc73250c4567f2558ee6f8943fb Mon Sep 17 00:00:00 2001
From: kunish <kunish.butt@gmail.com>
Date: Fri, 11 Oct 2024 02:23:33 +0800
Subject: [PATCH] feat(connections): add isClosingConnections spinner

---
 src/pages/Connections.tsx | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/pages/Connections.tsx b/src/pages/Connections.tsx
index ad24d13..b55075e 100644
--- a/src/pages/Connections.tsx
+++ b/src/pages/Connections.tsx
@@ -89,6 +89,7 @@ export default () => {
   const [activeTab, setActiveTab] = createSignal(ActiveTab.activeConnections)
   const { activeConnections, closedConnections, paused, setPaused } =
     useConnections()
+  const [isClosingConnections, setIsClosingConnections] = createSignal(false)
 
   const [globalFilter, setGlobalFilter] = createSignal('')
   const [enableQuickFilter, setEnableQuickFilter] = makePersisted(
@@ -429,18 +430,30 @@ export default () => {
 
             <Button
               class="btn btn-primary join-item btn-sm"
-              onClick={() => {
+              onClick={async () => {
+                setIsClosingConnections(true)
+
                 if (table.getState().globalFilter) {
-                  table
-                    .getFilteredRowModel()
-                    .rows.forEach(({ original }) =>
-                      closeSingleConnectionAPI(original.id),
-                    )
+                  await Promise.allSettled(
+                    table
+                      .getFilteredRowModel()
+                      .rows.map(({ original }) =>
+                        closeSingleConnectionAPI(original.id),
+                      ),
+                  )
                 } else {
-                  closeAllConnectionsAPI()
+                  await closeAllConnectionsAPI()
                 }
+
+                setIsClosingConnections(false)
               }}
-              icon={<IconX />}
+              icon={
+                isClosingConnections() ? (
+                  <div class="loading loading-spinner" />
+                ) : (
+                  <IconX />
+                )
+              }
             />
 
             <Button