Prevent errant timeline scroll

ts/components/AddUserToAnotherGroupModal.dom.tsx

@@ -190,7 +190,7 @@ export function AddUserToAnotherGroupModal({
                     className="AddUserToAnotherGroupModal__list-wrapper"
                     ref={ref}
                   >
-                    {size != null && (
+                    {size != null && !size.hidden && (
                       <ListView
                         width={size.width}
                         height={size.height}

ts/components/CallsList.preload.tsx

@@ -1057,7 +1057,7 @@ export function CallsList({
         {(ref, size) => {
           return (
             <div className="CallsList__ListContainer" ref={ref}>
-              {size != null && (
+              {size != null && !size.hidden && (
                 <InfiniteLoader
                   ref={infiniteLoaderRef}
                   isRowLoaded={isRowLoaded}

ts/components/CallsNewCallButton.dom.tsx

@@ -314,7 +314,7 @@ export function CallsNewCall({
           {(ref, size) => {
             return (
               <div ref={ref} className="CallsNewCall__ListContainer">
-                {size != null && (
+                {size != null && !size.hidden && (
                   <List
                     className="CallsNewCall__List"
                     width={size.width}

ts/components/CompositionRecordingDraft.dom.tsx

@@ -49,6 +49,9 @@ export function CompositionRecordingDraft({
 
   const handleResize = useCallback(
     (size: Size) => {
+      if (size.hidden) {
+        return;
+      }
       if (size.width === state.width) {
         return;
       }

ts/components/ForwardMessagesModal.dom.tsx

@@ -375,7 +375,7 @@ export function ForwardMessagesModal({
                     ref={ref}
                   >
                     <ConversationList
-                      dimensions={size ?? undefined}
+                      dimensions={size?.hidden === false ? size : undefined}
                       getPreferredBadge={getPreferredBadge}
                       getRow={getRow}
                       i18n={i18n}

ts/components/GroupCallRemoteParticipants.dom.tsx

@@ -484,6 +484,9 @@ export function GroupCallRemoteParticipants({
       <div className="module-ongoing-call__participants__grid--wrapper">
         <SizeObserver
           onSizeChange={size => {
+            if (size.hidden) {
+              return;
+            }
             setGridDimensions(size);
           }}
         >

ts/components/LeftPane.dom.tsx

@@ -601,7 +601,9 @@ export function LeftPane({
   const previousMeasureSize = usePrevious(null, measureSize);
 
   const widthBreakpoint = getNavSidebarWidthBreakpoint(
-    measureSize?.width ?? preferredWidthFromStorage
+    measureSize && !measureSize.hidden
+      ? measureSize.width
+      : preferredWidthFromStorage
   );
 
   const commonDialogProps = {
@@ -926,7 +928,9 @@ export function LeftPane({
               >
                 <ConversationList
                   key={modeSpecificProps.mode}
-                  dimensions={measureSize ?? undefined}
+                  dimensions={
+                    measureSize?.hidden === false ? measureSize : undefined
+                  }
                   getPreferredBadge={getPreferredBadge}
                   getRow={getRow}
                   i18n={i18n}

ts/components/MediaEditor.dom.tsx

@@ -1259,6 +1259,9 @@ export function MediaEditor({
       <div className="MediaEditor__container">
         <SizeObserver
           onSizeChange={size => {
+            if (size.hidden) {
+              return;
+            }
             setContainerWidth(size.width);
             setContainerHeight(size.height);
           }}

ts/components/StoriesSettingsModal.dom.tsx

@@ -1220,7 +1220,7 @@ export function EditDistributionListModal({
           {(ref, size) => (
             <div className="StoriesSettingsModal__conversation-list" ref={ref}>
               <ConversationList
-                dimensions={size ?? undefined}
+                dimensions={size?.hidden === false ? size : undefined}
                 getPreferredBadge={getPreferredBadge}
                 getRow={getRow}
                 i18n={i18n}

ts/components/TextAttachment.dom.tsx

@@ -174,7 +174,7 @@ export const TextAttachment = forwardRef<HTMLTextAreaElement, PropsType>(
     const ref = useRef<HTMLDivElement>(null);
     const size = useSizeObserver(ref);
 
-    const scaleFactor = (size?.height || 1) / 1280;
+    const scaleFactor = (size?.hidden === false ? size.height : 1) / 1280;
 
     return (
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions

ts/components/conversation/ConversationHeader.dom.tsx

@@ -316,6 +316,9 @@ export const ConversationHeader = memo(function ConversationHeader({
       )}
       <SizeObserver
         onSizeChange={size => {
+          if (size.hidden) {
+            return;
+          }
           setIsNarrow(size.width < 500);
         }}
       >

ts/components/conversation/MessageMetadata.dom.tsx

@@ -302,6 +302,9 @@ export const MessageMetadata = forwardRef<HTMLDivElement, Readonly<PropsType>>(
 
     const onResize = useCallback(
       (size: Size) => {
+        if (size.hidden) {
+          return;
+        }
         onWidthMeasured?.(size.width);
       },
       [onWidthMeasured]

ts/components/conversation/Timeline.dom.tsx

@@ -1050,6 +1050,11 @@ export class Timeline extends React.Component<
       <ScrollerLockContext.Provider value={this.#scrollerLock}>
         <SizeObserver
           onSizeChange={size => {
+            if (size.hidden) {
+              // triggered when timeline is hidden via display: none
+              return;
+            }
+
             const { isNearBottom } = this.props;
 
             this.setState({

ts/components/conversation/conversation-details/AddGroupMembersModal/ChooseGroupMembersModal.dom.tsx

@@ -449,7 +449,7 @@ export function ChooseGroupMembersModal({
                     }
                   }}
                 >
-                  {size != null && (
+                  {size != null && !size.hidden && (
                     <ListView
                       width={size.width}
                       height={size.height}

ts/components/conversation/pinned-messages/PinnedMessagesPanel.dom.tsx

@@ -61,6 +61,9 @@ export const PinnedMessagesPanel = memo(function PinnedMessagesPanel(
   }, []);
 
   useSizeObserver(containerElementRef, size => {
+    if (size.hidden) {
+      return;
+    }
     setContainerWidthBreakpoint(getWidthBreakpoint(size.width));
   });
 

ts/components/preferences/PreferencesSelectChatsDialog.dom.tsx

@@ -246,7 +246,7 @@ export function PreferencesSelectChatsDialog(
         {(ref, size) => {
           return (
             <div ref={ref} className={tw('min-h-[100px] w-full flex-grow')}>
-              {size != null && (
+              {size != null && !size.hidden && (
                 <ConversationList
                   dimensions={size}
                   i18n={i18n}

ts/hooks/useSizeObserver.dom.tsx

@@ -4,17 +4,31 @@ import type { RefObject } from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { strictAssert } from '../util/assert.std.js';
 
-export type Size = Readonly<{
-  width: number;
-  height: number;
-}>;
+export type Size = Readonly<
+  { hidden: false; width: number; height: number } | { hidden: true }
+>;
 
 export type SizeChangeHandler = (size: Size) => void;
 
 export function isSameSize(a: Size, b: Size): boolean {
+  if (a.hidden || b.hidden) {
+    if (a.hidden && b.hidden) {
+      return true;
+    }
+    return false;
+  }
   return a.width === b.width && a.height === b.height;
 }
 
+function getNextSize(borderBoxSize: ResizeObserverSize): Size {
+  const width = borderBoxSize.inlineSize;
+  const height = borderBoxSize.blockSize;
+  if (width === 0 && height === 0) {
+    return { hidden: true };
+  }
+  return { hidden: false, width, height };
+}
+
 export function useSizeObserver<T extends Element = Element>(
   ref: RefObject<T>,
   /**
@@ -42,10 +56,8 @@ export function useSizeObserver<T extends Element = Element>(
       // We are assuming a horizontal writing-mode here, we could call
       // `getBoundingClientRect()` here but MDN says not to. In the future if
       // we are adding support for a vertical locale we may need to change this
-      const next: Size = {
-        width: borderBoxSize.inlineSize,
-        height: borderBoxSize.blockSize,
-      };
+
+      const next = getNextSize(borderBoxSize);
       const prev = sizeRef.current;
       if (prev == null || !isSameSize(prev, next)) {
         sizeRef.current = next;