fix: performance issues with code renderer (#911)

Author: diced

docker-compose.dev.yml

@@ -1,6 +1,6 @@
 services:
   postgres:
-    image: postgres:15
+    image: postgres:16
     restart: unless-stopped
     environment:
       - POSTGRES_USER=postgres

package.json

@@ -78,6 +78,7 @@
     "react-dom": "^19.1.1",
     "react-markdown": "^10.1.0",
     "react-router-dom": "^7.8.2",
+    "react-window": "1.8.11",
     "remark-gfm": "^4.0.1",
     "sharp": "^0.34.3",
     "swr": "^2.3.6",
@@ -96,6 +97,7 @@
     "@types/qrcode": "^1.5.5",
     "@types/react": "^19.1.12",
     "@types/react-dom": "^19.1.9",
+    "@types/react-window": "^1.8.8",
     "@vitejs/plugin-react": "^5.0.2",
     "eslint": "^9.34.0",
     "eslint-config-prettier": "^10.1.8",

pnpm-lock.yaml

@@ -234,15 +234,15 @@ export default function FileModal({
                   </Title>
                   <Combobox
                     zIndex={90000}
+                    withinPortal={false}
                     store={tagsCombobox}
                     onOptionSubmit={handleValueSelect}
-                    withinPortal={false}
                   >
                     <Combobox.DropdownTarget>
                       <PillsInput
                         onBlur={() => triggerSave()}
                         pointer
-                        onClick={() => tagsCombobox.toggleDropdown()}
+                        onClick={() => tagsCombobox.openDropdown()}
                       >
                         <Pill.Group>
                           {values.length > 0 ? (
@@ -254,9 +254,14 @@ export default function FileModal({
                           <Combobox.EventsTarget>
                             <PillsInput.Field
                               type='hidden'
+                              onFocus={() => tagsCombobox.openDropdown()}
                               onBlur={() => tagsCombobox.closeDropdown()}
                               onKeyDown={(event) => {
-                                if (event.key === 'Backspace') {
+                                if (
+                                  event.key === 'Backspace' &&
+                                  value.length > 0 &&
+                                  event.currentTarget.value === ''
+                                ) {
                                   event.preventDefault();
                                   handleValueRemove(value[value.length - 1]);
                                 }
@@ -285,9 +290,7 @@ export default function FileModal({
                             </Combobox.Option>
                           ))
                         ) : (
-                          <Combobox.Option value='no-tags' disabled>
-                            No tags found, create one outside of this menu.
-                          </Combobox.Option>
+                          <Combobox.Empty>No tags found, create one outside of this menu.</Combobox.Empty>
                         )}
                       </Combobox.Options>
                     </Combobox.Dropdown>
@@ -310,8 +313,8 @@ export default function FileModal({
                     </Button>
                   ) : (
                     <Combobox
-                      store={folderCombobox}
                       withinPortal={false}
+                      store={folderCombobox}
                       onOptionSubmit={(value) => handleAdd(value)}
                     >
                       <Combobox.Target>

src/components/file/DashboardFile/FileModal.tsx

@@ -27,6 +27,7 @@
 .theme {
   color: var(--_color);
   background: var(--_background);
+  display: block;
 
   .hljs-comment,
   .hljs-quote {

src/components/render/code/HighlightCode.theme.scss

@@ -1,9 +1,10 @@
 import { ActionIcon, Button, CopyButton, Paper, ScrollArea, Text, useMantineTheme } from '@mantine/core';
-import { IconCheck, IconClipboardCopy, IconChevronDown, IconChevronUp } from '@tabler/icons-react';
-import { useEffect, useState } from 'react';
+import { IconCheck, IconChevronDown, IconChevronUp, IconClipboardCopy } from '@tabler/icons-react';
+import type { HLJSApi } from 'highlight.js';
+import { useEffect, useMemo, useState } from 'react';
+import { FixedSizeList as List } from 'react-window';
 
 import './HighlightCode.theme.scss';
-import { type HLJSApi } from 'highlight.js';
 
 export default function HighlightCode({ language, code }: { language: string; code: string }) {
   const theme = useMantineTheme();
@@ -14,15 +15,56 @@ export default function HighlightCode({ language, code }: { language: string; co
     import('highlight.js').then((mod) => setHljs(mod.default || mod));
   }, []);
 
-  const lines = code.split('\n');
-  const lineNumbers = lines.map((_, i) => i + 1);
-  const displayLines = expanded ? lines : lines.slice(0, 50);
-  const displayLineNumbers = expanded ? lineNumbers : lineNumbers.slice(0, 50);
+  const lines = useMemo(() => code.split('\n'), [code]);
+  const visible = expanded ? lines.length : Math.min(lines.length, 50);
+  const expandable = lines.length > 50;
 
-  let lang = language;
-  if (!hljs || !hljs.getLanguage(lang)) {
-    lang = 'text';
-  }
+  const lang = useMemo(() => {
+    if (!hljs) return 'plaintext';
+    if (hljs.getLanguage(language)) return language;
+
+    return 'plaintext';
+  }, [hljs, language]);
+
+  const hlLines = useMemo(() => {
+    if (!hljs) return lines;
+
+    return lines.map(
+      (line) =>
+        hljs.highlight(line, {
+          language: lang,
+        }).value,
+    );
+  }, [lines, hljs, lang]);
+
+  const Row = ({ index, style }: { index: number; style: React.CSSProperties }) => (
+    <div
+      style={{
+        ...style,
+        display: 'flex',
+        alignItems: 'flex-start',
+        whiteSpace: 'pre',
+        fontFamily: 'monospace',
+        fontSize: '0.8rem',
+      }}
+    >
+      <Text
+        component='span'
+        c='dimmed'
+        mr='md'
+        style={{
+          userSelect: 'none',
+          width: 40,
+          textAlign: 'right',
+          flexShrink: 0,
+        }}
+      >
+        {index + 1}
+      </Text>
+
+      <code className='theme hljs' style={{ flex: 1 }} dangerouslySetInnerHTML={{ __html: hlLines[index] }} />
+    </div>
+  );
 
   return (
     <Paper withBorder p='xs' my='md' pos='relative'>
@@ -44,37 +86,17 @@ export default function HighlightCode({ language, code }: { language: string; co
         )}
       </CopyButton>
 
-      <ScrollArea type='auto' dir='ltr' offsetScrollbars={false}>
-        <pre style={{ margin: 0, whiteSpace: 'pre', overflowX: 'auto' }} className='theme'>
-          <code className='theme'>
-            {displayLines.map((line, i) => (
-              <div key={i}>
-                <Text
-                  component='span'
-                  size='sm'
-                  c='dimmed'
-                  mr='md'
-                  style={{ userSelect: 'none', fontFamily: 'monospace' }}
-                >
-                  {displayLineNumbers[i]}
-                </Text>
-                <span
-                  className='line'
-                  dangerouslySetInnerHTML={{
-                    __html: lang === 'none' || !hljs ? line : hljs.highlight(line, { language: lang }).value,
-                  }}
-                />
-              </div>
-            ))}
-          </code>
-        </pre>
+      <ScrollArea type='auto' offsetScrollbars={false} style={{ maxHeight: 400 }}>
+        <List height={400} width='100%' itemCount={visible} itemSize={20} overscanCount={10}>
+          {Row}
+        </List>
       </ScrollArea>
 
-      {lines.length > 50 && (
+      {expandable && (
         <Button
-          variant='outline'
+          variant='light'
           size='compact-sm'
-          onClick={() => setExpanded(!expanded)}
+          onClick={() => setExpanded((e) => !e)}
           leftSection={expanded ? <IconChevronUp size='1rem' /> : <IconChevronDown size='1rem' />}
           style={{ position: 'absolute', bottom: '0.5rem', right: '0.5rem' }}
         >