authorgravatar for 30420087+gabrielelpidio@users.noreply.github.comGabriel De Andrade <30420087+gabrielelpidio@users.noreply.github.com> 2026-07-29 21:21:16-04:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-07-29 21:21:16-04:00
log9e3e9bb4f081a6ad331cb94b42b2bd2d93339b81
tree7ea26f8951ec6368a90699fb265d08fa7010714b
parenta8e05cbb92633a1351529f2bc402071f615e5051
signature Signed by PGP key B5690EEEBB952194

fix(mobile): reduce thread feed scroll jank (#4874)

3 files changed, 169 insertions(+), 10 deletions(-)

apps/mobile/src/features/threads/ThreadFeed.tsx+107-6
...@@ -48,7 +48,9 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";...@@ -48,7 +48,9 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
48import Animated, {48import Animated, {
49 FadeIn,49 FadeIn,
50 FadeInUp,50 FadeInUp,
51 LinearTransition,51 useSharedValue,
52 withTiming,
53 type LayoutAnimationsValues,
52 type SharedValue,54 type SharedValue,
53} from "react-native-reanimated";55} from "react-native-reanimated";
54import { useThemeColor } from "../../lib/useThemeColor";56import { useThemeColor } from "../../lib/useThemeColor";
...@@ -80,7 +82,9 @@ import { deriveCenteredContentHorizontalPadding, type LayoutVariant } from "../....@@ -80,7 +82,9 @@ import { deriveCenteredContentHorizontalPadding, type LayoutVariant } from "../.
80import {82import {
81 resolveMarkdownFontSizes,83 resolveMarkdownFontSizes,
82 resolveNativeMarkdownTypography,84 resolveNativeMarkdownTypography,
85 scaledTypographyLineHeight,
83} from "../../lib/appearancePreferences";86} from "../../lib/appearancePreferences";
87import { MOBILE_TYPOGRAPHY } from "../../lib/typography";
84import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider";88import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider";
85import { useAppearanceCodeSurface } from "../settings/appearance/useAppearanceCodeSurface";89import { useAppearanceCodeSurface } from "../settings/appearance/useAppearanceCodeSurface";
86import { markdownFileIconSource } from "@t3tools/mobile-markdown-text/file-icons";90import { markdownFileIconSource } from "@t3tools/mobile-markdown-text/file-icons";
...@@ -91,7 +95,12 @@ import {...@@ -91,7 +95,12 @@ import {
91 type ThreadFeedLatestTurn,95 type ThreadFeedLatestTurn,
92} from "../../lib/threadActivity";96} from "../../lib/threadActivity";
93import type { ThreadContentPresentation } from "./threadContentPresentation";97import type { ThreadContentPresentation } from "./threadContentPresentation";
94import { ThreadWorkGroupToggle, ThreadWorkLog } from "./thread-work-log";98import {
99 collapsedWorkLogHeight,
100 ThreadWorkGroupToggle,
101 ThreadWorkLog,
102 WORK_GROUP_TOGGLE_HEIGHT,
103} from "./thread-work-log";
95import { useMarkdownCodeHighlight } from "./markdownCodeHighlightState";104import { useMarkdownCodeHighlight } from "./markdownCodeHighlightState";
96import { useAssetUrl } from "../../state/assets";105import { useAssetUrl } from "../../state/assets";
97import { resolveWorkspaceRelativeFilePath } from "../files/filePath";106import { resolveWorkspaceRelativeFilePath } from "../files/filePath";
...@@ -109,8 +118,22 @@ function formatMessageTime(input: string): string {...@@ -109,8 +118,22 @@ function formatMessageTime(input: string): string {
109}118}
110119
111// Rows shift when content above them grows (streaming text, work-log folds);120// Rows shift when content above them grows (streaming text, work-log folds);
112// animating the container position turns those jumps into slides.121// animating the container position turns those jumps into slides. Applied
113const FEED_ITEM_LAYOUT_TRANSITION = LinearTransition.duration(180);122// conditionally — see the gated transition in ThreadFeed: while browsing
123// history the animation must NOT run, or every estimate→actual size
124// correction plays as a visible slide against the instant scroll-offset
125// compensation from maintainVisibleContentPosition.
126const FEED_ITEM_LAYOUT_DURATION_MS = 180;
127
128// Pre-measurement heights for getFixedItemSize, mirroring renderFeedEntry's
129// classNames. The fold row's min-h-11 (44px) stays taller than its single
130// text-sm line at every supported base font size (26px at the 22pt maximum),
131// so its height is a constant; a drifted value costs one correction on
132// measure, not a persistent offset.
133const TURN_FOLD_HEIGHT = 56; // min-h-11 (44) + mb-3 (12)
134// The working row has no min-height clamp — its height follows the scaled
135// text-xs line height (see workingRowHeight in ThreadFeed).
136const WORKING_ROW_VERTICAL_EXTRAS = 24; // py-1 (8) + mb-4 (16)
114137
115// Entering animations must only play for rows born just now — LegendList138// Entering animations must only play for rows born just now — LegendList
116// remounts rows when they scroll back into view, and replaying an entrance for139// remounts rows when they scroll back into view, and replaying an entrance for
...@@ -1301,6 +1324,7 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {...@@ -1301,6 +1324,7 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
1301 const headerMaterialVisibleRef = useRef(false);1324 const headerMaterialVisibleRef = useRef(false);
1302 const previousLatestTurnRef = useRef(props.latestTurn);1325 const previousLatestTurnRef = useRef(props.latestTurn);
1303 const { width: windowWidth } = useWindowDimensions();1326 const { width: windowWidth } = useWindowDimensions();
1327 const { appearance } = useAppearancePreferences();
1304 const [viewportWidth, setViewportWidth] = useState(() =>1328 const [viewportWidth, setViewportWidth] = useState(() =>
1305 props.layoutVariant === "split" ? 0 : windowWidth,1329 props.layoutVariant === "split" ? 0 : windowWidth,
1306 );1330 );
...@@ -1410,6 +1434,11 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {...@@ -1410,6 +1434,11 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
1410 },1434 },
1411 [props.onHeaderMaterialVisibilityChange],1435 [props.onHeaderMaterialVisibilityChange],
1412 );1436 );
1437 // True while the viewport sits within ~one screen of the list end — the
1438 // only region where layout shifts should animate. Starts true because the
1439 // list opens pinned to the end.
1440 const nearListEnd = useSharedValue(true);
1441
1413 const handleScroll = useCallback(1442 const handleScroll = useCallback(
1414 (event: NativeSyntheticEvent<NativeScrollEvent>) => {1443 (event: NativeSyntheticEvent<NativeScrollEvent>) => {
1415 // anchorTopInset, not topContentInset: under automatic insets the list1444 // anchorTopInset, not topContentInset: under automatic insets the list
...@@ -1417,9 +1446,40 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {...@@ -1417,9 +1446,40 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
1417 // UIKit's adjustedContentInset, so topContentInset is 0 here). Add the1446 // UIKit's adjustedContentInset, so topContentInset is 0 here). Add the
1418 // header height back or the material toggles a full header too late.1447 // header height back or the material toggles a full header too late.
1419 reportHeaderMaterialVisibility(event.nativeEvent.contentOffset.y + anchorTopInset > 6);1448 reportHeaderMaterialVisibility(event.nativeEvent.contentOffset.y + anchorTopInset > 6);
1449 const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
1450 nearListEnd.value =
1451 contentSize.height - layoutMeasurement.height - contentOffset.y < layoutMeasurement.height;
1420 },1452 },
1421 [reportHeaderMaterialVisibility, anchorTopInset],1453 [reportHeaderMaterialVisibility, anchorTopInset, nearListEnd],
1422 );1454 );
1455
1456 // Gated variant of the 180ms feed layout slide. Instant while browsing
1457 // history: maintainVisibleContentPosition compensates the scroll offset in
1458 // the same frame a row's measured size lands, so an instant reposition is
1459 // invisible — animating it is exactly what made cold upward scrolls slide
1460 // and jump. Near the end the slide stays on: streaming growth and sends
1461 // shift rows at rest, where the animation is the thing preventing a hard
1462 // visual snap.
1463 const feedItemLayoutTransition = useMemo(() => {
1464 return (values: LayoutAnimationsValues) => {
1465 "worklet";
1466 const duration = nearListEnd.value ? FEED_ITEM_LAYOUT_DURATION_MS : 0;
1467 return {
1468 initialValues: {
1469 originX: values.currentOriginX,
1470 originY: values.currentOriginY,
1471 width: values.currentWidth,
1472 height: values.currentHeight,
1473 },
1474 animations: {
1475 originX: withTiming(values.targetOriginX, { duration }),
1476 originY: withTiming(values.targetOriginY, { duration }),
1477 width: withTiming(values.targetWidth, { duration }),
1478 height: withTiming(values.targetHeight, { duration }),
1479 },
1480 };
1481 };
1482 }, [nearListEnd]);
1423 const handleViewportLayout = useCallback((event: LayoutChangeEvent) => {1483 const handleViewportLayout = useCallback((event: LayoutChangeEvent) => {
1424 const nextWidth = Math.round(event.nativeEvent.layout.width);1484 const nextWidth = Math.round(event.nativeEvent.layout.width);
1425 const nextHeight = Math.round(event.nativeEvent.layout.height);1485 const nextHeight = Math.round(event.nativeEvent.layout.height);
...@@ -1636,6 +1696,38 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {...@@ -1636,6 +1696,38 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
1636 setExpandedImage({ uri, headers });1696 setExpandedImage({ uri, headers });
1637 }, []);1697 }, []);
16381698
1699 // Rows whose height is known before they ever render. Without this, every
1700 // row above the viewport is assumed to be estimatedItemSize tall, and
1701 // scrolling up through unmeasured content corrects each row's height as it
1702 // mounts — the feed visibly jumps. Fixed sizes make the small chrome rows
1703 // exact; message rows stay undefined and use LegendList's per-type running
1704 // average once one of their type has been measured. Text-driven heights
1705 // follow the configurable base font size via scaledTypographyLineHeight.
1706 const workingRowHeight =
1707 WORKING_ROW_VERTICAL_EXTRAS +
1708 scaledTypographyLineHeight(MOBILE_TYPOGRAPHY.label, appearance.baseFontSize);
1709 const getFixedItemSize = useCallback(
1710 (entry: ThreadFeedEntry) => {
1711 switch (entry.type) {
1712 case "turn-fold":
1713 return TURN_FOLD_HEIGHT;
1714 case "work-toggle":
1715 return WORK_GROUP_TOGGLE_HEIGHT;
1716 case "working":
1717 return workingRowHeight;
1718 case "activity-group":
1719 // Expanded rows append a variable detail block — fall back to
1720 // measurement for those groups.
1721 return entry.activities.some((activity) => expandedWorkRows[activity.id])
1722 ? undefined
1723 : collapsedWorkLogHeight(entry.activities, appearance.baseFontSize);
1724 default:
1725 return undefined;
1726 }
1727 },
1728 [expandedWorkRows, workingRowHeight, appearance.baseFontSize],
1729 );
1730
1639 const renderItem = useCallback(1731 const renderItem = useCallback(
1640 (info: { item: ThreadFeedEntry; index: number }) =>1732 (info: { item: ThreadFeedEntry; index: number }) =>
1641 renderFeedEntry(info, {1733 renderFeedEntry(info, {
...@@ -1725,7 +1817,7 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {...@@ -1725,7 +1817,7 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
1725 }1817 }
1726 : { scrollIndicatorInsets: { top: topContentInset, bottom: 0 } })}1818 : { scrollIndicatorInsets: { top: topContentInset, bottom: 0 } })}
1727 {...(anchoredEndSpace ? { anchoredEndSpace } : {})}1819 {...(anchoredEndSpace ? { anchoredEndSpace } : {})}
1728 itemLayoutAnimation={FEED_ITEM_LAYOUT_TRANSITION}1820 itemLayoutAnimation={feedItemLayoutTransition}
1729 // Patched LegendList prop (patches/@legendapp__list@3.2.0.patch):1821 // Patched LegendList prop (patches/@legendapp__list@3.2.0.patch):
1730 // lets its scroll math clamp programmatic scrolls to -headerInset1822 // lets its scroll math clamp programmatic scrolls to -headerInset
1731 // instead of 0, so initialScrollAtEnd/maintainScrollAtEnd on short1823 // instead of 0, so initialScrollAtEnd/maintainScrollAtEnd on short
...@@ -1769,6 +1861,10 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {...@@ -1769,6 +1861,10 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
1769 getItemType={(entry) =>1861 getItemType={(entry) =>
1770 entry.type === "message" ? `message:${entry.message.role}` : entry.type1862 entry.type === "message" ? `message:${entry.message.role}` : entry.type
1771 }1863 }
1864 getFixedItemSize={getFixedItemSize}
1865 // Measure rows well before they scroll into view so estimate→actual
1866 // corrections land offscreen instead of under the user's finger.
1867 drawDistance={500}
1772 keyboardShouldPersistTaps="always"1868 keyboardShouldPersistTaps="always"
1773 keyboardDismissMode="none"1869 keyboardDismissMode="none"
1774 keyboardLiftBehavior="whenAtEnd"1870 keyboardLiftBehavior="whenAtEnd"
...@@ -1788,6 +1884,11 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {...@@ -1788,6 +1884,11 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
1788 // user overscroll back to the adjusted rest position.1884 // user overscroll back to the adjusted rest position.
1789 scrollToOverflowEnabled1885 scrollToOverflowEnabled
1790 estimatedItemSize={180}1886 estimatedItemSize={180}
1887 // Chat-style bottom alignment: when a thread is shorter than the
1888 // viewport, pad above the content so messages rest just above the
1889 // composer instead of under the header. No effect on threads that
1890 // overflow the viewport (the padding clamps to zero).
1891 alignItemsAtEnd
1791 initialScrollAtEnd1892 initialScrollAtEnd
1792 onScroll={handleScroll}1893 onScroll={handleScroll}
1793 scrollEventThrottle={16}1894 scrollEventThrottle={16}
apps/mobile/src/features/threads/thread-work-log.tsx+46-3
...@@ -3,8 +3,10 @@ import { type AppSymbolName, SymbolView } from "../../components/AppSymbol";...@@ -3,8 +3,10 @@ import { type AppSymbolName, SymbolView } from "../../components/AppSymbol";
3import { LayoutAnimation, Pressable, ScrollView, useColorScheme, View } from "react-native";3import { LayoutAnimation, Pressable, ScrollView, useColorScheme, View } from "react-native";
44
5import { AppText as Text } from "../../components/AppText";5import { AppText as Text } from "../../components/AppText";
6import { scaledTypographyLineHeight } from "../../lib/appearancePreferences";
6import { cn } from "../../lib/cn";7import { cn } from "../../lib/cn";
7import type { ThreadFeedActivity } from "../../lib/threadActivity";8import type { ThreadFeedActivity } from "../../lib/threadActivity";
9import { MOBILE_TYPOGRAPHY } from "../../lib/typography";
8import Animated, { FadeIn } from "react-native-reanimated";10import Animated, { FadeIn } from "react-native-reanimated";
911
10const WORK_LOG_LAYOUT_ANIMATION = {12const WORK_LOG_LAYOUT_ANIMATION = {
...@@ -77,6 +79,46 @@ function isFreshRow(createdAt: string): boolean {...@@ -77,6 +79,46 @@ function isFreshRow(createdAt: string): boolean {
77 return Number.isFinite(timestamp) && Date.now() - timestamp < FRESH_ROW_WINDOW_MS;79 return Number.isFinite(timestamp) && Date.now() - timestamp < FRESH_ROW_WINDOW_MS;
78}80}
7981
82// Tool-like activities with a neutral status carry no signal worth a row.
83export function visibleWorkLogActivities(
84 activities: ReadonlyArray<ThreadFeedActivity>,
85): ReadonlyArray<ThreadFeedActivity> {
86 return activities.filter((activity) => !(activity.toolLike && activity.status === "neutral"));
87}
88
89// Pre-measurement heights for the feed's getFixedItemSize. Collapsed work-log
90// rows are single-line (numberOfLines={1}) inside a min-height that stays
91// taller than the text at every supported base font size (text-xs reaches
92// 23px at the 22pt maximum, under the 32px min-h-8), so row height is
93// deterministic. The "work log" label has no such clamp — its height follows
94// the scaled text-2xs line height. Values mirror the classNames below — keep
95// them in sync; a mismatch only costs a one-time correction on measure.
96const WORK_ROW_HEIGHT = 32; // min-h-8
97const WORK_ROW_GAP = 1; // gap-px
98const WORK_LOG_HEADER_PADDING = 2; // pb-0.5 under the "work log" label
99const WORK_LOG_BOTTOM_MARGIN = 4; // mb-1
100
101export const WORK_GROUP_TOGGLE_HEIGHT = 36; // min-h-8 (32) + mb-1 (4)
102
103export function collapsedWorkLogHeight(
104 activities: ReadonlyArray<ThreadFeedActivity>,
105 baseFontSize: number,
106): number {
107 const rows = visibleWorkLogActivities(activities);
108 if (rows.length === 0) {
109 return 0;
110 }
111 const onlyToolRows = rows.every((row) => row.toolLike);
112 const headerHeight =
113 scaledTypographyLineHeight(MOBILE_TYPOGRAPHY.caption, baseFontSize) + WORK_LOG_HEADER_PADDING;
114 return (
115 WORK_LOG_BOTTOM_MARGIN +
116 (onlyToolRows ? 0 : headerHeight) +
117 rows.length * WORK_ROW_HEIGHT +
118 (rows.length - 1) * WORK_ROW_GAP
119 );
120}
121
80export function ThreadWorkLog(props: {122export function ThreadWorkLog(props: {
81 readonly activities: ReadonlyArray<ThreadFeedActivity>;123 readonly activities: ReadonlyArray<ThreadFeedActivity>;
82 readonly copiedRowId: string | null;124 readonly copiedRowId: string | null;
...@@ -87,9 +129,10 @@ export function ThreadWorkLog(props: {...@@ -87,9 +129,10 @@ export function ThreadWorkLog(props: {
87}) {129}) {
88 const colorScheme = useColorScheme();130 const colorScheme = useColorScheme();
89 const pressedBackground = colorScheme === "dark" ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.035)";131 const pressedBackground = colorScheme === "dark" ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.035)";
90 const rows = props.activities132 const rows = visibleWorkLogActivities(props.activities).map((activity) => ({
91 .filter((activity) => !(activity.toolLike && activity.status === "neutral"))133 ...activity,
92 .map((activity) => ({ ...activity, detail: compactActivityDetail(activity.detail) }));134 detail: compactActivityDetail(activity.detail),
135 }));
93136
94 if (rows.length === 0) {137 if (rows.length === 0) {
95 return null;138 return null;
apps/mobile/src/lib/appearancePreferences.ts+16-1
...@@ -198,12 +198,27 @@ export function resolveTextScaleVariables(baseFontSize: number): Record<string,...@@ -198,12 +198,27 @@ export function resolveTextScaleVariables(baseFontSize: number): Record<string,
198198
199 for (const [name, role] of Object.entries(TEXT_SCALE_VARIABLE_ROLES)) {199 for (const [name, role] of Object.entries(TEXT_SCALE_VARIABLE_ROLES)) {
200 variables[name] = Math.max(8, Math.round(role.fontSize * scale));200 variables[name] = Math.max(8, Math.round(role.fontSize * scale));
201 variables[`${name}--line-height`] = Math.max(10, Math.round(role.lineHeight * scale));201 variables[`${name}--line-height`] = scaledTypographyLineHeight(role, baseFontSize);
202 }202 }
203203
204 return variables;204 return variables;
205}205}
206206
207/**
208 * The line height a MOBILE_TYPOGRAPHY role renders at under the given base
209 * font size — the same value resolveTextScaleVariables injects for the role's
210 * `--text-*--line-height` variable. For layout code that must predict
211 * text-driven heights (e.g. the thread feed's fixed item sizes) instead of
212 * measuring them.
213 */
214export function scaledTypographyLineHeight(
215 role: { readonly lineHeight: number },
216 baseFontSize: number,
217): number {
218 const scale = normalizeBaseFontSize(baseFontSize) / DEFAULT_BASE_FONT_SIZE;
219 return Math.max(10, Math.round(role.lineHeight * scale));
220}
221
207export function resolveNativeMarkdownTypography(baseFontSize: number): NativeMarkdownTypography {222export function resolveNativeMarkdownTypography(baseFontSize: number): NativeMarkdownTypography {
208 const fontSizes = resolveMarkdownFontSizes(baseFontSize);223 const fontSizes = resolveMarkdownFontSizes(baseFontSize);
209 return {224 return {