Page MenuHomePhorge
Files F33496833

D15511.1769054374.diff
No OneTemporary
Actions

Size
4 KB
Referenced Files
None
Subscribers
None

D15511.1769054374.diff
View Options

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,6 +43,7 @@
confirmationText:
'Are you sure you want to remove this pinned message?',
buttonText: 'Remove Pinned Message',
+ buttonVariant: 'danger',
};
}
@@ -52,13 +55,20 @@
'currently viewing. To unpin a message, select the pinned messages ' +
'icon in the channel.',
buttonText: 'Pin Message',
+ buttonVariant: 'enabled',
};
}, [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,
@@ -89,7 +99,7 @@
<PrimaryButton
onPress={onPress}
label={modalInfo.buttonText}
- variant="enabled"
+ variant={isLoading ? 'loading' : modalInfo.buttonVariant}
/>
<PrimaryButton onPress={onCancel} label="Cancel" variant="outline" />
</View>
@@ -119,9 +129,6 @@
height: 72,
paddingHorizontal: 16,
},
- 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(

File Metadata

Mime Type
text/plain
Expires
Thu, Jan 22, 3:59 AM (7 h, 5 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5972935
Default Alt Text
D15511.1769054374.diff (4 KB)

Event Timeline