Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-19 05:19:39 +02:00
Code Issues Releases Activity

fix(app/editor): reduce editor slowness by debouncing onChange calls (#326)

Browse source
This commit is contained in:
LP B 2025-01-17 22:41:06 +01:00 • committed by GitHub
parent cab667c23b
commit db48da185a
4 changed files with 177 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

26
app/react/components/CodeEditor.tsx
View file

@ -3,7 +3,7 @@ import { StreamLanguage, LanguageSupport } from '@codemirror/language';
import { yaml } from '@codemirror/legacy-modes/mode/yaml';
import { dockerFile } from '@codemirror/legacy-modes/mode/dockerfile';
import { shell } from '@codemirror/legacy-modes/mode/shell';
import { useMemo, useState } from 'react';
import { useCallback, useMemo, useState } from 'react';
import { createTheme } from '@uiw/codemirror-themes';
import { tags as highlightTags } from '@lezer/highlight';
@ -11,6 +11,8 @@ import { AutomationTestingProps } from '@/types';
import { CopyButton } from '@@/buttons/CopyButton';
import { useDebounce } from '../hooks/useDebounce';
import styles from './CodeEditor.module.css';
import { TextTip } from './Tip/TextTip';
import { StackVersionSelector } from './StackVersionSelector';
@ -89,17 +91,17 @@ export function CodeEditor({
return extensions;
}, [type]);
function handleVersionChange(version: number) {
if (versions && versions.length > 1) {
if (version < versions[0]) {
setIsRollback(true);
} else {
setIsRollback(false);
const handleVersionChange = useCallback(
(version: number) => {
if (versions && versions.length > 1) {
setIsRollback(version < versions[0]);
}
}
onVersionChange?.(version);
},
[onVersionChange, versions]
);
onVersionChange?.(version);
}
const [debouncedValue, debouncedOnChange] = useDebounce(value, onChange);
return (
<>
@ -136,8 +138,8 @@ export function CodeEditor({
<CodeMirror
className={styles.root}
theme={theme}
value={value}
onChange={onChange}
value={debouncedValue}
onChange={debouncedOnChange}
readOnly={readonly || isRollback}
id={id}
extensions={extensions}