perf(app): load sheet and popout media against their own scrollers (#1900)

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,6 +189,7 @@ export const ChannelPinsContent = observer(({channel, onJump}: ChannelPinsConten
 	}
 	return (
 		<>
+			<NearViewportSurfaceContext.Provider value={resolvePinnedScrollSurface}>
 				<Scroller
 					className={clsx(previewStyles.scroller, mobileLayout.enabled && previewStyles.scrollerMobile)}
 					key="channel-pins-scroller"
@@ -196,9 +199,14 @@ export const ChannelPinsContent = observer(({channel, onJump}: ChannelPinsConten
 					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" />}
+					{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 cardClasses = clsx(
+							previewStyles.previewCard,
+							mobileLayout.enabled && previewStyles.previewCardMobile,
+						);
 						const messageChannel =
 							Channels.getChannel(message.channelId) ?? (message.channelId === channel.id ? channel : null);
 						if (!messageChannel) return null;
@@ -288,6 +296,7 @@ export const ChannelPinsContent = observer(({channel, onJump}: ChannelPinsConten
 						</div>
 					)}
 				</Scroller>
+			</NearViewportSurfaceContext.Provider>
 			{mobileLayout.enabled && selectedMessage && (
 				<MenuBottomSheet
 					isOpen={menuOpen}

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,6 +607,7 @@ export const ChannelSearchBottomSheet: React.FC<ChannelSearchBottomSheetProps> =
 								value={collapsedMessageVisibility}
 								data-flx="channel.channel-search-bottom-sheet.render-content.collapsed-message-visibility-provider"
 							>
+								<NearViewportSurfaceContext.Provider value={resolveSearchSheetScrollSurface}>
 									<Scroller
 										ref={scrollerRef}
 										className={styles.resultsScroller}
@@ -688,6 +691,7 @@ export const ChannelSearchBottomSheet: React.FC<ChannelSearchBottomSheetProps> =
 											);
 										})}
 									</Scroller>
+								</NearViewportSurfaceContext.Provider>
 							</CollapsedMessageVisibilityProvider>
 							{totalPages > 1 && (
 								<div

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,6 +124,7 @@ export const BookmarksBottomSheet = observer(({isOpen, onClose}: BookmarksBottom
 				data-flx="channel.bookmarks-bottom-sheet.bottom-sheet"
 			>
 				{hasBookmarks ? (
+					<NearViewportSurfaceContext.Provider value={resolveBookmarksScrollSurface}>
 						<Scroller
 							className={styles.messageList}
 							key="bookmarks-bottom-sheet-scroller"
@@ -155,6 +158,7 @@ export const BookmarksBottomSheet = observer(({isOpen, onClose}: BookmarksBottom
 								))}
 							</div>
 						</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">