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: {...@@ -52,11 +52,12 @@ export function FontSizeSliderRow(props: {
52 }, [dragging, fraction, progress]);52 }, [dragging, fraction, progress]);
5353
54 const commit = useCallback((next: number) => {54 const commit = useCallback((next: number) => {
55 if (next === latest.current.value) {55 const current = latest.current;
56 if (next === current.value) {
56 return;57 return;
57 }58 }
58 Haptics.selectionAsync().catch(() => undefined);59 Haptics.selectionAsync().catch(() => undefined);
59 latest.current.onChange(next);60 current.onChange(next);
60 }, []);61 }, []);
6162
62 const gesture = useMemo(() => {63 const gesture = useMemo(() => {
...@@ -90,17 +91,19 @@ export function FontSizeSliderRow(props: {...@@ -90,17 +91,19 @@ export function FontSizeSliderRow(props: {
90 dragging.value = true;91 dragging.value = true;
91 const f = fractionAt(event.x);92 const f = fractionAt(event.x);
92 progress.value = f;93 progress.value = f;
93 runOnJS(commit)(valueAtFraction(f));
94 })94 })
95 .onFinalize(() => {95 .onFinalize((_event, success) => {
96 if (!dragging.value) {96 if (!dragging.value) {
97 return;97 return;
98 }98 }
99 dragging.value = false;99 dragging.value = false;
100 progress.value = withTiming(100 if (!success) {
101 fractionOfValue(valueAtFraction(progress.value)),101 progress.value = withTiming(fractionOfValue(value), SNAP_ANIMATION);
102 SNAP_ANIMATION,102 return;
103 );103 }
104 const next = valueAtFraction(progress.value);
105 progress.value = withTiming(fractionOfValue(next), SNAP_ANIMATION);
106 runOnJS(commit)(next);
104 });107 });
105108
106 const tap = Gesture.Tap()109 const tap = Gesture.Tap()
...@@ -112,7 +115,7 @@ export function FontSizeSliderRow(props: {...@@ -112,7 +115,7 @@ export function FontSizeSliderRow(props: {
112 });115 });
113116
114 return Gesture.Race(pan, tap);117 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
117 const fillStyle = useAnimatedStyle(() => ({120 const fillStyle = useAnimatedStyle(() => ({
118 width: THUMB_SIZE / 2 + progress.value * Math.max(0, trackWidth.value - THUMB_SIZE),121 width: THUMB_SIZE / 2 + progress.value * Math.max(0, trackWidth.value - THUMB_SIZE),