Tweak rendering of top headers so they always appear even during load (#4982)

Co-authored-by: Eric Bailey <git@esb.lol>

src/alf/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Dimensions} from 'react-native'
+import {useMediaQuery} from 'react-responsive'
 
 import {createThemes, defaultTheme} from '#/alf/themes'
 import {Theme, ThemeName} from '#/alf/types'
@@ -12,52 +12,15 @@ export * from '#/alf/util/flatten'
 export * from '#/alf/util/platform'
 export * from '#/alf/util/themeSelector'
 
-type BreakpointName = keyof typeof breakpoints
-
-/*
- * Breakpoints
- */
-const breakpoints: {
-  [key: string]: number
-} = {
-  gtPhone: 500,
-  gtMobile: 800,
-  gtTablet: 1300,
-}
-function getActiveBreakpoints({width}: {width: number}) {
-  const active: (keyof typeof breakpoints)[] = Object.keys(breakpoints).filter(
-    breakpoint => width >= breakpoints[breakpoint],
-  )
-
-  return {
-    active: active[active.length - 1],
-    gtPhone: active.includes('gtPhone'),
-    gtMobile: active.includes('gtMobile'),
-    gtTablet: active.includes('gtTablet'),
-  }
-}
-
 /*
  * Context
  */
 export const Context = React.createContext<{
   themeName: ThemeName
   theme: Theme
-  breakpoints: {
-    active: BreakpointName | undefined
-    gtPhone: boolean
-    gtMobile: boolean
-    gtTablet: boolean
-  }
 }>({
   themeName: 'light',
   theme: defaultTheme,
-  breakpoints: {
-    active: undefined,
-    gtPhone: false,
-    gtMobile: false,
-    gtTablet: false,
-  },
 })
 
 export function ThemeProvider({
@@ -74,18 +37,6 @@ export function ThemeProvider({
     })
   }, [])
   const theme = themes[themeName]
-  const [breakpoints, setBreakpoints] = React.useState(() =>
-    getActiveBreakpoints({width: Dimensions.get('window').width}),
-  )
-
-  React.useEffect(() => {
-    const listener = Dimensions.addEventListener('change', ({window}) => {
-      const bp = getActiveBreakpoints({width: window.width})
-      if (bp.active !== breakpoints.active) setBreakpoints(bp)
-    })
-
-    return listener.remove
-  }, [breakpoints, setBreakpoints])
 
   return (
     <Context.Provider
@@ -93,9 +44,8 @@ export function ThemeProvider({
         () => ({
           themeName: themeName,
           theme: theme,
-          breakpoints,
         }),
-        [theme, themeName, breakpoints],
+        [theme, themeName],
       )}>
       {children}
     </Context.Provider>
@@ -107,5 +57,12 @@ export function useTheme() {
 }
 
 export function useBreakpoints() {
-  return React.useContext(Context).breakpoints
+  const gtPhone = useMediaQuery({minWidth: 500})
+  const gtMobile = useMediaQuery({minWidth: 800})
+  const gtTablet = useMediaQuery({minWidth: 1300})
+  return {
+    gtPhone,
+    gtMobile,
+    gtTablet,
+  }
 }

src/screens/Post/PostLikedBy.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import {View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useFocusEffect} from '@react-navigation/native'
@@ -7,9 +6,12 @@ import {useFocusEffect} from '@react-navigation/native'
 import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
 import {makeRecordUri} from '#/lib/strings/url-helpers'
 import {useSetMinimalShellMode} from '#/state/shell'
+import {isWeb} from 'platform/detection'
 import {PostLikedBy as PostLikedByComponent} from '#/view/com/post-thread/PostLikedBy'
 import {ViewHeader} from '#/view/com/util/ViewHeader'
+import {CenteredView} from 'view/com/util/Views'
 import {atoms as a} from '#/alf'
+import {ListHeaderDesktop} from '#/components/Lists'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostLikedBy'>
 export const PostLikedByScreen = ({route}: Props) => {
@@ -25,9 +27,10 @@ export const PostLikedByScreen = ({route}: Props) => {
   )
 
   return (
-    <View style={a.flex_1}>
-      <ViewHeader title={_(msg`Liked By`)} />
+    <CenteredView style={a.h_full_vh} sideBorders={true}>
+      <ListHeaderDesktop title={_(msg`Liked By`)} />
+      <ViewHeader title={_(msg`Liked By`)} showBorder={!isWeb} />
       <PostLikedByComponent uri={uri} />
-    </View>
+    </CenteredView>
   )
 }

src/screens/Post/PostQuotes.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import {View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useFocusEffect} from '@react-navigation/native'
@@ -7,9 +6,12 @@ import {useFocusEffect} from '@react-navigation/native'
 import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
 import {makeRecordUri} from '#/lib/strings/url-helpers'
 import {useSetMinimalShellMode} from '#/state/shell'
+import {isWeb} from 'platform/detection'
 import {PostQuotes as PostQuotesComponent} from '#/view/com/post-thread/PostQuotes'
 import {ViewHeader} from '#/view/com/util/ViewHeader'
+import {CenteredView} from 'view/com/util/Views'
 import {atoms as a} from '#/alf'
+import {ListHeaderDesktop} from '#/components/Lists'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostQuotes'>
 export const PostQuotesScreen = ({route}: Props) => {
@@ -25,9 +27,10 @@ export const PostQuotesScreen = ({route}: Props) => {
   )
 
   return (
-    <View style={a.flex_1}>
-      <ViewHeader title={_(msg`Quotes`)} />
+    <CenteredView style={a.h_full_vh} sideBorders={true}>
+      <ListHeaderDesktop title={_(msg`Quotes`)} />
+      <ViewHeader title={_(msg`Quotes`)} showBorder={!isWeb} />
       <PostQuotesComponent uri={uri} />
-    </View>
+    </CenteredView>
   )
 }

src/screens/Post/PostRepostedBy.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import {View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useFocusEffect} from '@react-navigation/native'
@@ -7,9 +6,12 @@ import {useFocusEffect} from '@react-navigation/native'
 import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
 import {makeRecordUri} from '#/lib/strings/url-helpers'
 import {useSetMinimalShellMode} from '#/state/shell'
+import {isWeb} from 'platform/detection'
 import {PostRepostedBy as PostRepostedByComponent} from '#/view/com/post-thread/PostRepostedBy'
 import {ViewHeader} from '#/view/com/util/ViewHeader'
+import {CenteredView} from 'view/com/util/Views'
 import {atoms as a} from '#/alf'
+import {ListHeaderDesktop} from '#/components/Lists'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostRepostedBy'>
 export const PostRepostedByScreen = ({route}: Props) => {
@@ -25,9 +27,10 @@ export const PostRepostedByScreen = ({route}: Props) => {
   )
 
   return (
-    <View style={a.flex_1}>
-      <ViewHeader title={_(msg`Reposted By`)} />
+    <CenteredView style={a.h_full_vh} sideBorders={true}>
+      <ListHeaderDesktop title={_(msg`Reposted By`)} />
+      <ViewHeader title={_(msg`Reposted By`)} showBorder={!isWeb} />
       <PostRepostedByComponent uri={uri} />
-    </View>
+    </CenteredView>
   )
 }

src/view/com/post-thread/PostLikedBy.tsx

@@ -1,23 +1,24 @@
 import React, {useCallback, useMemo, useState} from 'react'
 import {AppBskyFeedGetLikes as GetLikes} from '@atproto/api'
-import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
 
 import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
 import {useLikedByQuery} from '#/state/queries/post-liked-by'
 import {useResolveUriQuery} from '#/state/queries/resolve-uri'
 import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
+import {isWeb} from 'platform/detection'
 import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard'
 import {List} from '#/view/com/util/List'
-import {
-  ListFooter,
-  ListHeaderDesktop,
-  ListMaybePlaceholder,
-} from '#/components/Lists'
+import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
 
-function renderItem({item}: {item: GetLikes.Like}) {
-  return <ProfileCardWithFollowBtn key={item.actor.did} profile={item.actor} />
+function renderItem({item, index}: {item: GetLikes.Like; index: number}) {
+  return (
+    <ProfileCardWithFollowBtn
+      key={item.actor.did}
+      profile={item.actor}
+      noBorder={index === 0 && !isWeb}
+    />
+  )
 }
 
 function keyExtractor(item: GetLikes.Like) {
@@ -25,7 +26,6 @@ function keyExtractor(item: GetLikes.Like) {
 }
 
 export function PostLikedBy({uri}: {uri: string}) {
-  const {_} = useLingui()
   const initialNumToRender = useInitialNumToRender()
 
   const [isPTRing, setIsPTRing] = useState(false)
@@ -78,6 +78,7 @@ export function PostLikedBy({uri}: {uri: string}) {
       <ListMaybePlaceholder
         isLoading={isLoadingUri || isLoadingLikes}
         isError={isError}
+        sideBorders={false}
       />
     )
   }
@@ -91,7 +92,6 @@ export function PostLikedBy({uri}: {uri: string}) {
       onRefresh={onRefresh}
       onEndReached={onEndReached}
       onEndReachedThreshold={4}
-      ListHeaderComponent={<ListHeaderDesktop title={_(msg`Liked By`)} />}
       ListFooterComponent={
         <ListFooter
           isFetchingNextPage={isFetchingNextPage}
@@ -103,6 +103,7 @@ export function PostLikedBy({uri}: {uri: string}) {
       desktopFixedHeight
       initialNumToRender={initialNumToRender}
       windowSize={11}
+      sideBorders={false}
     />
   )
 }

src/view/com/post-thread/PostQuotes.tsx

@@ -14,24 +14,23 @@ import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {usePostQuotesQuery} from '#/state/queries/post-quotes'
 import {useResolveUriQuery} from '#/state/queries/resolve-uri'
 import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
+import {isWeb} from 'platform/detection'
 import {Post} from 'view/com/post/Post'
-import {
-  ListFooter,
-  ListHeaderDesktop,
-  ListMaybePlaceholder,
-} from '#/components/Lists'
+import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
 import {List} from '../util/List'
 
 function renderItem({
   item,
+  index,
 }: {
   item: {
     post: AppBskyFeedDefs.PostView
     moderation: ModerationDecision
     record: AppBskyFeedPost.Record
   }
+  index: number
 }) {
-  return <Post post={item.post} />
+  return <Post post={item.post} hideTopBorder={index === 0 && !isWeb} />
 }
 
 function keyExtractor(item: {
@@ -45,7 +44,6 @@ function keyExtractor(item: {
 export function PostQuotes({uri}: {uri: string}) {
   const {_} = useLingui()
   const initialNumToRender = useInitialNumToRender()
-
   const [isPTRing, setIsPTRing] = useState(false)
 
   const {
@@ -104,6 +102,7 @@ export function PostQuotes({uri}: {uri: string}) {
       <ListMaybePlaceholder
         isLoading={isLoadingUri || isLoadingQuotes}
         isError={isError}
+        sideBorders={false}
       />
     )
   }
@@ -119,7 +118,6 @@ export function PostQuotes({uri}: {uri: string}) {
       onRefresh={onRefresh}
       onEndReached={onEndReached}
       onEndReachedThreshold={4}
-      ListHeaderComponent={<ListHeaderDesktop title={_(msg`Quotes`)} />}
       ListFooterComponent={
         <ListFooter
           isFetchingNextPage={isFetchingNextPage}
@@ -133,6 +131,7 @@ export function PostQuotes({uri}: {uri: string}) {
       desktopFixedHeight
       initialNumToRender={initialNumToRender}
       windowSize={11}
+      sideBorders={false}
     />
   )
 }

src/view/com/post-thread/PostRepostedBy.tsx

@@ -1,7 +1,5 @@
 import React, {useCallback, useMemo, useState} from 'react'
 import {AppBskyActorDefs as ActorDefs} from '@atproto/api'
-import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
 
 import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
@@ -10,11 +8,7 @@ import {useResolveUriQuery} from '#/state/queries/resolve-uri'
 import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
 import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard'
 import {List} from '#/view/com/util/List'
-import {
-  ListFooter,
-  ListHeaderDesktop,
-  ListMaybePlaceholder,
-} from '#/components/Lists'
+import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
 
 function renderItem({item}: {item: ActorDefs.ProfileViewBasic}) {
   return <ProfileCardWithFollowBtn key={item.did} profile={item} />
@@ -25,7 +19,6 @@ function keyExtractor(item: ActorDefs.ProfileViewBasic) {
 }
 
 export function PostRepostedBy({uri}: {uri: string}) {
-  const {_} = useLingui()
   const initialNumToRender = useInitialNumToRender()
 
   const [isPTRing, setIsPTRing] = useState(false)
@@ -78,6 +71,7 @@ export function PostRepostedBy({uri}: {uri: string}) {
       <ListMaybePlaceholder
         isLoading={isLoadingUri || isLoadingRepostedBy}
         isError={isError}
+        sideBorders={false}
       />
     )
   }
@@ -93,7 +87,6 @@ export function PostRepostedBy({uri}: {uri: string}) {
       onRefresh={onRefresh}
       onEndReached={onEndReached}
       onEndReachedThreshold={4}
-      ListHeaderComponent={<ListHeaderDesktop title={_(msg`Reposted By`)} />}
       ListFooterComponent={
         <ListFooter
           isFetchingNextPage={isFetchingNextPage}
@@ -105,6 +98,7 @@ export function PostRepostedBy({uri}: {uri: string}) {
       desktopFixedHeight
       initialNumToRender={initialNumToRender}
       windowSize={11}
+      sideBorders={false}
     />
   )
 }

src/view/com/profile/ProfileFollowers.tsx

@@ -8,17 +8,26 @@ import {logger} from '#/logger'
 import {useProfileFollowersQuery} from '#/state/queries/profile-followers'
 import {useResolveDidQuery} from '#/state/queries/resolve-uri'
 import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
+import {isWeb} from 'platform/detection'
 import {useSession} from 'state/session'
-import {
-  ListFooter,
-  ListHeaderDesktop,
-  ListMaybePlaceholder,
-} from '#/components/Lists'
+import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
 import {List} from '../util/List'
 import {ProfileCardWithFollowBtn} from './ProfileCard'
 
-function renderItem({item}: {item: ActorDefs.ProfileViewBasic}) {
-  return <ProfileCardWithFollowBtn key={item.did} profile={item} />
+function renderItem({
+  item,
+  index,
+}: {
+  item: ActorDefs.ProfileViewBasic
+  index: number
+}) {
+  return (
+    <ProfileCardWithFollowBtn
+      key={item.did}
+      profile={item}
+      noBorder={index === 0 && !isWeb}
+    />
+  )
 }
 
 function keyExtractor(item: ActorDefs.ProfileViewBasic) {
@@ -88,6 +97,7 @@ export function ProfileFollowers({name}: {name: string}) {
         }
         errorMessage={cleanError(resolveError || error)}
         onRetry={isError ? refetch : undefined}
+        sideBorders={false}
       />
     )
   }
@@ -101,7 +111,6 @@ export function ProfileFollowers({name}: {name: string}) {
       onRefresh={onRefresh}
       onEndReached={onEndReached}
       onEndReachedThreshold={4}
-      ListHeaderComponent={<ListHeaderDesktop title={_(msg`Followers`)} />}
       ListFooterComponent={
         <ListFooter
           isFetchingNextPage={isFetchingNextPage}
@@ -113,6 +122,7 @@ export function ProfileFollowers({name}: {name: string}) {
       desktopFixedHeight
       initialNumToRender={initialNumToRender}
       windowSize={11}
+      sideBorders={false}
     />
   )
 }

src/view/com/profile/ProfileFollows.tsx

@@ -8,17 +8,26 @@ import {logger} from '#/logger'
 import {useProfileFollowsQuery} from '#/state/queries/profile-follows'
 import {useResolveDidQuery} from '#/state/queries/resolve-uri'
 import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
+import {isWeb} from 'platform/detection'
 import {useSession} from 'state/session'
-import {
-  ListFooter,
-  ListHeaderDesktop,
-  ListMaybePlaceholder,
-} from '#/components/Lists'
+import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
 import {List} from '../util/List'
 import {ProfileCardWithFollowBtn} from './ProfileCard'
 
-function renderItem({item}: {item: ActorDefs.ProfileViewBasic}) {
-  return <ProfileCardWithFollowBtn key={item.did} profile={item} />
+function renderItem({
+  item,
+  index,
+}: {
+  item: ActorDefs.ProfileViewBasic
+  index: number
+}) {
+  return (
+    <ProfileCardWithFollowBtn
+      key={item.did}
+      profile={item}
+      noBorder={index === 0 && !isWeb}
+    />
+  )
 }
 
 function keyExtractor(item: ActorDefs.ProfileViewBasic) {
@@ -88,6 +97,7 @@ export function ProfileFollows({name}: {name: string}) {
         }
         errorMessage={cleanError(resolveError || error)}
         onRetry={isError ? refetch : undefined}
+        sideBorders={false}
       />
     )
   }
@@ -101,7 +111,6 @@ export function ProfileFollows({name}: {name: string}) {
       onRefresh={onRefresh}
       onEndReached={onEndReached}
       onEndReachedThreshold={4}
-      ListHeaderComponent={<ListHeaderDesktop title={_(msg`Following`)} />}
       ListFooterComponent={
         <ListFooter
           isFetchingNextPage={isFetchingNextPage}
@@ -113,6 +122,7 @@ export function ProfileFollows({name}: {name: string}) {
       desktopFixedHeight
       initialNumToRender={initialNumToRender}
       windowSize={11}
+      sideBorders={false}
     />
   )
 }

src/view/com/util/Views.web.tsx

@@ -47,7 +47,7 @@ export const CenteredView = React.forwardRef(function CenteredView(
   if (!isMobile) {
     style = addStyle(style, styles.container)
   }
-  if (sideBorders) {
+  if (sideBorders && !isMobile) {
     style = addStyle(style, {
       borderLeftWidth: StyleSheet.hairlineWidth,
       borderRightWidth: StyleSheet.hairlineWidth,

src/view/screens/ProfileFollowers.tsx

@@ -1,12 +1,16 @@
 import React from 'react'
-import {View} from 'react-native'
-import {useFocusEffect} from '@react-navigation/native'
-import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
-import {ViewHeader} from '../com/util/ViewHeader'
-import {ProfileFollowers as ProfileFollowersComponent} from '../com/profile/ProfileFollowers'
-import {useSetMinimalShellMode} from '#/state/shell'
-import {useLingui} from '@lingui/react'
 import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useFocusEffect} from '@react-navigation/native'
+
+import {useSetMinimalShellMode} from '#/state/shell'
+import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
+import {isWeb} from 'platform/detection'
+import {CenteredView} from 'view/com/util/Views'
+import {atoms as a} from '#/alf'
+import {ListHeaderDesktop} from '#/components/Lists'
+import {ProfileFollowers as ProfileFollowersComponent} from '../com/profile/ProfileFollowers'
+import {ViewHeader} from '../com/util/ViewHeader'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFollowers'>
 export const ProfileFollowersScreen = ({route}: Props) => {
@@ -21,9 +25,10 @@ export const ProfileFollowersScreen = ({route}: Props) => {
   )
 
   return (
-    <View style={{flex: 1}}>
-      <ViewHeader title={_(msg`Followers`)} />
+    <CenteredView style={a.h_full_vh} sideBorders={true}>
+      <ListHeaderDesktop title={_(msg`Followers`)} />
+      <ViewHeader title={_(msg`Followers`)} showBorder={!isWeb} />
       <ProfileFollowersComponent name={name} />
-    </View>
+    </CenteredView>
   )
 }

src/view/screens/ProfileFollows.tsx

@@ -1,12 +1,16 @@
 import React from 'react'
-import {View} from 'react-native'
-import {useFocusEffect} from '@react-navigation/native'
-import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
-import {ViewHeader} from '../com/util/ViewHeader'
-import {ProfileFollows as ProfileFollowsComponent} from '../com/profile/ProfileFollows'
-import {useSetMinimalShellMode} from '#/state/shell'
-import {useLingui} from '@lingui/react'
 import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useFocusEffect} from '@react-navigation/native'
+
+import {useSetMinimalShellMode} from '#/state/shell'
+import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
+import {isWeb} from 'platform/detection'
+import {CenteredView} from 'view/com/util/Views'
+import {atoms as a} from '#/alf'
+import {ListHeaderDesktop} from '#/components/Lists'
+import {ProfileFollows as ProfileFollowsComponent} from '../com/profile/ProfileFollows'
+import {ViewHeader} from '../com/util/ViewHeader'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFollows'>
 export const ProfileFollowsScreen = ({route}: Props) => {
@@ -21,9 +25,10 @@ export const ProfileFollowsScreen = ({route}: Props) => {
   )
 
   return (
-    <View style={{flex: 1}}>
-      <ViewHeader title={_(msg`Following`)} />
+    <CenteredView style={a.h_full_vh} sideBorders={true}>
+      <ListHeaderDesktop title={_(msg`Following`)} />
+      <ViewHeader title={_(msg`Following`)} showBorder={!isWeb} />
       <ProfileFollowsComponent name={name} />
-    </View>
+    </CenteredView>
   )
 }