How to Smoothly Stream and Render Dynamic Table Content in React without UI Shake?

Question

I'm working on a React application that streams content from the OpenAI API. The content is displayed using the ReactMarkdown component, as it can contain both Markdown and HTML. However, when the streamed content includes a table, the UI becomes shaky because rows and columns are added dynamically. This causes the page to increase and decrease in size, leading to a poor user experience.

Here is my current implementation:

import React, { useState, useEffect } from 'react';
import ReactMarkdown from 'react-markdown';
import rehypeRaw from 'rehype-raw';

const StreamedContent = ({ stream }) => {
  const [content, setContent] = useState('');

  useEffect(() => {
    const handleStream = (newContent) => {
      setContent((prevContent) => prevContent + newContent);
    };

    stream.on('data', handleStream);

    return () => {
      stream.off('data', handleStream);
    };
  }, [stream]);

  return (
    <div className={styles.answerText}>
      <ReactMarkdown children={content} rehypePlugins={[rehypeRaw]} />
    </div>
  );
};

export default StreamedContent;

And the CSS to manage the container height:

.answerText {
  min-height: 500px; 
  overflow-y: auto; 
  transition: height 0.2s ease-in-out;  
}

Problem: Despite this setup, the page still shakes when the table is being streamed. The content is added in parts, and each update causes the UI to reflow, leading to a shaky experience.

Question: How can I modify my implementation to smoothly render dynamic table content without causing the UI to shake? Is there a way to buffer the content more effectively or a different approach I should consider?

Additional Context: The streamed content might or might not contain a table. The size of the content in the table is unknown. Using ReactMarkdown with rehypeRaw is essential because the response can contain both Markdown and HTML.