Fix rendering performances issues related to scrolling events (#174)

* memoize chat related components

* Avoid re-rendering ChatInput on every message udpate

* change the way the horizontal scrollbar is hidden

* make the scroll event listener passive

* perf(Chat): fix performances issues related to autoscroll

Uses the intersection API to determine autoscroll mode instead of listening for scroll events

* tuning detection of autoscroll
This commit is contained in:
Thomas LÉVEIL
2023-03-27 09:22:38 +02:00
committed by GitHub
parent c3f2dced56
commit 46e1857489
6 changed files with 401 additions and 366 deletions
+4 -3
View File
@@ -3,7 +3,7 @@ import {
programmingLanguages,
} from '@/utils/app/codeblock';
import { IconCheck, IconClipboard, IconDownload } from '@tabler/icons-react';
import { FC, useState } from 'react';
import { FC, useState, memo } from 'react';
import { useTranslation } from 'next-i18next';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
@@ -13,7 +13,7 @@ interface Props {
value: string;
}
export const CodeBlock: FC<Props> = ({ language, value }) => {
export const CodeBlock: FC<Props> = memo(({ language, value }) => {
const { t } = useTranslation('markdown');
const [isCopied, setIsCopied] = useState<Boolean>(false);
@@ -92,4 +92,5 @@ export const CodeBlock: FC<Props> = ({ language, value }) => {
</SyntaxHighlighter>
</div>
);
};
});
CodeBlock.displayName = 'CodeBlock';