Merge branch 'develop' into omnichannel/chats-onHold-action-consolida…

…tion

apps/meteor/client/components/CreateDiscussion/CreateDiscussion.tsx

@@ -224,7 +224,7 @@ const CreateDiscussion = ({ onClose, defaultParentRoom, parentMessageId, nameSug
 			<Modal.Footer>
 				<Modal.FooterControllers>
 					<Button onClick={onClose}>{t('Cancel')}</Button>
-					<Button type='submit' primary disabled={!isDirty || isSubmitting || isValidating}>
+					<Button type='submit' primary disabled={!isDirty} loading={isSubmitting || isValidating}>
 						{t('Create')}
 					</Button>
 				</Modal.FooterControllers>

apps/meteor/client/components/Omnichannel/modals/TranscriptModal.tsx

@@ -31,7 +31,7 @@ const TranscriptModal: FC<TranscriptModalProps> = ({
 		setValue,
 		setFocus,
 		watch,
-		formState: { errors, isValid },
+		formState: { errors, isValid, isSubmitting },
 	} = useForm({
 		defaultValues: { email: emailDefault || '', subject: t('Transcript_of_your_livechat_conversation') },
 	});
@@ -112,12 +112,12 @@ const TranscriptModal: FC<TranscriptModalProps> = ({
 						</Button>
 					)}
 					{roomOpen && !transcriptRequest && (
-						<Button aria-label='request-button' disabled={!canSubmit} primary type='submit'>
+						<Button aria-label='request-button' disabled={!canSubmit} loading={isSubmitting} primary type='submit'>
 							{t('Request')}
 						</Button>
 					)}
 					{!roomOpen && (
-						<Button aria-label='send-button' disabled={!canSubmit} primary type='submit'>
+						<Button aria-label='send-button' disabled={!canSubmit} loading={isSubmitting} primary type='submit'>
 							{t('Send')}
 						</Button>
 					)}

apps/meteor/client/sidebar/header/CreateDirectMessage.tsx

@@ -82,7 +82,7 @@ const CreateDirectMessage = ({ onClose }: { onClose: () => void }) => {
 			<Modal.Footer>
 				<Modal.FooterControllers>
 					<Button onClick={onClose}>{t('Cancel')}</Button>
-					<Button disabled={!isDirty || isSubmitting || isValidating} type='submit' primary>
+					<Button disabled={!isDirty} loading={isSubmitting || isValidating} type='submit' primary>
 						{t('Create')}
 					</Button>
 				</Modal.FooterControllers>

apps/meteor/client/sidebar/header/CreateTeam/CreateTeamModal.tsx

@@ -80,7 +80,7 @@ const CreateTeamModal = ({ onClose }: { onClose: () => void }): ReactElement =>
 		handleSubmit,
 		setValue,
 		watch,
-		formState: { isDirty, errors },
+		formState: { isDirty, errors, isSubmitting },
 	} = useForm<CreateTeamModalInputs>({
 		defaultValues: {
 			isPrivate: true,
@@ -304,7 +304,7 @@ const CreateTeamModal = ({ onClose }: { onClose: () => void }): ReactElement =>
 			<Modal.Footer>
 				<Modal.FooterControllers>
 					<Button onClick={onClose}>{t('Cancel')}</Button>
-					<Button disabled={!isButtonEnabled} type='submit' primary>
+					<Button disabled={!isButtonEnabled} loading={isSubmitting} type='submit' primary>
 						{t('Create')}
 					</Button>
 				</Modal.FooterControllers>

apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationManageServerModal.tsx

@@ -1,16 +1,4 @@
-import {
-	Divider,
-	Modal,
-	ButtonGroup,
-	Button,
-	Field,
-	TextInput,
-	Throbber,
-	FieldLabel,
-	FieldRow,
-	FieldError,
-	FieldHint,
-} from '@rocket.chat/fuselage';
+import { Divider, Modal, ButtonGroup, Button, Field, TextInput, FieldLabel, FieldRow, FieldError, FieldHint } from '@rocket.chat/fuselage';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useSetModal, useTranslation, useEndpoint, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
@@ -88,9 +76,8 @@ const MatrixFederationAddServerModal: VFC<MatrixFederationAddServerModalProps> =
 							}}
 							mie={4}
 						/>
-						<Button onClick={() => addServer()} primary disabled={isLoading}>
-							{!isLoading && t('Add')}
-							{isLoading && <Throbber inheritColor />}
+						<Button onClick={() => addServer()} primary loading={isLoading}>
+							{t('Add')}
 						</Button>
 					</FieldRow>
 					{isError && errorKey && <FieldError>{t(errorKey)}</FieldError>}

apps/meteor/client/views/account/accessibility/AccessibilityPage.tsx

@@ -46,14 +46,15 @@ const AccessibilityPage = () => {
 		[t],
 	);
 
+	const pageFormId = useUniqueId();
 	const fontSizeId = useUniqueId();
 	const mentionsWithSymbolId = useUniqueId();
 	const clockModeId = useUniqueId();
 	const hideUsernamesId = useUniqueId();
 	const hideRolesId = useUniqueId();
 
 	const {
-		formState: { isDirty, dirtyFields },
+		formState: { isDirty, dirtyFields, isSubmitting },
 		handleSubmit,
 		control,
 		reset,
@@ -85,7 +86,7 @@ const AccessibilityPage = () => {
 		<Page>
 			<Page.Header title={t('Accessibility_and_Appearance')} />
 			<Page.ScrollableContentWithShadow>
-				<Box maxWidth='x600' w='full' alignSelf='center' mb={40} mi={36}>
+				<Box is='form' id={pageFormId} onSubmit={handleSubmit(handleSaveData)} maxWidth='x600' w='full' alignSelf='center' mb={40} mi={36}>
 					<Box fontScale='p1' mbe={24}>
 						<Box pb={16}>{t('Accessibility_activation')}</Box>
 					</Box>
@@ -216,7 +217,7 @@ const AccessibilityPage = () => {
 			<Page.Footer isDirty={isDirty}>
 				<ButtonGroup>
 					<Button onClick={() => reset(preferencesValues)}>{t('Cancel')}</Button>
-					<Button primary disabled={!isDirty} onClick={handleSubmit(handleSaveData)}>
+					<Button primary disabled={!isDirty} loading={isSubmitting} form={pageFormId} type='submit'>
 						{t('Save_changes')}
 					</Button>
 				</ButtonGroup>

apps/meteor/client/views/account/profile/AccountProfileForm.tsx

@@ -60,6 +60,7 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 		control,
 		watch,
 		handleSubmit,
+		reset,
 		formState: { errors },
 	} = useFormContext<AccountProfileFormValues>();
 
@@ -126,6 +127,8 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 			dispatchToastMessage({ type: 'success', message: t('Profile_saved_successfully') });
 		} catch (error) {
 			dispatchToastMessage({ type: 'error', message: error });
+		} finally {
+			reset({ email, name, username, statusType, statusText, nickname, bio, customFields });
 		}
 	};
 

apps/meteor/client/views/account/profile/AccountProfilePage.tsx

@@ -43,7 +43,7 @@ const AccountProfilePage = (): ReactElement => {
 
 	const {
 		reset,
-		formState: { isDirty },
+		formState: { isDirty, isSubmitting },
 	} = methods;
 
 	const logoutOtherClients = useEndpoint('POST', '/v1/users.logoutOtherClients');
@@ -120,7 +120,7 @@ const AccountProfilePage = (): ReactElement => {
 						<AccountProfileForm id={profileFormId} />
 					</FormProvider>
 					<ButtonGroup stretch mb={12}>
-						<Button onClick={handleLogoutOtherLocations} flexGrow={0} disabled={loggingOut}>
+						<Button onClick={handleLogoutOtherLocations} flexGrow={0} loading={loggingOut}>
 							{t('Logout_Others')}
 						</Button>
 						{allowDeleteOwnAccount && (
@@ -136,7 +136,14 @@ const AccountProfilePage = (): ReactElement => {
 					<Button disabled={!isDirty} onClick={() => reset(getProfileInitialValues(user))}>
 						{t('Cancel')}
 					</Button>
-					<Button form={profileFormId} data-qa='AccountProfilePageSaveButton' primary disabled={!isDirty || loggingOut} type='submit'>
+					<Button
+						form={profileFormId}
+						data-qa='AccountProfilePageSaveButton'
+						primary
+						disabled={!isDirty || loggingOut}
+						loading={isSubmitting}
+						type='submit'
+					>
 						{t('Save_changes')}
 					</Button>
 				</ButtonGroup>

apps/meteor/client/views/admin/cloud/PasteStep.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Scrollable, Throbber, Modal } from '@rocket.chat/fuselage';
+import { Box, Button, Scrollable, Modal } from '@rocket.chat/fuselage';
 import { useToastMessageDispatch, useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ChangeEvent, FC } from 'react';
 import React, { useState } from 'react';
@@ -70,8 +70,8 @@ const PasteStep: FC<PasteStepProps> = ({ onBackButtonClick, onFinish }) => {
 					<Button disabled={isLoading} onClick={onBackButtonClick}>
 						{t('Back')}
 					</Button>
-					<Button primary disabled={isLoading || !cloudKey.trim()} marginInlineStart='auto' onClick={handleFinishButtonClick}>
-						{isLoading ? <Throbber inheritColor /> : t('Finish_Registration')}
+					<Button primary loading={isLoading} disabled={!cloudKey.trim()} marginInlineStart='auto' onClick={handleFinishButtonClick}>
+						{t('Finish_Registration')}
 					</Button>
 				</Modal.FooterControllers>
 			</Modal.Footer>

apps/meteor/client/views/admin/cloud/modals/RegisterWorkspaceTokenModal.tsx

@@ -89,7 +89,7 @@ const RegisterWorkspaceTokenModal = ({ onClose, onStatusChange, ...props }: Regi
 			<Modal.Footer>
 				<ButtonGroup align='end'>
 					<Button onClick={handleBackAction}>{t('Back')}</Button>
-					<Button primary disabled={processing || !isToken} onClick={handleConnectButtonClick}>
+					<Button primary disabled={!isToken} loading={processing} onClick={handleConnectButtonClick}>
 						{t('Next')}
 					</Button>
 				</ButtonGroup>

apps/meteor/client/views/admin/cloud/modals/RegisteredWorkspaceModal.tsx

@@ -64,7 +64,7 @@ const RegisteredWorkspaceModal = ({ onClose, onStatusChange, ...props }: Registe
 			</Modal.Content>
 			<Modal.Footer>
 				<ButtonGroup align='end'>
-					<Button icon='reload' onClick={handleSyncAction} disabled={isSyncing}>
+					<Button icon='reload' onClick={handleSyncAction} loading={isSyncing}>
 						{t('Sync')}
 					</Button>
 				</ButtonGroup>

apps/meteor/client/views/admin/customEmoji/EditCustomEmojiWithData.tsx

@@ -1,9 +1,10 @@
-import { Box, Button, ButtonGroup, Skeleton, Throbber, InputBox, Callout } from '@rocket.chat/fuselage';
+import { Callout } from '@rocket.chat/fuselage';
 import { useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 import type { FC } from 'react';
 import React, { useMemo } from 'react';
 
+import { FormSkeleton } from '../../../components/Skeleton';
 import EditCustomEmoji from './EditCustomEmoji';
 
 type EditCustomEmojiWithDataProps = {
@@ -24,27 +25,7 @@ const EditCustomEmojiWithData: FC<EditCustomEmojiWithDataProps> = ({ _id, onChan
 	});
 
 	if (isLoading) {
-		return (
-			<Box pb={20}>
-				<Skeleton mbs={8} />
-				<InputBox.Skeleton w='full' />
-				<Skeleton mbs={8} />
-				<InputBox.Skeleton w='full' />
-				<ButtonGroup stretch w='full' mbs={8}>
-					<Button disabled>
-						<Throbber inheritColor />
-					</Button>
-					<Button primary disabled>
-						<Throbber inheritColor />
-					</Button>
-				</ButtonGroup>
-				<ButtonGroup stretch w='full' mbs={8}>
-					<Button danger disabled>
-						<Throbber inheritColor />
-					</Button>
-				</ButtonGroup>
-			</Box>
-		);
+		return <FormSkeleton pi={20} />;
 	}
 
 	if (error || !data || !data.emojis || data.emojis.update.length < 1) {

apps/meteor/client/views/admin/customSounds/EditCustomSound.tsx

@@ -1,9 +1,9 @@
-import { Box, Button, ButtonGroup, Skeleton, Throbber, InputBox } from '@rocket.chat/fuselage';
 import { useEndpoint, useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 import type { ReactElement } from 'react';
 import React from 'react';
 
+import { FormSkeleton } from '../../../components/Skeleton';
 import EditSound from './EditSound';
 
 type EditCustomSoundProps = {
@@ -36,27 +36,7 @@ function EditCustomSound({ _id, onChange, ...props }: EditCustomSoundProps): Rea
 	);
 
 	if (isLoading) {
-		return (
-			<Box pb={20}>
-				<Skeleton mbs={8} />
-				<InputBox.Skeleton w='full' />
-				<Skeleton mbs={8} />
-				<InputBox.Skeleton w='full' />
-				<ButtonGroup stretch w='full' mbs={8}>
-					<Button disabled>
-						<Throbber inheritColor />
-					</Button>
-					<Button primary disabled>
-						<Throbber inheritColor />
-					</Button>
-				</ButtonGroup>
-				<ButtonGroup stretch w='full' mbs={8}>
-					<Button danger disabled>
-						<Throbber inheritColor />
-					</Button>
-				</ButtonGroup>
-			</Box>
-		);
+		return <FormSkeleton pi={20} />;
 	}
 
 	if (!data) {

apps/meteor/client/views/admin/customUserStatus/CustomUserStatusFormWithData.tsx

@@ -1,10 +1,11 @@
 import type { IUserStatus } from '@rocket.chat/core-typings';
-import { Box, Button, ButtonGroup, Skeleton, Throbber, InputBox, Callout } from '@rocket.chat/fuselage';
+import { Box, Callout } from '@rocket.chat/fuselage';
 import { useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 import type { ReactElement } from 'react';
 import React, { useMemo } from 'react';
 
+import { FormSkeleton } from '../../../components/Skeleton';
 import CustomUserStatusForm from './CustomUserStatusForm';
 
 type CustomUserStatusFormWithDataProps = {
@@ -34,27 +35,7 @@ const CustomUserStatusFormWithData = ({ _id, onReload, onClose }: CustomUserStat
 	}
 
 	if (isLoading) {
-		return (
-			<Box p={20}>
-				<Skeleton mbs={8} />
-				<InputBox.Skeleton w='full' />
-				<Skeleton mbs={8} />
-				<InputBox.Skeleton w='full' />
-				<ButtonGroup stretch w='full' mbs={8}>
-					<Button disabled>
-						<Throbber inheritColor />
-					</Button>
-					<Button primary disabled>
-						<Throbber inheritColor />
-					</Button>
-				</ButtonGroup>
-				<ButtonGroup stretch w='full' mbs={8}>
-					<Button danger disabled>
-						<Throbber inheritColor />
-					</Button>
-				</ButtonGroup>
-			</Box>
-		);
+		return <FormSkeleton pi={20} />;
 	}
 
 	if (error || !data || data.count < 1) {

apps/meteor/client/views/admin/import/ImportHistoryPage.tsx

@@ -101,12 +101,20 @@ function ImportHistoryPage() {
 						{t('Import_New_File')}
 					</Button>
 					{hasAnySuccessfulImport && (
-						<Button disabled={isLoading || downloadPendingFilesResult.isLoading} onClick={() => downloadPendingFilesResult.mutate()}>
+						<Button
+							loading={downloadPendingFilesResult.isLoading}
+							disabled={downloadPendingAvatarsResult.isLoading}
+							onClick={() => downloadPendingFilesResult.mutate()}
+						>
 							{t('Download_Pending_Files')}
 						</Button>
 					)}
 					{hasAnySuccessfulImport && (
-						<Button disabled={isLoading || downloadPendingAvatarsResult.isLoading} onClick={() => downloadPendingAvatarsResult.mutate()}>
+						<Button
+							loading={downloadPendingAvatarsResult.isLoading}
+							disabled={downloadPendingFilesResult.isLoading}
+							onClick={() => downloadPendingAvatarsResult.mutate()}
+						>
 							{t('Download_Pending_Avatars')}
 						</Button>
 					)}

apps/meteor/client/views/admin/import/NewImportPage.js

@@ -1,17 +1,4 @@
-import {
-	Box,
-	Button,
-	ButtonGroup,
-	Callout,
-	Chip,
-	Field,
-	Margins,
-	Select,
-	InputBox,
-	TextInput,
-	Throbber,
-	UrlInput,
-} from '@rocket.chat/fuselage';
+import { Box, Button, ButtonGroup, Callout, Chip, Field, Margins, Select, InputBox, TextInput, UrlInput } from '@rocket.chat/fuselage';
 import { useUniqueId, useSafely } from '@rocket.chat/fuselage-hooks';
 import { useToastMessageDispatch, useRouter, useRouteParameter, useSetting, useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useState, useMemo, useEffect } from 'react';
@@ -171,8 +158,8 @@ function NewImportPage() {
 						{t('Back_to_imports')}
 					</Button>
 					{importer && (
-						<Button primary minHeight='x40' disabled={isLoading} onClick={handleImportButtonClick}>
-							{isLoading ? <Throbber inheritColor /> : t('Import')}
+						<Button primary minHeight='x40' loading={isLoading} onClick={handleImportButtonClick}>
+							{t('Import')}
 						</Button>
 					)}
 				</ButtonGroup>