-
Notifications
You must be signed in to change notification settings - Fork 948
Description
Bug Description
The dynamic parameter slider input is extremely laggy on Safari, making it nearly non-functional. When moving the slider, updates occur approximately 3 seconds later, causing the slider to continue moving backwards and forwards with lots of flashing even after user interaction has stopped.
Root Cause Analysis
The issue appears to be caused by the lack of debouncing on the slider input in the DynamicParameter
component. The current implementation calls onChange
on every onValueChange
event from the Radix UI Slider component:
// In /site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
case "slider":
return (
<div className="flex flex-row items-baseline gap-3">
<Slider
id={id}
className="mt-2"
value={[Number.isFinite(Number(value)) ? Number(value) : 0]}
onValueChange={([value]) => {
onChange(value.toString()); // No debouncing - triggers on every movement
}}
min={parameter.validations[0]?.validation_min ?? 0}
max={parameter.validations[0]?.validation_max ?? 100}
disabled={disabled}
/>
<span className="w-4 font-medium">
{Number.isFinite(Number(value)) ? value : "0"}
</span>
</div>
);
This causes constant state updates during slider movement, which Safari handles poorly compared to other browsers. There are known Safari performance issues with Radix UI Slider components (see radix-ui/primitives#2543).
Expected Behavior
- Slider should respond smoothly to user input
- Value updates should occur in real-time without lag
- No flashing or delayed movement after user interaction stops
Actual Behavior
- Slider movement is delayed by ~3 seconds
- Slider continues moving after user stops interacting
- Lots of visual flashing during interaction
- Nearly impossible to set precise values
Proposed Solution
Implement debouncing for slider inputs similar to how text inputs are handled in the DebouncedParameterField
component. The slider case should be moved to use debounced updates or implement a similar pattern with useDebouncedValue
.
Environment
- Browser: Safari (all versions)
- Component: Dynamic Parameter Slider (
form_type: "slider"
) - File:
/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
Steps to Reproduce
- Open Coder in Safari
- Navigate to a workspace with dynamic parameters that include a slider
- Try to move the slider input
- Observe the laggy, delayed response
Additional Context
This issue specifically affects Safari due to its different handling of frequent DOM updates and animations. Other browsers (Chrome, Firefox) handle the constant onChange
calls more gracefully.