authorgravatar for 47331045+bbernag@users.noreply.github.comberna <47331045+bbernag@users.noreply.github.com> 2026-09-07 01:26:50-06:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-09-07 07:26:50+00:00
log062987b2fb0ef48cc7776d654931bd9f3bcf1f9f
tree235b5da4af6adb8bfad72a3bd11d888211f904ab
parent7dda0b1c0a95603f1954b81a9fee699be92668f0
signature Signed by PGP key B5690EEEBB952194

fix(mobile): improve font-size slider performance and prevent maximum update depth errors (#7138)

Co-authored-by: Julius Marminge <julius0216@outlook.com>

1 files changed, 12 insertions(+), 9 deletions(-)

apps/mobile/src/features/settings/appearance/components/FontSizeSliderRow.tsx+12-9
......@@ -52,11 +52,12 @@ export function FontSizeSliderRow(props: {
5252 }, [dragging, fraction, progress]);
5353
5454 const commit = useCallback((next: number) => {
55 if (next === latest.current.value) {
55 const current = latest.current;
56 if (next === current.value) {
5657 return;
5758 }
5859 Haptics.selectionAsync().catch(() => undefined);
59 latest.current.onChange(next);
60 current.onChange(next);
6061 }, []);
6162
6263 const gesture = useMemo(() => {
......@@ -90,17 +91,19 @@ export function FontSizeSliderRow(props: {
9091 dragging.value = true;
9192 const f = fractionAt(event.x);
9293 progress.value = f;
93 runOnJS(commit)(valueAtFraction(f));
9494 })
95 .onFinalize(() => {
95 .onFinalize((_event, success) => {
9696 if (!dragging.value) {
9797 return;
9898 }
9999 dragging.value = false;
100 progress.value = withTiming(
101 fractionOfValue(valueAtFraction(progress.value)),
102 SNAP_ANIMATION,
103 );
100 if (!success) {
101 progress.value = withTiming(fractionOfValue(value), SNAP_ANIMATION);
102 return;
103 }
104 const next = valueAtFraction(progress.value);
105 progress.value = withTiming(fractionOfValue(next), SNAP_ANIMATION);
106 runOnJS(commit)(next);
104107 });
105108
106109 const tap = Gesture.Tap()
......@@ -112,7 +115,7 @@ export function FontSizeSliderRow(props: {
112115 });
113116
114117 return Gesture.Race(pan, tap);
115 }, [commit, disabled, dragging, max, min, progress, step, trackWidth]);
118 }, [commit, disabled, dragging, max, min, progress, step, trackWidth, value]);
116119
117120 const fillStyle = useAnimatedStyle(() => ({
118121 width: THUMB_SIZE / 2 + progress.value * Math.max(0, trackWidth.value - THUMB_SIZE),