Fix flashes and jumps when opening profile (#2815)

* Don't reset the tree when profile loads fully

* Give avatars a background color like placeholders

* Prevent jumps due to rich text resolving

* Rm log

* Rm unused

1 files changed, 31 insertions, 3 deletions

diff --git a/src/view/com/pager/PagerWithHeader.web.tsx b/src/view/com/pager/PagerWithHeader.web.tsx
index 4f959d548..9c63c149f 100644
--- a/src/view/com/pager/PagerWithHeader.web.tsx
+++ b/src/view/com/pager/PagerWithHeader.web.tsx
@@ -31,6 +31,7 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
       children,
       testID,
       items,
+      isHeaderReady,
       renderHeader,
       initialPage,
       onPageSelected,
@@ -46,6 +47,7 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
           <PagerTabBar
             items={items}
             renderHeader={renderHeader}
+            isHeaderReady={isHeaderReady}
             currentPage={currentPage}
             onCurrentPageSelected={onCurrentPageSelected}
             onSelect={props.onSelect}
@@ -54,7 +56,14 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
           />
         )
       },
-      [items, renderHeader, currentPage, onCurrentPageSelected, testID],
+      [
+        items,
+        isHeaderReady,
+        renderHeader,
+        currentPage,
+        onCurrentPageSelected,
+        testID,
+      ],
     )
 
     const onPageSelectedInner = React.useCallback(
@@ -80,8 +89,14 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
         {toArray(children)
           .filter(Boolean)
           .map((child, i) => {
+            const isReady = isHeaderReady
             return (
-              <View key={i} collapsable={false}>
+              <View
+                key={i}
+                collapsable={false}
+                style={{
+                  display: isReady ? undefined : 'none',
+                }}>
                 <PagerItem isFocused={i === currentPage} renderTab={child} />
               </View>
             )
@@ -94,6 +109,7 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
 let PagerTabBar = ({
   currentPage,
   items,
+  isHeaderReady,
   testID,
   renderHeader,
   onCurrentPageSelected,
@@ -104,6 +120,7 @@ let PagerTabBar = ({
   items: string[]
   testID?: string
   renderHeader?: () => JSX.Element
+  isHeaderReady: boolean
   onCurrentPageSelected?: (index: number) => void
   onSelect?: (index: number) => void
   tabBarAnchor?: JSX.Element | null | undefined
@@ -112,7 +129,12 @@ let PagerTabBar = ({
   const {isMobile} = useWebMediaQueries()
   return (
     <>
-      <View style={[!isMobile && styles.headerContainerDesktop, pal.border]}>
+      <View
+        style={[
+          !isMobile && styles.headerContainerDesktop,
+          pal.border,
+          !isHeaderReady && styles.loadingHeader,
+        ]}>
         {renderHeader?.()}
       </View>
       {tabBarAnchor}
@@ -123,6 +145,9 @@ let PagerTabBar = ({
             ? styles.tabBarContainerMobile
             : styles.tabBarContainerDesktop,
           pal.border,
+          {
+            display: isHeaderReady ? undefined : 'none',
+          },
         ]}>
         <TabBar
           testID={testID}
@@ -183,6 +208,9 @@ const styles = StyleSheet.create({
     paddingLeft: 14,
     paddingRight: 14,
   },
+  loadingHeader: {
+    borderColor: 'transparent',
+  },
 })
 
 function toArray<T>(v: T | T[]): T[] {