From bb34c73069f32862d4e09f7978e864b0b8bd4ca5 Mon Sep 17 00:00:00 2001
From: Hampus <hampus@fluxer.app>
Date: Mon, 24 Aug 2026 12:42:09 +0200
Subject: [PATCH] perf(app): load sheet and popout media against their own
 scrollers (#1900)

---
 .../components/shared/ChannelPinsContent.tsx  | 183 +++++++++---------
 .../bottomsheets/ChannelSearchBottomSheet.tsx | 168 ++++++++--------
 .../modals/BookmarksBottomSheet.tsx           |  66 ++++---
 3 files changed, 217 insertions(+), 200 deletions(-)

diff --git a/fluxer_app/src/features/app/components/shared/ChannelPinsContent.tsx b/fluxer_app/src/features/app/components/shared/ChannelPinsContent.tsx
index a71adcf3c..98af3d60a 100644
--- a/fluxer_app/src/features/app/components/shared/ChannelPinsContent.tsx
+++ b/fluxer_app/src/features/app/components/shared/ChannelPinsContent.tsx
@@ -13,6 +13,7 @@ import {isKeyboardActivationKey} from '@app/features/input/utils/KeyboardUtils';
 import {ensureMembersForMessages} from '@app/features/messaging/commands/MessageCommands';
 import {useMessageListKeyboardNavigation} from '@app/features/messaging/hooks/useMessageListKeyboardNavigation';
 import {useMessageSelectionCopyForMessages} from '@app/features/messaging/hooks/useMessageSelectionCopy';
+import {NearViewportSurfaceContext} from '@app/features/messaging/hooks/useNearViewport';
 import type {Message} from '@app/features/messaging/models/MessagingMessage';
 import {focusChannelTextareaAfterNavigation} from '@app/features/messaging/utils/ChannelTextareaFocusUtils';
 import {goToMessage} from '@app/features/messaging/utils/MessageNavigator';
@@ -79,6 +80,7 @@ export const ChannelPinsContent = observer(({channel, onJump}: ChannelPinsConten
 	const canUnpin = isDMChannel || Permission.can(Permissions.MANAGE_MESSAGES, channel);
 	const mobileLayout = MobileLayout;
 	const scrollerRef = useRef<ScrollerHandle | null>(null);
+	const resolvePinnedScrollSurface = useMemo(() => () => scrollerRef.current?.getViewportElement() ?? null, []);
 	const [menuOpen, setMenuOpen] = useState(false);
 	const [selectedMessage, setSelectedMessage] = useState<Message | null>(null);
 	const pinMessagesPermissionLabel = formatPermissionLabel(i18n, Permissions.PIN_MESSAGES);
@@ -187,107 +189,114 @@ export const ChannelPinsContent = observer(({channel, onJump}: ChannelPinsConten
 	}
 	return (
 		<>
-			<Scroller
-				className={clsx(previewStyles.scroller, mobileLayout.enabled && previewStyles.scrollerMobile)}
-				key="channel-pins-scroller"
-				onScroll={handleScroll}
-				ref={scrollerRef}
-				onCopy={onCopySelectedMessages}
-				data-message-selection-root="true"
-				data-flx="app.channel-pins-content.scroller"
-			>
-				{mobileLayout.enabled && <div className={previewStyles.topSpacer} data-flx="app.channel-pins-content.div--5" />}
-				{pinnedPins.slice().map(({message}) => {
-					const cardClasses = clsx(previewStyles.previewCard, mobileLayout.enabled && previewStyles.previewCardMobile);
-					const messageChannel =
-						Channels.getChannel(message.channelId) ?? (message.channelId === channel.id ? channel : null);
-					if (!messageChannel) return null;
-					if (mobileLayout.enabled) {
+			<NearViewportSurfaceContext.Provider value={resolvePinnedScrollSurface}>
+				<Scroller
+					className={clsx(previewStyles.scroller, mobileLayout.enabled && previewStyles.scrollerMobile)}
+					key="channel-pins-scroller"
+					onScroll={handleScroll}
+					ref={scrollerRef}
+					onCopy={onCopySelectedMessages}
+					data-message-selection-root="true"
+					data-flx="app.channel-pins-content.scroller"
+				>
+					{mobileLayout.enabled && (
+						<div className={previewStyles.topSpacer} data-flx="app.channel-pins-content.div--5" />
+					)}
+					{pinnedPins.slice().map(({message}) => {
+						const cardClasses = clsx(
+							previewStyles.previewCard,
+							mobileLayout.enabled && previewStyles.previewCardMobile,
+						);
+						const messageChannel =
+							Channels.getChannel(message.channelId) ?? (message.channelId === channel.id ? channel : null);
+						if (!messageChannel) return null;
+						if (mobileLayout.enabled) {
+							return (
+								<LongPressable
+									key={message.id}
+									className={cardClasses}
+									data-message-id={message.id}
+									data-is-group-start="true"
+									role="button"
+									tabIndex={0}
+									onClick={() => handleTap(message)}
+									onKeyDown={(e) => {
+										if (isKeyboardActivationKey(e.key)) {
+											e.preventDefault();
+											handleTap(message);
+										}
+									}}
+									onLongPress={() => {
+										if (!canUnpin) return;
+										setSelectedMessage(message);
+										setMenuOpen(true);
+									}}
+									data-flx="app.channel-pins-content.button.tap"
+								>
+									<MessageComponent
+										message={message}
+										channel={messageChannel}
+										previewContext={MessagePreviewContext.LIST_POPOUT}
+										data-flx="app.channel-pins-content.message-component"
+									/>
+								</LongPressable>
+							);
+						}
 						return (
-							<LongPressable
+							<div
 								key={message.id}
 								className={cardClasses}
 								data-message-id={message.id}
 								data-is-group-start="true"
-								role="button"
-								tabIndex={0}
-								onClick={() => handleTap(message)}
-								onKeyDown={(e) => {
-									if (isKeyboardActivationKey(e.key)) {
-										e.preventDefault();
-										handleTap(message);
-									}
-								}}
-								onLongPress={() => {
-									if (!canUnpin) return;
-									setSelectedMessage(message);
-									setMenuOpen(true);
-								}}
-								data-flx="app.channel-pins-content.button.tap"
+								data-flx="app.channel-pins-content.div--6"
 							>
 								<MessageComponent
 									message={message}
 									channel={messageChannel}
 									previewContext={MessagePreviewContext.LIST_POPOUT}
-									data-flx="app.channel-pins-content.message-component"
+									data-flx="app.channel-pins-content.message-component--2"
 								/>
-							</LongPressable>
+								<div className={previewStyles.actionButtons} data-flx="app.channel-pins-content.div--7">
+									<FocusRing offset={-2} data-flx="app.channel-pins-content.focus-ring">
+										<button
+											type="button"
+											className={previewStyles.actionButton}
+											onClick={() => handleJump(message.channelId, message.id)}
+											data-flx="app.channel-pins-content.button.jump"
+										>
+											{i18n._(JUMP_DESCRIPTOR)}
+										</button>
+									</FocusRing>
+									{renderUnpinButton(message)}
+								</div>
+							</div>
 						);
-					}
-					return (
-						<div
-							key={message.id}
-							className={cardClasses}
-							data-message-id={message.id}
-							data-is-group-start="true"
-							data-flx="app.channel-pins-content.div--6"
-						>
-							<MessageComponent
-								message={message}
-								channel={messageChannel}
-								previewContext={MessagePreviewContext.LIST_POPOUT}
-								data-flx="app.channel-pins-content.message-component--2"
-							/>
-							<div className={previewStyles.actionButtons} data-flx="app.channel-pins-content.div--7">
-								<FocusRing offset={-2} data-flx="app.channel-pins-content.focus-ring">
-									<button
-										type="button"
-										className={previewStyles.actionButton}
-										onClick={() => handleJump(message.channelId, message.id)}
-										data-flx="app.channel-pins-content.button.jump"
-									>
-										{i18n._(JUMP_DESCRIPTOR)}
-									</button>
-								</FocusRing>
-								{renderUnpinButton(message)}
+					})}
+					{isLoading && (
+						<div className={previewStyles.loadingState} data-flx="app.channel-pins-content.div--8">
+							<Spinner data-flx="app.channel-pins-content.spinner--2" />
+						</div>
+					)}
+					{!hasMore && (
+						<div className={previewStyles.endState} data-flx="app.channel-pins-content.div--9">
+							<div className={previewStyles.endStateContent} data-flx="app.channel-pins-content.div--10">
+								<FlagCheckeredIcon
+									className={previewStyles.endStateIcon}
+									data-flx="app.channel-pins-content.flag-checkered-icon"
+								/>
+								<div className={previewStyles.endStateTextContainer} data-flx="app.channel-pins-content.div--11">
+									<h3 className={previewStyles.endStateTitle} data-flx="app.channel-pins-content.h3--2">
+										{i18n._(YOU_VE_REACHED_THE_END_DESCRIPTOR)}
+									</h3>
+									<p className={previewStyles.endStateDescription} data-flx="app.channel-pins-content.p--2">
+										{endStateDescription}
+									</p>
+								</div>
 							</div>
 						</div>
-					);
-				})}
-				{isLoading && (
-					<div className={previewStyles.loadingState} data-flx="app.channel-pins-content.div--8">
-						<Spinner data-flx="app.channel-pins-content.spinner--2" />
-					</div>
-				)}
-				{!hasMore && (
-					<div className={previewStyles.endState} data-flx="app.channel-pins-content.div--9">
-						<div className={previewStyles.endStateContent} data-flx="app.channel-pins-content.div--10">
-							<FlagCheckeredIcon
-								className={previewStyles.endStateIcon}
-								data-flx="app.channel-pins-content.flag-checkered-icon"
-							/>
-							<div className={previewStyles.endStateTextContainer} data-flx="app.channel-pins-content.div--11">
-								<h3 className={previewStyles.endStateTitle} data-flx="app.channel-pins-content.h3--2">
-									{i18n._(YOU_VE_REACHED_THE_END_DESCRIPTOR)}
-								</h3>
-								<p className={previewStyles.endStateDescription} data-flx="app.channel-pins-content.p--2">
-									{endStateDescription}
-								</p>
-							</div>
-						</div>
-					</div>
-				)}
-			</Scroller>
+					)}
+				</Scroller>
+			</NearViewportSurfaceContext.Provider>
 			{mobileLayout.enabled && selectedMessage && (
 				<MenuBottomSheet
 					isOpen={menuOpen}
diff --git a/fluxer_app/src/features/channel/components/bottomsheets/ChannelSearchBottomSheet.tsx b/fluxer_app/src/features/channel/components/bottomsheets/ChannelSearchBottomSheet.tsx
index 9afdb3192..25d3d8ead 100644
--- a/fluxer_app/src/features/channel/components/bottomsheets/ChannelSearchBottomSheet.tsx
+++ b/fluxer_app/src/features/channel/components/bottomsheets/ChannelSearchBottomSheet.tsx
@@ -27,6 +27,7 @@ import {isKeyboardActivationKey} from '@app/features/input/utils/KeyboardUtils';
 import * as MessageCommands from '@app/features/messaging/commands/MessageCommands';
 import {useMessageListKeyboardNavigation} from '@app/features/messaging/hooks/useMessageListKeyboardNavigation';
 import {useMessageSelectionCopyForMessages} from '@app/features/messaging/hooks/useMessageSelectionCopy';
+import {NearViewportSurfaceContext} from '@app/features/messaging/hooks/useNearViewport';
 import type {Message} from '@app/features/messaging/models/MessagingMessage';
 import {
 	applyChannelSearchHighlight,
@@ -67,7 +68,7 @@ import {MessagePreviewContext} from '@fluxer/constants/src/ChannelConstants';
 import {Trans, useLingui} from '@lingui/react/macro';
 import {HashIcon} from '@phosphor-icons/react';
 import {observer} from 'mobx-react-lite';
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 
 const NEWEST_DESCRIPTOR = msg({
 	message: 'Newest',
@@ -189,6 +190,7 @@ export const ChannelSearchBottomSheet: React.FC<ChannelSearchBottomSheetProps> =
 		const [selectedMessage, setSelectedMessage] = useState<Message | null>(null);
 		const [selectedMessageChannel, setSelectedMessageChannel] = useState<Channel | null>(null);
 		const scrollerRef = useRef<ScrollerHandle | null>(null);
+		const resolveSearchSheetScrollSurface = useMemo(() => () => scrollerRef.current?.getViewportElement() ?? null, []);
 		const inputRef = useRef<HTMLInputElement>(null);
 		const [hasFilters, setHasFilters] = useState<Array<HasFilterType>>([]);
 		const [fromUserIds, setFromUserIds] = useState<Array<string>>([]);
@@ -605,89 +607,91 @@ export const ChannelSearchBottomSheet: React.FC<ChannelSearchBottomSheetProps> =
 								value={collapsedMessageVisibility}
 								data-flx="channel.channel-search-bottom-sheet.render-content.collapsed-message-visibility-provider"
 							>
-								<Scroller
-									ref={scrollerRef}
-									className={styles.resultsScroller}
-									key="channel-search-results-scroller"
-									onCopy={onCopySelectedMessages}
-									data-message-selection-root="true"
-									data-flx="channel.channel-search-bottom-sheet.render-content.results-scroller"
-								>
-									{resultGroups.map((resultGroup) => {
-										const messageChannel =
-											searchChannelsById.get(resultGroup.channelId) ?? Channels.getChannel(resultGroup.channelId);
-										if (!messageChannel) {
-											return null;
-										}
-										const renderMessageWrapper = ({
-											message,
-											index,
-											isGroupStart,
-											children,
-										}: MessageGroupRenderWrapperProps) => (
-											<LongPressable
-												data-message-index={index}
-												data-message-id={message.id}
-												data-is-group-start={isGroupStart}
-												className={styles.searchResultItem}
-												role="button"
-												tabIndex={0}
-												onClick={() => handleTap(message)}
-												onKeyDown={(e) => {
-													if (isKeyboardActivationKey(e.key)) {
-														e.preventDefault();
-														handleTap(message);
-													}
-												}}
-												onLongPress={() => {
-													setSelectedMessage(message);
-													setMenuOpen(true);
-												}}
-												data-flx="channel.channel-search-bottom-sheet.render-message-wrapper.search-result-item.tap"
-											>
-												{children}
-											</LongPressable>
-										);
-										return (
-											<React.Fragment key={resultGroup.key}>
-												{hasMultipleChannels && (
-													<div
-														className={styles.channelSection}
-														data-flx="channel.channel-search-bottom-sheet.render-content.channel-section"
-													>
-														{ChannelUtils.getIcon(messageChannel, {
-															className: styles.channelIcon,
-														})}
-														<span
-															className={styles.channelName}
-															data-flx="channel.channel-search-bottom-sheet.render-content.channel-name"
+								<NearViewportSurfaceContext.Provider value={resolveSearchSheetScrollSurface}>
+									<Scroller
+										ref={scrollerRef}
+										className={styles.resultsScroller}
+										key="channel-search-results-scroller"
+										onCopy={onCopySelectedMessages}
+										data-message-selection-root="true"
+										data-flx="channel.channel-search-bottom-sheet.render-content.results-scroller"
+									>
+										{resultGroups.map((resultGroup) => {
+											const messageChannel =
+												searchChannelsById.get(resultGroup.channelId) ?? Channels.getChannel(resultGroup.channelId);
+											if (!messageChannel) {
+												return null;
+											}
+											const renderMessageWrapper = ({
+												message,
+												index,
+												isGroupStart,
+												children,
+											}: MessageGroupRenderWrapperProps) => (
+												<LongPressable
+													data-message-index={index}
+													data-message-id={message.id}
+													data-is-group-start={isGroupStart}
+													className={styles.searchResultItem}
+													role="button"
+													tabIndex={0}
+													onClick={() => handleTap(message)}
+													onKeyDown={(e) => {
+														if (isKeyboardActivationKey(e.key)) {
+															e.preventDefault();
+															handleTap(message);
+														}
+													}}
+													onLongPress={() => {
+														setSelectedMessage(message);
+														setMenuOpen(true);
+													}}
+													data-flx="channel.channel-search-bottom-sheet.render-message-wrapper.search-result-item.tap"
+												>
+													{children}
+												</LongPressable>
+											);
+											return (
+												<React.Fragment key={resultGroup.key}>
+													{hasMultipleChannels && (
+														<div
+															className={styles.channelSection}
+															data-flx="channel.channel-search-bottom-sheet.render-content.channel-section"
 														>
-															{messageChannel.name || 'Unnamed Channel'}
-														</span>
-													</div>
-												)}
-												<SearchResultMessageList
-													channel={messageChannel}
-													messages={resultGroup.messages}
-													revealedGroupKeys={revealedGroupKeys}
-													onGroupRevealChange={handleCollapsedGroupRevealChange}
-													collapsedGroupClassName={styles.collapsedMessageGroup}
-													messagePreviewContext={MessagePreviewContext.LIST_POPOUT}
-													renderMessageWrapper={renderMessageWrapper}
-													spammerOverrideVersion={spammerOverrideVersion}
-													renderMessage={(message) => (
-														<SearchResultItem
-															message={message}
-															messageChannel={messageChannel}
-															data-flx="channel.channel-search-bottom-sheet.render-content.search-result-item"
-														/>
+															{ChannelUtils.getIcon(messageChannel, {
+																className: styles.channelIcon,
+															})}
+															<span
+																className={styles.channelName}
+																data-flx="channel.channel-search-bottom-sheet.render-content.channel-name"
+															>
+																{messageChannel.name || 'Unnamed Channel'}
+															</span>
+														</div>
 													)}
-													data-flx="channel.channel-search-bottom-sheet.render-content.search-result-message-list"
-												/>
-											</React.Fragment>
-										);
-									})}
-								</Scroller>
+													<SearchResultMessageList
+														channel={messageChannel}
+														messages={resultGroup.messages}
+														revealedGroupKeys={revealedGroupKeys}
+														onGroupRevealChange={handleCollapsedGroupRevealChange}
+														collapsedGroupClassName={styles.collapsedMessageGroup}
+														messagePreviewContext={MessagePreviewContext.LIST_POPOUT}
+														renderMessageWrapper={renderMessageWrapper}
+														spammerOverrideVersion={spammerOverrideVersion}
+														renderMessage={(message) => (
+															<SearchResultItem
+																message={message}
+																messageChannel={messageChannel}
+																data-flx="channel.channel-search-bottom-sheet.render-content.search-result-item"
+															/>
+														)}
+														data-flx="channel.channel-search-bottom-sheet.render-content.search-result-message-list"
+													/>
+												</React.Fragment>
+											);
+										})}
+									</Scroller>
+								</NearViewportSurfaceContext.Provider>
 							</CollapsedMessageVisibilityProvider>
 							{totalPages > 1 && (
 								<div
diff --git a/fluxer_app/src/features/channel/components/modals/BookmarksBottomSheet.tsx b/fluxer_app/src/features/channel/components/modals/BookmarksBottomSheet.tsx
index 12c9420b1..83910390f 100644
--- a/fluxer_app/src/features/channel/components/modals/BookmarksBottomSheet.tsx
+++ b/fluxer_app/src/features/channel/components/modals/BookmarksBottomSheet.tsx
@@ -10,6 +10,7 @@ import {ensureMembersForMessages} from '@app/features/messaging/commands/Message
 import * as SavedMessageCommands from '@app/features/messaging/commands/SavedMessageCommands';
 import {useMessageListKeyboardNavigation} from '@app/features/messaging/hooks/useMessageListKeyboardNavigation';
 import {useMessageSelectionCopyForMessages} from '@app/features/messaging/hooks/useMessageSelectionCopy';
+import {NearViewportSurfaceContext} from '@app/features/messaging/hooks/useNearViewport';
 import type {Message} from '@app/features/messaging/models/MessagingMessage';
 import SavedMessages from '@app/features/messaging/state/SavedMessages';
 import {focusChannelTextareaAfterNavigation} from '@app/features/messaging/utils/ChannelTextareaFocusUtils';
@@ -23,7 +24,7 @@ import {msg} from '@lingui/core/macro';
 import {Trans, useLingui} from '@lingui/react/macro';
 import {ArrowSquareOutIcon, TrashIcon} from '@phosphor-icons/react';
 import {observer} from 'mobx-react-lite';
-import {useEffect, useRef, useState} from 'react';
+import {useEffect, useMemo, useRef, useState} from 'react';
 
 const JUMP_TO_MESSAGE_DESCRIPTOR = msg({
 	message: 'Jump to message',
@@ -44,6 +45,7 @@ export const BookmarksBottomSheet = observer(({isOpen, onClose}: BookmarksBottom
 	const {savedMessages, missingSavedMessages, fetched} = SavedMessages;
 	const hasBookmarks = savedMessages.length > 0 || missingSavedMessages.length > 0;
 	const scrollerRef = useRef<ScrollerHandle | null>(null);
+	const resolveBookmarksScrollSurface = useMemo(() => () => scrollerRef.current?.getViewportElement() ?? null, []);
 	const [selectedMessage, setSelectedMessage] = useState<Message | null>(null);
 	const [menuOpen, setMenuOpen] = useState(false);
 	const onCopySelectedMessages = useMessageSelectionCopyForMessages<HTMLDivElement>(savedMessages);
@@ -122,39 +124,41 @@ export const BookmarksBottomSheet = observer(({isOpen, onClose}: BookmarksBottom
 				data-flx="channel.bookmarks-bottom-sheet.bottom-sheet"
 			>
 				{hasBookmarks ? (
-					<Scroller
-						className={styles.messageList}
-						key="bookmarks-bottom-sheet-scroller"
-						ref={scrollerRef}
-						onCopy={onCopySelectedMessages}
-						data-message-selection-root="true"
-						data-flx="channel.bookmarks-bottom-sheet.message-list"
-					>
-						{missingSavedMessages.length > 0 && (
-							<div className={styles.missingList} data-flx="channel.bookmarks-bottom-sheet.missing-list">
-								{missingSavedMessages.map((entry) => (
-									<SavedMessageMissingCard
-										key={entry.id}
-										entryId={entry.id}
-										onRemove={() => SavedMessageCommands.remove(i18n, entry.id)}
-										data-flx="channel.bookmarks-bottom-sheet.saved-message-missing-card"
+					<NearViewportSurfaceContext.Provider value={resolveBookmarksScrollSurface}>
+						<Scroller
+							className={styles.messageList}
+							key="bookmarks-bottom-sheet-scroller"
+							ref={scrollerRef}
+							onCopy={onCopySelectedMessages}
+							data-message-selection-root="true"
+							data-flx="channel.bookmarks-bottom-sheet.message-list"
+						>
+							{missingSavedMessages.length > 0 && (
+								<div className={styles.missingList} data-flx="channel.bookmarks-bottom-sheet.missing-list">
+									{missingSavedMessages.map((entry) => (
+										<SavedMessageMissingCard
+											key={entry.id}
+											entryId={entry.id}
+											onRemove={() => SavedMessageCommands.remove(i18n, entry.id)}
+											data-flx="channel.bookmarks-bottom-sheet.saved-message-missing-card"
+										/>
+									))}
+								</div>
+							)}
+							<div className={styles.topSpacer} data-flx="channel.bookmarks-bottom-sheet.top-spacer" />
+							<div className={styles.messagesContainer} data-flx="channel.bookmarks-bottom-sheet.messages-container">
+								{savedMessages.map((message) => (
+									<MessageWithLongPress
+										key={message.id}
+										message={message}
+										onLongPress={handleLongPress}
+										onClick={handleJumpToMessage}
+										data-flx="channel.bookmarks-bottom-sheet.message-with-long-press.jump-to-message"
 									/>
 								))}
 							</div>
-						)}
-						<div className={styles.topSpacer} data-flx="channel.bookmarks-bottom-sheet.top-spacer" />
-						<div className={styles.messagesContainer} data-flx="channel.bookmarks-bottom-sheet.messages-container">
-							{savedMessages.map((message) => (
-								<MessageWithLongPress
-									key={message.id}
-									message={message}
-									onLongPress={handleLongPress}
-									onClick={handleJumpToMessage}
-									data-flx="channel.bookmarks-bottom-sheet.message-with-long-press.jump-to-message"
-								/>
-							))}
-						</div>
-					</Scroller>
+						</Scroller>
+					</NearViewportSurfaceContext.Provider>
 				) : (
 					<div className={styles.emptyState} data-flx="channel.bookmarks-bottom-sheet.empty-state">
 						<div className={styles.emptyContent} data-flx="channel.bookmarks-bottom-sheet.empty-content">