#80 Thread Topbar Bug and Related Improvements

Changelog: fix

Author: Tim Giroux

apps/polycentric/src/features/post/ThreadList.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { RefreshControl, useWindowDimensions, View } from 'react-native';
 import { type PostData } from '@/src/common/lib/polycentric-hooks';
 import { Post } from './Post';
@@ -17,8 +17,18 @@ export function ThreadList({ post, ...rest }: ThreadListProps) {
 
   const { thread } = useThread(post);
 
-  // Fall back to rendering just the subject until the server response lands.
-  const items = thread.length > 0 ? thread : [post];
+  // Mount the subject by itself first.
+  // Other items may or may not be available.
+  // This is a reliable way to keep the subject at its intended scroll
+  // position via FlashList maintainVisibleContentPosition.
+  // Before this, we had issues with FlashList behaving differently with
+  // cold vs warm caches at the call site.
+  const [isFirstLayoutComplete, setIsFirstLayoutComplete] = useState(false);
+
+  const items = useMemo(() => {
+    if (!isFirstLayoutComplete) return [post];
+    return thread.length > 0 ? thread : [post];
+  }, [isFirstLayoutComplete, thread, post]);
 
   const subjectIndex = items.findIndex((p) => p.id === post.id);
 
@@ -32,6 +42,7 @@ export function ThreadList({ post, ...rest }: ThreadListProps) {
       {...rest}
       data={items}
       initialScrollIndex={subjectIndex > 0 ? subjectIndex : undefined}
+      onLoad={() => setIsFirstLayoutComplete(true)}
       keyExtractor={(p) => p.id}
       renderItem={({ item, index }) => {
         const above = index > 0 ? items[index - 1] : null;

apps/polycentric/src/features/profile/ProfileHeader.tsx

@@ -10,7 +10,7 @@ import {
   truncateName,
   useUsername,
 } from '@/src/common/lib/polycentric-hooks';
-import { Atoms } from '@/src/common/theme';
+import { Atoms, useTheme } from '@/src/common/theme';
 import { useProfile } from '@/src/features/profile/hooks/useProfile';
 import { FetchMode } from '@polycentric/react-native';
 import { router } from 'expo-router';
@@ -27,6 +27,7 @@ export interface ProfileHeaderProps {
 }
 
 function ProfileHeaderInner({ bannerColors, onBack }: ProfileHeaderProps) {
+  const { theme } = useTheme();
   const { identityKey, isSelf, activeFeed, setActiveFeed } =
     useProfileContext();
 
@@ -44,7 +45,7 @@ function ProfileHeaderInner({ bannerColors, onBack }: ProfileHeaderProps) {
   if (profile.isLoading && !profile.name) return undefined;
 
   return (
-    <>
+    <View style={{ backgroundColor: theme.palette.neutral_0 }}>
       <View style={{ position: 'relative' }}>
         <View
           style={{
@@ -122,7 +123,7 @@ function ProfileHeaderInner({ bannerColors, onBack }: ProfileHeaderProps) {
           )}
         </View>
       </View>
-    </>
+    </View>
   );
 }