sliders on mobile phone are jittery/lag/lock-up

[bhajneet]

performance on an ipad was okay, but dragging a slider around on samsung s9 was bad and would mess things up

[Harjot1Singh]

Adding any sort of denounce to onChange would probably resolve this

On 8 Nov 2019, at 03:40, Bhajneet S.K. [email protected] wrote:

performance on an ipad was okay, but dragging a slider around on samsung s9 was bad and would mess things up

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[saihaj]

@Harjot1Singh do you mean something like this for server settings? https://medium.com/@anuhosad/debouncing-events-with-react-b8c405c33273

[Harjot1Singh]

Similar, we have a debounce thing somewhere in thecodebase already, find it by searching for debounce

[bhajneet]

I think we can put this on hold until other work is completed. The other tasks in queue all have higher priority than this fix.

Can come back to this when those are done

[Harjot1Singh]

The real delay actually comes from using controlled components (so, the value prop). Every time the setting changes, it re-renders the setting component itself. This is inline with React practice, however, in the cases where it is causing a negative effect, or that the re-rendering is too heavy (often the case for components that fast update, like sliders), you have 3 options:

1. Use defaultValue and flip the setting components over to uncontrolled components. This means that state changes do not reprender the component, and the value is actually just emitted, and not set. The downside is that any programmatic value changes or value changes sent via the network for this device (triggered by another user) will not be reflected in settings if settings is open at the same time (but the presenter should still update). There are a few ways around this, but this would be the tradeoff for now.

2. Reducing the possible number of updates by discretising/setting a stepper.

3. Reducing the number of updates sent via throttle. But now that I’ve thought through it, @bhajneet‘s experience makes sense, because the slider will appear to be less reactive, and since the slider is a controlled component, it’ll update with values at 100ms when you are dragging, which is not what we want.

The best solution is most likely throttled onChange + defaultValue (1 & 3)

Originally posted by @Harjot1Singh in https://github.com/ShabadOS/desktop/pull/557#issuecomment-634357374