Skip to content

Commit dd2fb89

Browse files
authored
fix: debounce slider to avoid laggy behavior (#18980)
resolves #18856 resolves coder/internal#753
1 parent 99adb4a commit dd2fb89

File tree

1 file changed

+30
-26
lines changed

1 file changed

+30
-26
lines changed

site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -77,14 +77,14 @@ export const DynamicParameter: FC<DynamicParameterProps> = ({
7777
/>
7878
<div className="max-w-lg">
7979
{parameter.form_type === "input" ||
80-
parameter.form_type === "textarea" ? (
80+
parameter.form_type === "textarea" ||
81+
parameter.form_type === "slider" ? (
8182
<DebouncedParameterField
8283
id={id}
8384
parameter={parameter}
8485
value={value}
8586
onChange={onChange}
8687
disabled={disabled}
87-
isPreset={isPreset}
8888
/>
8989
) : (
9090
<ParameterField
@@ -250,7 +250,6 @@ interface DebouncedParameterFieldProps {
250250
onChange: (value: string) => void;
251251
disabled?: boolean;
252252
id: string;
253-
isPreset?: boolean;
254253
}
255254

256255
const DebouncedParameterField: FC<DebouncedParameterFieldProps> = ({
@@ -259,7 +258,6 @@ const DebouncedParameterField: FC<DebouncedParameterFieldProps> = ({
259258
onChange,
260259
disabled,
261260
id,
262-
isPreset,
263261
}) => {
264262
const [localValue, setLocalValue] = useState(
265263
value !== undefined ? value : validValue(parameter.value),
@@ -271,13 +269,13 @@ const DebouncedParameterField: FC<DebouncedParameterFieldProps> = ({
271269
const prevDebouncedValueRef = useRef<string | undefined>();
272270
const prevValueRef = useRef(value);
273271

274-
// This is necessary in the case of fields being set by preset parameters
272+
// Necessary for dynamic defaults or fields being set by preset parameters
275273
useEffect(() => {
276-
if (isPreset && value !== undefined && value !== prevValueRef.current) {
274+
if (value !== undefined && value !== prevValueRef.current) {
277275
setLocalValue(value);
278276
prevValueRef.current = value;
279277
}
280-
}, [value, isPreset]);
278+
}, [value]);
281279

282280
useEffect(() => {
283281
// Only call onChangeEvent if debouncedLocalValue is different from the previously committed value
@@ -408,6 +406,31 @@ const DebouncedParameterField: FC<DebouncedParameterFieldProps> = ({
408406
</Stack>
409407
);
410408
}
409+
410+
case "slider": {
411+
const numericValue = Number.isFinite(Number(localValue))
412+
? Number(localValue)
413+
: 0;
414+
const { validation_min: min = 0, validation_max: max = 100 } =
415+
parameter.validations[0] ?? {};
416+
417+
return (
418+
<div className="flex flex-row items-baseline gap-3">
419+
<Slider
420+
id={id}
421+
className="mt-2"
422+
value={[numericValue]}
423+
onValueChange={([value]) => {
424+
setLocalValue(value.toString());
425+
}}
426+
min={min ?? undefined}
427+
max={max ?? undefined}
428+
disabled={disabled}
429+
/>
430+
<span className="w-4 font-medium">{numericValue}</span>
431+
</div>
432+
);
433+
}
411434
}
412435
};
413436

@@ -564,25 +587,6 @@ const ParameterField: FC<ParameterFieldProps> = ({
564587
</div>
565588
);
566589

567-
case "slider":
568-
return (
569-
<div className="flex flex-row items-baseline gap-3">
570-
<Slider
571-
id={id}
572-
className="mt-2"
573-
value={[Number.isFinite(Number(value)) ? Number(value) : 0]}
574-
onValueChange={([value]) => {
575-
onChange(value.toString());
576-
}}
577-
min={parameter.validations[0]?.validation_min ?? 0}
578-
max={parameter.validations[0]?.validation_max ?? 100}
579-
disabled={disabled}
580-
/>
581-
<span className="w-4 font-medium">
582-
{Number.isFinite(Number(value)) ? value : "0"}
583-
</span>
584-
</div>
585-
);
586590
case "error":
587591
return <Diagnostics diagnostics={parameter.diagnostics} />;
588592
}

0 commit comments

Comments
 (0)