From 1151b7246758d9d4b8d642c7313d5f1cf6e9c62d Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Thu, 10 Jul 2025 15:06:21 -0600
Subject: [PATCH] Update slack integrations

---
 .../integrations/SlackIntegrations.tsx         | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/features/integrations/SlackIntegrations.tsx b/apps/web/src/components/features/integrations/SlackIntegrations.tsx
index 7c2979d07..509ab3b09 100644
--- a/apps/web/src/components/features/integrations/SlackIntegrations.tsx
+++ b/apps/web/src/components/features/integrations/SlackIntegrations.tsx
@@ -15,8 +15,8 @@ import {
 import { Dropdown, type DropdownItems } from '@/components/ui/dropdown';
 import { LinkSlash, Refresh2 } from '@/components/ui/icons';
 import { Select } from '@/components/ui/select';
-import { StatusCard } from '@/components/ui/card/StatusCard';
 import { useMemoizedFn } from '@/hooks';
+import { StatusCard } from '@/components/ui/card/StatusCard';
 
 export const SlackIntegrations = React.memo(() => {
   const {
@@ -112,6 +112,7 @@ const ConnectedSlackChannels = React.memo(() => {
   const {
     data: slackChannelsData,
     isLoading: isLoadingSlackChannels,
+    isRefetching: isRefetchingSlackChannels,
     refetch: refetchSlackChannels,
     isFetched: isFetchedSlackChannels,
     error: slackChannelsError
@@ -136,10 +137,13 @@ const ConnectedSlackChannels = React.memo(() => {
     });
   });
 
+  const showLoadingButton =
+    isLoadingSlackChannels || isLoadingSlackIntegration || isRefetchingSlackChannels;
+
   return (
     <div className="flex items-center justify-between space-x-4">
       <div className="flex flex-col space-y-0.5">
-        <Text>Alerts channels</Text>
+        <Text>Alerts channel</Text>
         <Text variant="secondary" size={'xs'}>
           Select which slack channel Buster should send alerts to
         </Text>
@@ -151,7 +155,14 @@ const ConnectedSlackChannels = React.memo(() => {
               <Button
                 size={'tall'}
                 variant="ghost"
-                suffix={<Refresh2 />}
+                loading={showLoadingButton}
+                suffix={
+                  !showLoadingButton && (
+                    <span className="flex items-center justify-center text-base">
+                      <Refresh2 />
+                    </span>
+                  )
+                }
                 onClick={() => refetchSlackChannels()}>
                 Refresh
               </Button>
@@ -163,6 +174,7 @@ const ConnectedSlackChannels = React.memo(() => {
               placeholder="Select a channel"
               value={selectedChannelId}
               onChange={onChange}
+              search={true}
               loading={isLoadingSlackChannels || isLoadingSlackIntegration}
             />
           </>