Help Center: Add spinner while loading chat conversation (#96191)

* Add spinner while loading chat conversation * Fix typo * Move spinner up * Refactor loading spinner logic in MessagesContainer component * Refactor chat loading logic in MessagesContainer component --------- Co-authored-by: Anthony Grullon <agrullon95@gmail.com>
Automattic · Nov 8, 2024 · 689bdc8 · 689bdc8
1 parent b743e78
commit 689bdc8
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 38 deletions.
diff --git a/packages/odie-client/src/components/message/messages-container.tsx b/packages/odie-client/src/components/message/messages-container.tsx
@@ -1,5 +1,6 @@
 import { getShortDateString } from '@automattic/i18n-utils';
-import { useRef } from 'react';
+import { Spinner } from '@wordpress/components';
+import { useEffect, useRef, useState } from 'react';
 import { ThumbsDown } from '../../assets/thumbs-down';
 import { useOdieAssistantContext } from '../../context';
 import { useAutoScroll, useZendeskMessageListener } from '../../hooks';
@@ -17,6 +18,13 @@ const DislikeThumb = () => {
 		</div>
 	);
 };
+const LoadingChatSpinner = () => {
+	return (
+		<div className="chatbox-loading-chat__spinner">
+			<Spinner />
+		</div>
+	);
+};
 
 const ChatDate = ( { chat }: { chat: Chat } ) => {
 	// chat.messages[ 1 ] contains the first user interaction, therefore the date, otherwise the current date.
@@ -31,10 +39,16 @@ interface ChatMessagesProps {
 
 export const MessagesContainer = ( { currentUser }: ChatMessagesProps ) => {
 	const { chat, shouldUseHelpCenterExperience, botNameSlug } = useOdieAssistantContext();
-
+	const [ chatMessagesLoaded, setChatLoaded ] = useState( false );
 	const messagesContainerRef = useRef< HTMLDivElement >( null );
 	useZendeskMessageListener();
 	useAutoScroll( messagesContainerRef );
+	useEffect( () => {
+		chat?.status === 'loaded' && setChatLoaded( true );
+	}, [ chat ] );
+
+	const shouldLoadChat: boolean =
+		! shouldUseHelpCenterExperience || ( shouldUseHelpCenterExperience && chatMessagesLoaded );
 
 	// Used to apply the correct styling on messages
 	const isNextMessageFromSameSender = ( currentMessage: string, nextMessage: string ) => {
@@ -45,32 +59,38 @@ export const MessagesContainer = ( { currentUser }: ChatMessagesProps ) => {
 		<>
 			<div className="chatbox-messages" ref={ messagesContainerRef }>
 				{ shouldUseHelpCenterExperience && <ChatDate chat={ chat } /> }
-				<ChatMessage
-					message={ getOdieInitialMessage( botNameSlug, shouldUseHelpCenterExperience ) }
-					key={ 0 }
-					currentUser={ currentUser }
-					isNextMessageFromSameSender={ false }
-					displayChatWithSupportLabel={ false }
-				/>
-				{ chat.messages.map( ( message, index ) => (
-					<ChatMessage
-						message={ message }
-						key={ index }
-						currentUser={ currentUser }
-						isNextMessageFromSameSender={ isNextMessageFromSameSender(
-							message.role,
-							chat.messages[ index + 1 ]?.role
+				{ ! shouldLoadChat ? (
+					<LoadingChatSpinner />
+				) : (
+					<>
+						<ChatMessage
+							message={ getOdieInitialMessage( botNameSlug, shouldUseHelpCenterExperience ) }
+							key={ 0 }
+							currentUser={ currentUser }
+							isNextMessageFromSameSender={ false }
+							displayChatWithSupportLabel={ false }
+						/>
+						{ chat.messages.map( ( message, index ) => (
+							<ChatMessage
+								message={ message }
+								key={ index }
+								currentUser={ currentUser }
+								isNextMessageFromSameSender={ isNextMessageFromSameSender(
+									message.role,
+									chat.messages[ index + 1 ]?.role
+								) }
+								displayChatWithSupportLabel={ message.context?.flags?.show_contact_support_msg }
+							/>
+						) ) }
+						<JumpToRecent containerReference={ messagesContainerRef } />
+						{ chat.status === 'dislike' && shouldUseHelpCenterExperience && <DislikeThumb /> }
+						{ [ 'sending', 'dislike', 'transfer' ].includes( chat.status ) && (
+							<div className="odie-chatbox__action-message">
+								{ chat.status === 'sending' && <ThinkingPlaceholder /> }
+								{ chat.status === 'dislike' && <DislikeFeedbackMessage /> }
+							</div>
 						) }
-						displayChatWithSupportLabel={ message.context?.flags?.show_contact_support_msg }
-					/>
-				) ) }
-				<JumpToRecent containerReference={ messagesContainerRef } />
-				{ chat.status === 'dislike' && shouldUseHelpCenterExperience && <DislikeThumb /> }
-				{ [ 'sending', 'dislike', 'transfer' ].includes( chat.status ) && (
-					<div className="odie-chatbox__action-message">
-						{ chat.status === 'sending' && <ThinkingPlaceholder /> }
-						{ chat.status === 'dislike' && <DislikeFeedbackMessage /> }
-					</div>
+					</>
 				) }
 			</div>
 		</>

diff --git a/packages/odie-client/src/components/message/style_redesign.scss b/packages/odie-client/src/components/message/style_redesign.scss
@@ -582,17 +582,6 @@ $custom-border-corner-size: 16px;
 	}
 }
 
-
-.odie-chat__date {
-	display: flex;
-    flex-direction: row;
-    justify-content: center;
-    width: 100%;
-    padding-bottom: 16px;
-    color: var(--studio-gray-50);
-    font-size: 0.75rem;
-}
-
 .odie-chatbox-thinking-icon {
 	margin-left: 8px;
 }

diff --git a/packages/odie-client/src/style.scss b/packages/odie-client/src/style.scss
@@ -50,6 +50,23 @@
 			margin-bottom: 64px;
 		}
 	}
+
+	.chatbox-loading-chat__spinner {
+		display: flex;
+		width: 100%;
+		justify-content: center;
+		padding: 16px 0;
+	}
+
+	.odie-chat__date {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		width: 100%;
+		padding-bottom: 16px;
+		color: var(--studio-gray-50);
+		font-size: 0.75rem;
+	}
 }
 
 .odie-chatbox-message-dislike-feedback {