feat(DeepThinking): added isLoading prop

packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithDeepThinking.tsx

@@ -27,5 +27,18 @@ export const MessageWithDeepThinkingExample: FunctionComponent = () => (
         body: "Here's why I said this."
       }}
     />
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content="This example has deep thinking that is loading:"
+      deepThinking={{
+        isDefaultExpanded: false,
+        toggleContent: 'Show thinking',
+        subheading: 'Thought for 3 seconds',
+        body: "Here's why I said this.",
+        isLoading: true
+      }}
+    />
   </>
 );

packages/module/src/DeepThinking/DeepThinking.test.tsx

@@ -167,4 +167,27 @@ describe('DeepThinking', () => {
     );
     expect(container.querySelector('.pf-m-primary')).toBeTruthy();
   });
+
+  it('should render spinner when isLoading is true', () => {
+    render(<DeepThinking {...defaultProps} isLoading />);
+    expect(screen.getByLabelText('Contents')).toBeInTheDocument();
+  });
+
+  it('should not render spinner when isLoading is false', () => {
+    render(<DeepThinking {...defaultProps} />);
+    expect(screen.queryByLabelText('Contents')).not.toBeInTheDocument();
+  });
+
+  it('should pass spinnerProps to Spinner component', () => {
+    render(<DeepThinking {...defaultProps} isLoading spinnerProps={{ 'aria-label': 'Custom label' }} />);
+    expect(screen.getByLabelText('Custom label')).toBeInTheDocument();
+  });
+
+  it('should not render spinner when isToggleContentMarkdown is true', () => {
+    const toggleContent = '**Bold thinking**';
+    render(<DeepThinking toggleContent={toggleContent} isToggleContentMarkdown isLoading />);
+
+    expect(screen.queryByLabelText('Contents')).not.toBeInTheDocument();
+    expect(screen.getByText('Bold thinking')).toBeInTheDocument();
+  });
 });

packages/module/src/DeepThinking/DeepThinking.tsx

@@ -7,7 +7,9 @@ import {
   CardBodyProps,
   CardProps,
   ExpandableSection,
-  ExpandableSectionProps
+  ExpandableSectionProps,
+  Spinner,
+  SpinnerProps
 } from '@patternfly/react-core';
 import { useState, type FunctionComponent } from 'react';
 import MarkdownContent from '../MarkdownContent';
@@ -38,6 +40,10 @@ export interface DeepThinkingProps {
   markdownContentProps?: Omit<MarkdownContentProps, 'content'>;
   /** Whether to retain styles in the MarkdownContent component. Defaults to false. */
   shouldRetainStyles?: boolean;
+  /** Flag indicating whether the deep thinking is loading or not. */
+  isLoading?: boolean;
+  /** Additional props for the spinner component when isLoading is true. */
+  spinnerProps?: SpinnerProps;
 }
 
 export const DeepThinking: FunctionComponent<DeepThinkingProps> = ({
@@ -52,7 +58,9 @@ export const DeepThinking: FunctionComponent<DeepThinkingProps> = ({
   isSubheadingMarkdown,
   isBodyMarkdown,
   markdownContentProps,
-  shouldRetainStyles = false
+  shouldRetainStyles = false,
+  isLoading = false,
+  spinnerProps
 }: DeepThinkingProps) => {
   const [isExpanded, setIsExpanded] = useState(isDefaultExpanded);
 
@@ -66,7 +74,12 @@ export const DeepThinking: FunctionComponent<DeepThinkingProps> = ({
         <MarkdownContent shouldRetainStyles={shouldRetainStyles} content={toggleContent} {...markdownContentProps} />
       );
     }
-    return toggleContent;
+    return (
+      <>
+        {isLoading && <Spinner diameter="1em" isInline style={{ marginInlineEnd: '8px' }} {...spinnerProps} />}
+        {toggleContent}
+      </>
+    );
   };
 
   const renderSubheading = () => {