From c5641ac2b7bdcfdc4627175c7125131faf7c9744 Mon Sep 17 00:00:00 2001 From: dan Date: Fri, 16 Feb 2024 18:07:47 +0000 Subject: Fix jumps when navigating into long threads (#2878) * Reveal parents in chunks to fix scroll jumps Co-authored-by: Hailey * Prevent layout jump when navigating to QT due to missing metrics --------- Co-authored-by: Hailey --- src/view/com/post-thread/PostThreadItem.tsx | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) (limited to 'src/view/com/post-thread/PostThreadItem.tsx') diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index 826d0d161..ced6d0d60 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -44,6 +44,7 @@ import {Shadow, usePostShadow, POST_TOMBSTONE} from '#/state/cache/post-shadow' import {ThreadPost} from '#/state/queries/post-thread' import {useSession} from 'state/session' import {WhoCanReply} from '../threadgate/WhoCanReply' +import {LoadingPlaceholder} from '../util/LoadingPlaceholder' export function PostThreadItem({ post, @@ -164,8 +165,6 @@ let PostThreadItemLoaded = ({ () => countLines(richText?.text) >= MAX_POST_LINES, ) const {currentAccount} = useSession() - const hasEngagement = post.likeCount || post.repostCount - const rootUri = record.reply?.root?.uri || post.uri const postHref = React.useMemo(() => { const urip = new AtUri(post.uri) @@ -357,9 +356,16 @@ let PostThreadItemLoaded = ({ translatorUrl={translatorUrl} needsTranslation={needsTranslation} /> - {hasEngagement ? ( + {post.repostCount !== 0 || post.likeCount !== 0 ? ( + // Show this section unless we're *sure* it has no engagement. - {post.repostCount ? ( + {post.repostCount == null && post.likeCount == null && ( + // If we're still loading and not sure, assume this post has engagement. + // This lets us avoid a layout shift for the common case (embedded post with likes/reposts). + // TODO: embeds should include metrics to avoid us having to guess. + + )} + {post.repostCount != null && post.repostCount !== 0 ? ( - ) : ( - <> - )} - {post.likeCount ? ( + ) : null} + {post.likeCount != null && post.likeCount !== 0 ? ( - ) : ( - <> - )} + ) : null} - ) : ( - <> - )} + ) : null} Date: Fri, 16 Feb 2024 13:25:48 -0800 Subject: remove sandbox labels (#2883) * rm sandbox * remove comment --- src/state/session/index.tsx | 6 ----- src/view/com/feeds/FeedPage.tsx | 15 +++---------- src/view/com/pager/FeedsTabBar.web.tsx | 19 +--------------- src/view/com/post-thread/PostThreadItem.tsx | 4 ---- src/view/com/posts/FeedItem.tsx | 3 --- src/view/com/util/PostSandboxWarning.tsx | 35 ----------------------------- src/view/shell/desktop/RightNav.tsx | 12 ++-------- 7 files changed, 6 insertions(+), 88 deletions(-) delete mode 100644 src/view/com/util/PostSandboxWarning.tsx (limited to 'src/view/com/post-thread/PostThreadItem.tsx') diff --git a/src/state/session/index.tsx b/src/state/session/index.tsx index b555a997b..bd3b157bc 100644 --- a/src/state/session/index.tsx +++ b/src/state/session/index.tsx @@ -7,7 +7,6 @@ import {networkRetry} from '#/lib/async/retry' import {logger} from '#/logger' import * as persisted from '#/state/persisted' import {PUBLIC_BSKY_AGENT} from '#/state/queries' -import {IS_PROD} from '#/lib/constants' import {emitSessionDropped} from '../events' import {useLoggedOutViewControls} from '#/state/shell/logged-out' import {useCloseAllActiveElements} from '#/state/util' @@ -36,7 +35,6 @@ export type SessionState = { } export type StateContext = SessionState & { hasSession: boolean - isSandbox: boolean } export type ApiContext = { createAccount: (props: { @@ -84,7 +82,6 @@ const StateContext = React.createContext({ accounts: [], currentAccount: undefined, hasSession: false, - isSandbox: false, }) const ApiContext = React.createContext({ @@ -610,9 +607,6 @@ export function Provider({children}: React.PropsWithChildren<{}>) { () => ({ ...state, hasSession: !!state.currentAccount, - isSandbox: state.currentAccount - ? !IS_PROD(state.currentAccount?.service) - : false, }), [state], ) diff --git a/src/view/com/feeds/FeedPage.tsx b/src/view/com/feeds/FeedPage.tsx index 9595e77e5..d8da569b1 100644 --- a/src/view/com/feeds/FeedPage.tsx +++ b/src/view/com/feeds/FeedPage.tsx @@ -46,7 +46,7 @@ export function FeedPage({ renderEmptyState: () => JSX.Element renderEndOfFeed?: () => JSX.Element }) { - const {isSandbox, hasSession} = useSession() + const {hasSession} = useSession() const pal = usePalette('default') const {_} = useLingui() const navigation = useNavigation() @@ -119,7 +119,7 @@ export function FeedPage({ style={[pal.text, {fontWeight: 'bold'}]} text={ <> - {isSandbox ? 'SANDBOX' : 'Bluesky'}{' '} + Bluesky{' '} {hasNew && ( - }, [ - isDesktop, - pal.view, - pal.text, - pal.textLight, - hasNew, - _, - isSandbox, - hasSession, - ]) + }, [isDesktop, pal.view, pal.text, pal.textLight, hasNew, _, hasSession]) return ( diff --git a/src/view/com/pager/FeedsTabBar.web.tsx b/src/view/com/pager/FeedsTabBar.web.tsx index 9fe03b7e9..fb52b913a 100644 --- a/src/view/com/pager/FeedsTabBar.web.tsx +++ b/src/view/com/pager/FeedsTabBar.web.tsx @@ -37,7 +37,6 @@ export function FeedsTabBar( function FeedsTabBarPublic() { const pal = usePalette('default') - const {isSandbox} = useSession() return ( @@ -56,23 +55,7 @@ function FeedsTabBarPublic() { type="title-lg" href="/" style={[pal.text, {fontWeight: 'bold'}]} - text={ - <> - {isSandbox ? 'SANDBOX' : 'Bluesky'}{' '} - {/*hasNew && ( - - )*/} - - } - // onPress={emitSoftReset} + text="Bluesky " /> diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index ced6d0d60..f9bdaebed 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -27,7 +27,6 @@ import {PostCtrls} from '../util/post-ctrls/PostCtrls' import {PostHider} from '../util/moderation/PostHider' import {ContentHider} from '../util/moderation/ContentHider' import {PostAlerts} from '../util/moderation/PostAlerts' -import {PostSandboxWarning} from '../util/PostSandboxWarning' import {ErrorMessage} from '../util/error/ErrorMessage' import {usePalette} from 'lib/hooks/usePalette' import {formatCount} from '../util/numeric/format' @@ -247,7 +246,6 @@ let PostThreadItemLoaded = ({ testID={`postThreadItem-by-${post.author.handle}`} style={[styles.outer, styles.outerHighlighted, pal.border, pal.view]} accessible={false}> - - - - - {isThreadChild && ( diff --git a/src/view/com/util/PostSandboxWarning.tsx b/src/view/com/util/PostSandboxWarning.tsx deleted file mode 100644 index b2375c703..000000000 --- a/src/view/com/util/PostSandboxWarning.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react' -import {StyleSheet, View} from 'react-native' -import {Text} from './text/Text' -import {usePalette} from 'lib/hooks/usePalette' -import {useSession} from '#/state/session' - -export function PostSandboxWarning() { - const {isSandbox} = useSession() - const pal = usePalette('default') - if (isSandbox) { - return ( - - - SANDBOX - - - ) - } - return null -} - -const styles = StyleSheet.create({ - container: { - position: 'absolute', - top: 6, - right: 10, - }, - text: { - fontWeight: 'bold', - opacity: 0.07, - }, -}) diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx index 264fef194..c1f498724 100644 --- a/src/view/shell/desktop/RightNav.tsx +++ b/src/view/shell/desktop/RightNav.tsx @@ -9,14 +9,13 @@ import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants' import {s} from 'lib/styles' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {useLingui} from '@lingui/react' -import {Trans, msg} from '@lingui/macro' +import {msg} from '@lingui/macro' import {useSession} from '#/state/session' export function DesktopRightNav({routeName}: {routeName: string}) { const pal = usePalette('default') - const palError = usePalette('error') const {_} = useLingui() - const {isSandbox, hasSession, currentAccount} = useSession() + const {hasSession, currentAccount} = useSession() const {isTablet} = useWebMediaQueries() if (isTablet) { @@ -49,13 +48,6 @@ export function DesktopRightNav({routeName}: {routeName: string}) { paddingTop: hasSession ? 0 : 18, }, ]}> - {isSandbox ? ( - - - SANDBOX. Posts and accounts are not permanent. - - - ) : undefined} {hasSession && ( <> -- cgit 1.4.1