From c52bcb1eddf0932de71fd10b0d03f930ad89e892 Mon Sep 17 00:00:00 2001 From: Dylan Jeffers Date: Sun, 17 Dec 2023 11:36:17 -0800 Subject: [PATCH 1/4] Fix loading skeletons --- .../src/screens/user-list-screen/UserList.tsx | 5 +++-- .../user-list-screen/UserListItemSkeleton.tsx | 21 ++++++++++++------- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/packages/mobile/src/screens/user-list-screen/UserList.tsx b/packages/mobile/src/screens/user-list-screen/UserList.tsx index d4f496b230d..81fd64dbe14 100644 --- a/packages/mobile/src/screens/user-list-screen/UserList.tsx +++ b/packages/mobile/src/screens/user-list-screen/UserList.tsx @@ -130,11 +130,12 @@ export const UserList = (props: UserListProps) => { }, [hasMore, isFocused, dispatch, tag]) const shouldUseCachedData = isEmpty || isRefreshing || loading || !isFocused + const showSkeletons = hasMore || loading const data = useMemo(() => { const userData = shouldUseCachedData ? cachedUsers.current : users - return [...userData, ...skeletonData] - }, [shouldUseCachedData, users]) + return [...userData, ...(showSkeletons ? skeletonData : [])] + }, [shouldUseCachedData, users, showSkeletons]) const renderItem = useCallback( ({ item }) => diff --git a/packages/mobile/src/screens/user-list-screen/UserListItemSkeleton.tsx b/packages/mobile/src/screens/user-list-screen/UserListItemSkeleton.tsx index 48a3a9cdeda..5c7d7d887a3 100644 --- a/packages/mobile/src/screens/user-list-screen/UserListItemSkeleton.tsx +++ b/packages/mobile/src/screens/user-list-screen/UserListItemSkeleton.tsx @@ -1,6 +1,6 @@ import { css } from '@emotion/native' -import { Box, Flex } from '@audius/harmony-native' +import { Flex, useTheme } from '@audius/harmony-native' import { StaticSkeleton } from 'app/components/skeleton' type Props = { @@ -14,26 +14,31 @@ export const UserListItemSkeleton = (props: Props) => { const { tag } = props const isSupporterTile = ['SUPPORTING', 'TOP SUPPORTERS'].includes(tag) const itemHeight = isSupporterTile ? 167 : 147 + const { cornerRadius } = useTheme() return ( - + - - + + - + {isSupporterTile ? ( - - + + ) : null} - + ) } From fca49f6b1ecfe924c1ab36e5322435742dbcadf0 Mon Sep 17 00:00:00 2001 From: Dylan Jeffers Date: Mon, 18 Dec 2023 12:07:00 -0800 Subject: [PATCH 2/4] Further fixes --- .../app-drawer-screen/AppDrawerScreen.tsx | 2 -- .../app-screen/AccountPictureHeader.tsx | 26 +++++++++++-------- .../src/screens/user-list-screen/UserList.tsx | 15 ----------- .../user-list-screen/UserListItemSkeleton.tsx | 2 +- 4 files changed, 16 insertions(+), 29 deletions(-) diff --git a/packages/mobile/src/screens/app-drawer-screen/AppDrawerScreen.tsx b/packages/mobile/src/screens/app-drawer-screen/AppDrawerScreen.tsx index 1d2039bb063..3675046a634 100644 --- a/packages/mobile/src/screens/app-drawer-screen/AppDrawerScreen.tsx +++ b/packages/mobile/src/screens/app-drawer-screen/AppDrawerScreen.tsx @@ -61,8 +61,6 @@ export const AppDrawerScreen = () => { return ( } > diff --git a/packages/mobile/src/screens/app-screen/AccountPictureHeader.tsx b/packages/mobile/src/screens/app-screen/AccountPictureHeader.tsx index 1706a1a4ae6..703ca01c742 100644 --- a/packages/mobile/src/screens/app-screen/AccountPictureHeader.tsx +++ b/packages/mobile/src/screens/app-screen/AccountPictureHeader.tsx @@ -8,8 +8,11 @@ import { import { useDrawerProgress } from '@react-navigation/drawer' import { View } from 'react-native' import { TouchableOpacity } from 'react-native-gesture-handler' -import type { Adaptable } from 'react-native-reanimated' -import Animated from 'react-native-reanimated' +import Animated, { + Extrapolation, + interpolate, + useAnimatedStyle +} from 'react-native-reanimated' import { useSelector } from 'react-redux' import { ProfilePicture } from 'app/components/user' @@ -49,7 +52,7 @@ type AccountPictureHeaderProps = { export const AccountPictureHeader = (props: AccountPictureHeaderProps) => { const { onPress } = props - const drawerProgress = useDrawerProgress() + const drawerProgress = useDrawerProgress() as Animated.SharedValue const styles = useStyles() const accountId = useSelector(getUserId)! const challengeRewardIds = useRemoteVar(StringKeys.CHALLENGE_REWARD_IDS) @@ -59,16 +62,17 @@ export const AccountPictureHeader = (props: AccountPictureHeaderProps) => { const showNotificationBubble = hasClaimableRewards || (hasUnreadMessages && isChatEnabled) - const opacity = Animated.interpolateNode( - drawerProgress as Adaptable, - { - inputRange: [0, 1], - outputRange: [1, 0] - } - ) + const animatedStyle = useAnimatedStyle(() => ({ + opacity: interpolate( + drawerProgress.value, + [0, 1], + [1, 0], + Extrapolation.CLAMP + ) + })) return ( - + { [tag] ) - const getItemLayout = useCallback( - (_data: User[], index: number) => { - const itemHeight = ['SUPPORTING', 'TOP SUPPORTERS'].includes(tag) - ? 167 - : 147 - return { - length: itemHeight, - offset: itemHeight * index, - index - } - }, - [tag] - ) - const loadingSpinner = ( { data={data} renderItem={renderItem} keyExtractor={keyExtractor} - getItemLayout={getItemLayout} ItemSeparatorComponent={Divider} onEndReached={handleEndReached} onEndReachedThreshold={3} diff --git a/packages/mobile/src/screens/user-list-screen/UserListItemSkeleton.tsx b/packages/mobile/src/screens/user-list-screen/UserListItemSkeleton.tsx index 5c7d7d887a3..4fcabb49d11 100644 --- a/packages/mobile/src/screens/user-list-screen/UserListItemSkeleton.tsx +++ b/packages/mobile/src/screens/user-list-screen/UserListItemSkeleton.tsx @@ -27,7 +27,7 @@ export const UserListItemSkeleton = (props: Props) => { {isSupporterTile ? ( - + From 8a4192923a59b23262f489836d0403922f6f893c Mon Sep 17 00:00:00 2001 From: Dylan Jeffers Date: Mon, 18 Dec 2023 12:09:54 -0800 Subject: [PATCH 3/4] Revert drawer changes --- .../app-drawer-screen/AppDrawerScreen.tsx | 2 ++ .../app-screen/AccountPictureHeader.tsx | 26 ++++++++----------- 2 files changed, 13 insertions(+), 15 deletions(-) diff --git a/packages/mobile/src/screens/app-drawer-screen/AppDrawerScreen.tsx b/packages/mobile/src/screens/app-drawer-screen/AppDrawerScreen.tsx index 3675046a634..1d2039bb063 100644 --- a/packages/mobile/src/screens/app-drawer-screen/AppDrawerScreen.tsx +++ b/packages/mobile/src/screens/app-drawer-screen/AppDrawerScreen.tsx @@ -61,6 +61,8 @@ export const AppDrawerScreen = () => { return ( } > diff --git a/packages/mobile/src/screens/app-screen/AccountPictureHeader.tsx b/packages/mobile/src/screens/app-screen/AccountPictureHeader.tsx index 703ca01c742..1706a1a4ae6 100644 --- a/packages/mobile/src/screens/app-screen/AccountPictureHeader.tsx +++ b/packages/mobile/src/screens/app-screen/AccountPictureHeader.tsx @@ -8,11 +8,8 @@ import { import { useDrawerProgress } from '@react-navigation/drawer' import { View } from 'react-native' import { TouchableOpacity } from 'react-native-gesture-handler' -import Animated, { - Extrapolation, - interpolate, - useAnimatedStyle -} from 'react-native-reanimated' +import type { Adaptable } from 'react-native-reanimated' +import Animated from 'react-native-reanimated' import { useSelector } from 'react-redux' import { ProfilePicture } from 'app/components/user' @@ -52,7 +49,7 @@ type AccountPictureHeaderProps = { export const AccountPictureHeader = (props: AccountPictureHeaderProps) => { const { onPress } = props - const drawerProgress = useDrawerProgress() as Animated.SharedValue + const drawerProgress = useDrawerProgress() const styles = useStyles() const accountId = useSelector(getUserId)! const challengeRewardIds = useRemoteVar(StringKeys.CHALLENGE_REWARD_IDS) @@ -62,17 +59,16 @@ export const AccountPictureHeader = (props: AccountPictureHeaderProps) => { const showNotificationBubble = hasClaimableRewards || (hasUnreadMessages && isChatEnabled) - const animatedStyle = useAnimatedStyle(() => ({ - opacity: interpolate( - drawerProgress.value, - [0, 1], - [1, 0], - Extrapolation.CLAMP - ) - })) + const opacity = Animated.interpolateNode( + drawerProgress as Adaptable, + { + inputRange: [0, 1], + outputRange: [1, 0] + } + ) return ( - + Date: Mon, 18 Dec 2023 12:14:18 -0800 Subject: [PATCH 4/4] Fix sign-on --- packages/mobile/src/screens/root-screen/RootScreen.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mobile/src/screens/root-screen/RootScreen.tsx b/packages/mobile/src/screens/root-screen/RootScreen.tsx index 3a05328c93d..93773e5211e 100644 --- a/packages/mobile/src/screens/root-screen/RootScreen.tsx +++ b/packages/mobile/src/screens/root-screen/RootScreen.tsx @@ -15,6 +15,7 @@ import useAppState from 'app/hooks/useAppState' import { useFeatureFlag } from 'app/hooks/useRemoteConfig' import { useUpdateRequired } from 'app/hooks/useUpdateRequired' import { useSyncCodePush } from 'app/screens/root-screen/useSyncCodePush' +import { SignOnScreen } from 'app/screens/signon' import { SplashScreen } from 'app/screens/splash-screen' import { UpdateRequiredScreen, @@ -25,7 +26,6 @@ import { enterBackground, enterForeground } from 'app/store/lifecycle/actions' import { AppDrawerScreen } from '../app-drawer-screen' import { ResetPasswordModalScreen } from '../reset-password-screen' import { SignOnStack } from '../sign-on-screen' -import SignOn from '../signon/SignOn' import { StatusBar } from './StatusBar' @@ -120,9 +120,9 @@ export const RootScreen = () => { ) : showHomeStack ? ( ) : isSignUpRedesignEnabled ? ( - + ) : ( - + )}