Skip to content

Dynamic parameter slider is laggy and non-functional in Safari #18856

@blink-so

Description

@blink-so

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

  1. Open Coder in Safari
  2. Navigate to a workspace with dynamic parameters that include a slider
  3. Try to move the slider input
  4. 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.

Metadata

Metadata

Labels

parametersbugs & feature requests related to Dynamic Parameters

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions