diff --git a/native/chat/toggle-pin-modal.react.js b/native/chat/toggle-pin-modal.react.js
--- a/native/chat/toggle-pin-modal.react.js
+++ b/native/chat/toggle-pin-modal.react.js
@@ -31,6 +31,8 @@
   const { messageInfo, isPinned } = item;
   const styles = useStyles(unboundStyles);
 
+  const [isLoading, setIsLoading] = React.useState(false);
+
   const pinMessageAction = usePinMessageAction();
 
   const modalInfo = React.useMemo(() => {
@@ -41,7 +43,7 @@
         confirmationText:
           'Are you sure you want to remove this pinned message?',
         buttonText: 'Remove Pinned Message',
-        buttonStyle: styles.removePinButton,
+        buttonVariant: 'danger',
       };
     }
 
@@ -53,14 +55,20 @@
         'currently viewing. To unpin a message, select the pinned messages ' +
         'icon in the channel.',
       buttonText: 'Pin Message',
-      buttonStyle: styles.pinButton,
+      buttonVariant: 'enabled',
     };
-  }, [isPinned, styles.pinButton, styles.removePinButton]);
+  }, [isPinned]);
 
-  const onPress = React.useCallback(() => {
-    invariant(messageInfo.id, 'messageInfo.id should be defined');
-    void pinMessageAction(messageInfo.id, threadInfo.id, modalInfo.action);
-    navigation.goBack();
+  const onPress = React.useCallback(async () => {
+    const messageID = messageInfo.id;
+    invariant(messageID, 'messageInfo.id should be defined');
+    setIsLoading(true);
+    try {
+      await pinMessageAction(messageID, threadInfo.id, modalInfo.action);
+      navigation.goBack();
+    } finally {
+      setIsLoading(false);
+    }
   }, [
     pinMessageAction,
     messageInfo.id,
@@ -91,7 +99,7 @@
         <PrimaryButton
           onPress={onPress}
           label={modalInfo.buttonText}
-          variant="enabled"
+          variant={isLoading ? 'loading' : modalInfo.buttonVariant}
         />
         <PrimaryButton onPress={onCancel} label="Cancel" variant="outline" />
       </View>
@@ -121,16 +129,6 @@
     height: 72,
     paddingHorizontal: 16,
   },
-  removePinButton: {
-    borderRadius: 5,
-    height: 48,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'vibrantRedButton',
-  },
-  textColor: {
-    color: 'modalButtonLabel',
-  },
 };
 
 export default TogglePinModal;
diff --git a/web/modals/chat/toggle-pin-modal.css b/web/modals/chat/toggle-pin-modal.css
--- a/web/modals/chat/toggle-pin-modal.css
+++ b/web/modals/chat/toggle-pin-modal.css
@@ -3,3 +3,17 @@
   font-size: small;
   margin-bottom: 24px;
 }
+
+.buttonContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 18.5px;
+}
+
+.buttonTextLoading {
+  visibility: hidden;
+  height: 0;
+  overflow: hidden;
+}
diff --git a/web/modals/chat/toggle-pin-modal.react.js b/web/modals/chat/toggle-pin-modal.react.js
--- a/web/modals/chat/toggle-pin-modal.react.js
+++ b/web/modals/chat/toggle-pin-modal.react.js
@@ -13,6 +13,7 @@
 import css from './toggle-pin-modal.css';
 import Button, { buttonThemes } from '../../components/button.react.js';
 import MessageResult from '../../components/message-result.react.js';
+import LoadingIndicator from '../../loading-indicator.react.js';
 import Modal from '../modal.react.js';
 
 type TogglePinModalProps = {
@@ -25,6 +26,8 @@
   const { isPinned } = item;
   const { popModal } = useModalContext();
 
+  const [isLoading, setIsLoading] = React.useState(false);
+
   const pinMessageAction = usePinMessageAction();
 
   const modalInfo = React.useMemo(() => {
@@ -69,17 +72,22 @@
   const engagementTargetMessageInfo =
     chatMessageItemEngagementTargetMessageInfo(item);
   const engagementTargetMessageID = engagementTargetMessageInfo?.id;
-  const onClick = React.useCallback(() => {
+  const onClick = React.useCallback(async () => {
     invariant(
       engagementTargetMessageID,
       'engagement target messageID should be defined',
     );
-    void pinMessageAction(
-      engagementTargetMessageID,
-      threadInfo.id,
-      modalInfo.action,
-    );
-    popModal();
+    setIsLoading(true);
+    try {
+      await pinMessageAction(
+        engagementTargetMessageID,
+        threadInfo.id,
+        modalInfo.action,
+      );
+      popModal();
+    } finally {
+      setIsLoading(false);
+    }
   }, [
     threadInfo.id,
     modalInfo.action,
@@ -88,17 +96,34 @@
     popModal,
   ]);
 
+  const buttonContent = React.useMemo(() => {
+    if (isLoading) {
+      return (
+        <div className={css.buttonContent}>
+          <span className={css.buttonTextLoading}>{modalInfo.buttonText}</span>
+          <LoadingIndicator status="loading" size="small" />
+        </div>
+      );
+    }
+    return (
+      <div className={css.buttonContent}>
+        <span>{modalInfo.buttonText}</span>
+      </div>
+    );
+  }, [isLoading, modalInfo.buttonText]);
+
   const primaryButton = React.useMemo(
     () => (
       <Button
         variant="filled"
         buttonColor={modalInfo.buttonColor}
         onClick={onClick}
+        disabled={isLoading}
       >
-        {modalInfo.buttonText}
+        {buttonContent}
       </Button>
     ),
-    [modalInfo.buttonColor, modalInfo.buttonText, onClick],
+    [modalInfo.buttonColor, buttonContent, onClick, isLoading],
   );
 
   const secondaryButton = React.useMemo(