chore: Add missing loading state on `AdminInviteUsers` (#30248)

apps/meteor/client/views/admin/users/AdminInviteUsers.tsx

@@ -10,31 +10,39 @@ import {
 	TextAreaInput,
 } from '@rocket.chat/fuselage';
 import { useTranslation, useRoute } from '@rocket.chat/ui-contexts';
-import type { ReactElement, ChangeEvent, ComponentProps } from 'react';
+import type { ChangeEvent } from 'react';
 import React, { useCallback, useState } from 'react';
 
 import { validateEmail } from '../../../../lib/emailValidator';
-import { ContextualbarScrollableContent, ContextualbarFooter } from '../../../components/Contextualbar';
+import { ContextualbarScrollableContent, ContextualbarFooter, ContextualbarContent } from '../../../components/Contextualbar';
+import { FormSkeleton } from '../../../components/Skeleton';
 import { useSendInvitationEmailMutation } from './hooks/useSendInvitationEmailMutation';
-import { useSmtpConfig } from './hooks/useSmtpConfig';
+import { useSmtpQuery } from './hooks/useSmtpQuery';
 
-type InviteUsersProps = ComponentProps<typeof ContextualbarScrollableContent>;
-
-const InviteUsers = (props: InviteUsersProps): ReactElement => {
+// TODO: Replace using RHF
+const AdminInviteUsers = () => {
 	const t = useTranslation();
 	const [text, setText] = useState('');
 	const getEmails = useCallback((text) => text.split(/[\ ,;]+/i).filter((val: string) => validateEmail(val)), []);
 	const adminRouter = useRoute('admin-settings');
 	const sendInvitationMutation = useSendInvitationEmailMutation();
-	const isSmtpEnabled = useSmtpConfig();
+	const { data, isLoading } = useSmtpQuery();
 
 	const handleClick = () => {
 		sendInvitationMutation.mutate({ emails: getEmails(text) });
 	};
 
-	if (!isSmtpEnabled) {
+	if (isLoading) {
+		return (
+			<ContextualbarContent>
+				<FormSkeleton />
+			</ContextualbarContent>
+		);
+	}
+
+	if (!data?.isSMTPConfigured) {
 		return (
-			<ContextualbarScrollableContent {...props} color='default'>
+			<ContextualbarScrollableContent>
 				<States>
 					<StatesTitle>{t('SMTP_Server_Not_Setup_Title')}</StatesTitle>
 					<StatesSubtitle>{t('SMTP_Server_Not_Setup_Description')}</StatesSubtitle>
@@ -50,7 +58,7 @@ const InviteUsers = (props: InviteUsersProps): ReactElement => {
 
 	return (
 		<>
-			<ContextualbarScrollableContent {...props} color='default'>
+			<ContextualbarScrollableContent>
 				<Box is='h2' fontScale='h2' mb={8}>
 					{t('Send_invitation_email')}
 				</Box>
@@ -70,4 +78,4 @@ const InviteUsers = (props: InviteUsersProps): ReactElement => {
 	);
 };
 
-export default InviteUsers;
+export default AdminInviteUsers;

apps/meteor/client/views/admin/users/AdminUserForm.tsx

@@ -36,7 +36,7 @@ import UserAvatarEditor from '../../../components/avatar/UserAvatarEditor';
 import { useEndpointAction } from '../../../hooks/useEndpointAction';
 import { useUpdateAvatar } from '../../../hooks/useUpdateAvatar';
 import { USER_STATUS_TEXT_MAX_LENGTH, BIO_TEXT_MAX_LENGTH } from '../../../lib/constants';
-import { useSmtpConfig } from './hooks/useSmtpConfig';
+import { useSmtpQuery } from './hooks/useSmtpQuery';
 
 type AdminUserFormProps = {
 	userData?: Serialized<IUser>;
@@ -72,7 +72,8 @@ const UserForm = ({ userData, onReload, ...props }: AdminUserFormProps) => {
 	const defaultRoles = useSetting<string>('Accounts_Registration_Users_Default_Roles') || '';
 
 	const defaultUserRoles = parseCSV(defaultRoles);
-	const isSmtpEnabled = useSmtpConfig();
+	const { data } = useSmtpQuery();
+	const isSmtpEnabled = data?.isSMTPConfigured;
 
 	const eventStats = useEndpointAction('POST', '/v1/statistics.telemetry');
 	const updateUserAction = useEndpoint('POST', '/v1/users.update');

apps/meteor/client/views/admin/users/hooks/useSmtpConfig.ts → apps/meteor/client/views/admin/users/hooks/useSmtpQuery.ts

 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 
-export const useSmtpConfig = () => {
+export const useSmtpQuery = () => {
 	const getSmtpConfig = useEndpoint('GET', '/v1/smtp.check');
-
-	const { data } = useQuery(['smtp.check'], async () => {
-		const smtpConfig = await getSmtpConfig();
-
-		return smtpConfig.isSMTPConfigured;
-	});
-
-	return data;
+	return useQuery(['smtp.check'], async () => getSmtpConfig());
 };