fix: Missing padding on Omnichannel contacts Contextualbar loading …

…state (#29379)
RocketChat · Aug 25, 2023 · c536a4a · c536a4a
1 parent 81c4d9f
commit c536a4a
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/.changeset/wet-frogs-kiss.md b/.changeset/wet-frogs-kiss.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+fix: Missing padding on Omnichannel contacts Contextualbar loading state
diff --git a/apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactEditWithData.js b/apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactEditWithData.js
@@ -1,4 +1,4 @@
-import { Box } from '@rocket.chat/fuselage';
+import { Box, ContextualbarContent } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useMemo } from 'react';
 
@@ -16,7 +16,11 @@ function ContactEditWithData({ id, close }) {
 	} = useEndpointData('/v1/omnichannel/contact', { params: useMemo(() => ({ contactId: id }), [id]) });
 
 	if ([state].includes(AsyncStatePhase.LOADING)) {
-		return <FormSkeleton />;
+		return (
+			<ContextualbarContent>
+				<FormSkeleton />
+			</ContextualbarContent>
+		);
 	}
 
 	if (error || !data || !data.contact) {

diff --git a/apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactNewEdit.tsx b/apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactNewEdit.tsx
@@ -1,5 +1,5 @@
 import type { ILivechatVisitor, Serialized } from '@rocket.chat/core-typings';
-import { Field, TextInput, ButtonGroup, Button } from '@rocket.chat/fuselage';
+import { Field, TextInput, ButtonGroup, Button, ContextualbarContent } from '@rocket.chat/fuselage';
 import { CustomFieldsForm } from '@rocket.chat/ui-client';
 import { useToastMessageDispatch, useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
 import { useQueryClient } from '@tanstack/react-query';
@@ -178,7 +178,11 @@ const ContactNewEdit = ({ id, data, close }: ContactNewEditProps): ReactElement
 	};
 
 	if (isLoadingCustomFields) {
-		return <FormSkeleton />;
+		return (
+			<ContextualbarContent>
+				<FormSkeleton />
+			</ContextualbarContent>
+		);
 	}
 
 	return (