feat(apps): ActionManagerBusyState component for apps `ui.interacti…

…on` (#30142)

.changeset/cool-students-tan.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+feat(apps): `ActionManagerBusyState` component for apps `ui.interaction`

apps/meteor/app/ui-message/client/ActionManager.js

@@ -13,7 +13,7 @@ import { t } from '../../utils/lib/i18n';
 
 const UiKitModal = lazy(() => import('../../../client/views/modal/uikit/UiKitModal'));
 
-const events = new Emitter();
+export const events = new Emitter();
 
 export const on = (...args) => {
 	events.on(...args);
@@ -168,6 +168,8 @@ export const handlePayloadUserInteraction = (type, { /* appId,*/ triggerId, ...d
 
 export const triggerAction = async ({ type, actionId, appId, rid, mid, viewId, container, tmid, ...rest }) =>
 	new Promise(async (resolve, reject) => {
+		events.emit('busy', { busy: true });
+
 		const triggerId = generateTriggerId(appId);
 
 		const payload = rest.payload || rest;
@@ -190,6 +192,8 @@ export const triggerAction = async ({ type, actionId, appId, rid, mid, viewId, c
 			} catch (e) {
 				reject(e);
 				return {};
+			} finally {
+				events.emit('busy', { busy: false });
 			}
 		})();
 

apps/meteor/app/ui/client/lib/ChatMessages.ts

@@ -18,6 +18,7 @@ import {
 	setHighlightMessage,
 	clearHighlightMessage,
 } from '../../../../client/views/room/MessageList/providers/messageHighlightSubscription';
+import * as ActionManager from '../../../ui-message/client/ActionManager';
 import { UserAction } from './UserAction';
 
 type DeepWritable<T> = T extends (...args: any) => any
@@ -42,6 +43,8 @@ export class ChatMessages implements ChatAPI {
 
 	public uploads: UploadsAPI;
 
+	public ActionManager: any;
+
 	public userCard: { open(username: string): (event: UIEvent) => void; close(): void };
 
 	public emojiPicker: {
@@ -147,6 +150,7 @@ export class ChatMessages implements ChatAPI {
 		this.uid = params.uid;
 		this.data = createDataAPI({ rid, tmid });
 		this.uploads = createUploadsAPI({ rid, tmid });
+		this.ActionManager = ActionManager;
 
 		const unimplemented = () => {
 			throw new Error('Flow is not implemented');

apps/meteor/client/components/ActionManagerBusyState.tsx

@@ -0,0 +1,37 @@
+import { Box } from '@rocket.chat/fuselage';
+import { useTranslation } from '@rocket.chat/ui-contexts';
+import React, { useEffect, useState } from 'react';
+
+import { useUiKitActionManager } from '../hooks/useUiKitActionManager';
+
+const ActionManagerBusyState = () => {
+	const t = useTranslation();
+	const actionManager = useUiKitActionManager();
+	const [busy, setBusy] = useState(false);
+
+	useEffect(() => {
+		if (!actionManager) {
+			return;
+		}
+
+		actionManager.on('busy', ({ busy }: { busy: boolean }) => setBusy(busy));
+
+		return () => {
+			actionManager.off('busy');
+		};
+	}, [actionManager]);
+
+	if (busy) {
+		return (
+			<Box display='flex' position='fixed' zIndex={99999} justifyContent='center' w='100vw'>
+				<Box bg='tint' p={16} fontSize='p2' elevation='2' borderRadius='0 0 4px 4px'>
+					{t('Loading')}
+				</Box>
+			</Box>
+		);
+	}
+
+	return null;
+};
+
+export default ActionManagerBusyState;

apps/meteor/client/lib/appLayout.tsx

@@ -6,6 +6,7 @@ const ConnectionStatusBar = lazy(() => import('../components/connectionStatus/Co
 const BannerRegion = lazy(() => import('../views/banners/BannerRegion'));
 const PortalsWrapper = lazy(() => import('../views/root/PortalsWrapper'));
 const ModalRegion = lazy(() => import('../views/modal/ModalRegion'));
+const ActionManagerBusyState = lazy(() => import('../components/ActionManagerBusyState'));
 
 type AppLayoutDescriptor = ReactElement | null;
 
@@ -33,6 +34,7 @@ class AppLayoutSubscription extends Emitter<{ update: void }> {
 		return (
 			<>
 				<ConnectionStatusBar />
+				<ActionManagerBusyState />
 				<BannerRegion />
 				{element}
 				<PortalsWrapper />

apps/meteor/client/lib/chats/ChatAPI.ts

@@ -105,7 +105,6 @@ export type UploadsAPI = {
 
 export type ChatAPI = {
 	readonly uid: string | null;
-
 	readonly composer?: ComposerAPI;
 	readonly setComposerAPI: (composer: ComposerAPI) => void;
 	readonly data: DataAPI;
@@ -142,6 +141,8 @@ export type ChatAPI = {
 		performContinuously(action: 'recording' | 'uploading' | 'playing'): void;
 	};
 
+	ActionManager: any;
+
 	readonly flows: {
 		readonly uploadFiles: (files: readonly File[]) => Promise<void>;
 		readonly sendMessage: ({ text, tshow }: { text: string; tshow?: boolean; previewUrls?: string[] }) => Promise<boolean>;

apps/meteor/client/lib/chats/flows/processSlashCommand.ts

@@ -88,12 +88,21 @@ export const processSlashCommand = async (chat: ChatAPI, message: IMessage): Pro
 	} as const;
 
 	try {
+		if (appId) {
+			chat.ActionManager.events.emit('busy', { busy: true });
+		}
+
 		const result = await sdk.call('slashCommand', { cmd: commandName, params, msg: message, triggerId });
+
 		handleResult?.(undefined, result, data);
 	} catch (error: unknown) {
 		await warnUnrecognizedSlashCommand(chat, t('Something_went_wrong_while_executing_command', { command: commandName }));
 		handleResult?.(error, undefined, data);
 	}
 
+	if (appId) {
+		chat.ActionManager.events.emit('busy', { busy: false });
+	}
+
 	return true;
 };