From 9db42faf757469ef41ffc72055481296c475bd4e Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 26 Sep 2024 19:32:08 -0700 Subject: [PATCH 1/5] lazy one spot --- src/components/StarterPack/QrCode.tsx | 17 ++-- src/components/StarterPack/QrCodeDialog.tsx | 90 +++++++++++---------- 2 files changed, 60 insertions(+), 47 deletions(-) diff --git a/src/components/StarterPack/QrCode.tsx b/src/components/StarterPack/QrCode.tsx index 8ce5cbbb13..c6408109bb 100644 --- a/src/components/StarterPack/QrCode.tsx +++ b/src/components/StarterPack/QrCode.tsx @@ -1,18 +1,23 @@ import React from 'react' import {View} from 'react-native' import QRCode from 'react-native-qrcode-styled' -import ViewShot from 'react-native-view-shot' +import type ViewShot from 'react-native-view-shot' import {AppBskyGraphDefs, AppBskyGraphStarterpack} from '@atproto/api' import {Trans} from '@lingui/macro' -import {isWeb} from 'platform/detection' -import {Logo} from 'view/icons/Logo' -import {Logotype} from 'view/icons/Logotype' +import {isWeb} from '#/platform/detection' +import {Logo} from '#/view/icons/Logo' +import {Logotype} from '#/view/icons/Logotype' import {useTheme} from '#/alf' import {atoms as a} from '#/alf' import {LinearGradientBackground} from '#/components/LinearGradientBackground' import {Text} from '#/components/Typography' +const LazyViewShot = React.lazy( + // @ts-expect-error dynamic import + () => import('react-native-view-shot/src/index'), +) + interface Props { starterPack: AppBskyGraphDefs.StarterPackView link: string @@ -29,7 +34,7 @@ export const QrCode = React.forwardRef(function QrCode( } return ( - + (function QrCode( - + ) }) diff --git a/src/components/StarterPack/QrCodeDialog.tsx b/src/components/StarterPack/QrCodeDialog.tsx index a884390bf8..b2af8ff73a 100644 --- a/src/components/StarterPack/QrCodeDialog.tsx +++ b/src/components/StarterPack/QrCodeDialog.tsx @@ -1,6 +1,6 @@ import React from 'react' import {View} from 'react-native' -import ViewShot from 'react-native-view-shot' +import type ViewShot from 'react-native-view-shot' import {requestMediaLibraryPermissionsAsync} from 'expo-image-picker' import {createAssetAsync} from 'expo-media-library' import * as Sharing from 'expo-sharing' @@ -8,9 +8,9 @@ import {AppBskyGraphDefs, AppBskyGraphStarterpack} from '@atproto/api' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {logEvent} from '#/lib/statsig/statsig' import {logger} from '#/logger' -import {logEvent} from 'lib/statsig/statsig' -import {isNative, isWeb} from 'platform/detection' +import {isNative, isWeb} from '#/platform/detection' import * as Toast from '#/view/com/util/Toast' import {atoms as a} from '#/alf' import {Button, ButtonText} from '#/components/Button' @@ -153,46 +153,54 @@ export function QrCodeDialog({ - {!link ? ( - - - - ) : ( - <> - - {isProcessing ? ( - - - - ) : ( - - - - - )} - - )} + }> + {!link ? ( + + ) : ( + <> + + {isProcessing ? ( + + + + ) : ( + + + + + )} + + )} + ) } + +function Loading() { + return ( + + + + ) +} From 6c1e879bf9934748169a0c6bc18601abed2214c8 Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 26 Sep 2024 19:49:02 -0700 Subject: [PATCH 2/5] lazy signup --- .../Onboarding/StepProfile/PlaceholderCanvas.tsx | 14 +++++++++----- src/screens/Onboarding/StepProfile/index.tsx | 16 ++++++++++------ src/screens/Onboarding/state.ts | 14 ++++++++------ src/screens/Signup/StepInfo/index.tsx | 5 ++++- 4 files changed, 31 insertions(+), 18 deletions(-) diff --git a/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx b/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx index d1d1af6d9f..652d04b4bc 100644 --- a/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx +++ b/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx @@ -1,14 +1,18 @@ import React from 'react' import {View} from 'react-native' -import ViewShot from 'react-native-view-shot' import {useAvatar} from '#/screens/Onboarding/StepProfile/index' import {atoms as a} from '#/alf' +const LazyViewShot = React.lazy( + // @ts-expect-error dynamic import + () => import('react-native-view-shot/src/index'), +) + const SIZE_MULTIPLIER = 5 export interface PlaceholderCanvasRef { - capture: () => Promise + capture: () => Promise | undefined } // This component is supposed to be invisible to the user. We only need this for ViewShot to have something to @@ -33,12 +37,12 @@ export const PlaceholderCanvas = React.forwardRef( React.useImperativeHandle(ref, () => ({ // @ts-ignore this library doesn't have types - capture: viewshotRef.current.capture, + capture: viewshotRef.current?.capture, })) return ( - ( style={{color: 'white'}} /> - + ) }, diff --git a/src/screens/Onboarding/StepProfile/index.tsx b/src/screens/Onboarding/StepProfile/index.tsx index 5304aa5031..79957da31a 100644 --- a/src/screens/Onboarding/StepProfile/index.tsx +++ b/src/screens/Onboarding/StepProfile/index.tsx @@ -10,13 +10,13 @@ import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useAnalytics} from '#/lib/analytics/analytics' +import {usePhotoLibraryPermission} from '#/lib/hooks/usePermissions' +import {compressIfNeeded} from '#/lib/media/manip' +import {openCropper} from '#/lib/media/picker' +import {getDataUriSize} from '#/lib/media/util' +import {useRequestNotificationsPermission} from '#/lib/notifications/notifications' import {logEvent, useGate} from '#/lib/statsig/statsig' -import {usePhotoLibraryPermission} from 'lib/hooks/usePermissions' -import {compressIfNeeded} from 'lib/media/manip' -import {openCropper} from 'lib/media/picker' -import {getDataUriSize} from 'lib/media/util' -import {useRequestNotificationsPermission} from 'lib/notifications/notifications' -import {isNative, isWeb} from 'platform/detection' +import {isNative, isWeb} from '#/platform/detection' import { DescriptionText, OnboardingControls, @@ -132,6 +132,10 @@ export function StepProfile() { const onContinue = React.useCallback(async () => { let imageUri = avatar?.image?.path + + // In the event that view-shot didn't load in time and the user pressed continue, this will just be undefined + // and the default avatar will be used. We don't want to block getting through create if this fails for some + // reason if (!imageUri || avatar.useCreatedAvatar) { imageUri = await canvasRef.current?.capture() } diff --git a/src/screens/Onboarding/state.ts b/src/screens/Onboarding/state.ts index c41db5c3b7..70fa696408 100644 --- a/src/screens/Onboarding/state.ts +++ b/src/screens/Onboarding/state.ts @@ -51,13 +51,15 @@ export type OnboardingAction = | { type: 'setProfileStepResults' isCreatedAvatar: boolean - image?: OnboardingState['profileStepResults']['image'] - imageUri: string + image: OnboardingState['profileStepResults']['image'] | undefined + imageUri: string | undefined imageMime: string - creatorState?: { - emoji: Emoji - backgroundColor: AvatarColor - } + creatorState: + | { + emoji: Emoji + backgroundColor: AvatarColor + } + | undefined } export type ApiResponseMap = { diff --git a/src/screens/Signup/StepInfo/index.tsx b/src/screens/Signup/StepInfo/index.tsx index 2cdb4b7224..d9b680602a 100644 --- a/src/screens/Signup/StepInfo/index.tsx +++ b/src/screens/Signup/StepInfo/index.tsx @@ -6,8 +6,8 @@ import * as EmailValidator from 'email-validator' import type tldts from 'tldts' import {logEvent} from '#/lib/statsig/statsig' +import {isEmailMaybeInvalid} from '#/lib/strings/email' import {logger} from '#/logger' -import {isEmailMaybeInvalid} from 'lib/strings/email' import {ScreenTransition} from '#/screens/Login/ScreenTransition' import {is13, is18, useSignupContext} from '#/screens/Signup/state' import {Policies} from '#/screens/Signup/StepInfo/Policies' @@ -59,6 +59,9 @@ export function StepInfo({ import('tldts/dist/index.cjs.min.js').then(tldts => { tldtsRef.current = tldts }) + // This will get used in the avatar creator a few steps later, so lets preload it now + // @ts-expect-error - valid path + import('react-native-view-shot/src/index') }, []) const onNextPress = () => { From 3b220f6e82c108dfa451b65dd16243db5f7453fd Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 26 Sep 2024 20:05:31 -0700 Subject: [PATCH 3/5] fix type --- src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx | 2 +- src/screens/Onboarding/StepProfile/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx b/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx index 652d04b4bc..9e91bce54a 100644 --- a/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx +++ b/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx @@ -12,7 +12,7 @@ const LazyViewShot = React.lazy( const SIZE_MULTIPLIER = 5 export interface PlaceholderCanvasRef { - capture: () => Promise | undefined + capture: (() => Promise) | undefined } // This component is supposed to be invisible to the user. We only need this for ViewShot to have something to diff --git a/src/screens/Onboarding/StepProfile/index.tsx b/src/screens/Onboarding/StepProfile/index.tsx index 79957da31a..ff16aeb1f3 100644 --- a/src/screens/Onboarding/StepProfile/index.tsx +++ b/src/screens/Onboarding/StepProfile/index.tsx @@ -137,7 +137,7 @@ export function StepProfile() { // and the default avatar will be used. We don't want to block getting through create if this fails for some // reason if (!imageUri || avatar.useCreatedAvatar) { - imageUri = await canvasRef.current?.capture() + imageUri = await canvasRef.current?.capture?.() } if (imageUri) { From 1006d70ed106fe59f1a026d1bf9180e14868722c Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 26 Sep 2024 20:09:17 -0700 Subject: [PATCH 4/5] tweak type, fix missing viewshot type --- .../Onboarding/StepProfile/PlaceholderCanvas.tsx | 12 ++++++++---- src/screens/Onboarding/StepProfile/index.tsx | 2 +- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx b/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx index 9e91bce54a..4379ae9f05 100644 --- a/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx +++ b/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx @@ -1,5 +1,6 @@ import React from 'react' import {View} from 'react-native' +import ViewShot from 'react-native-view-shot' import {useAvatar} from '#/screens/Onboarding/StepProfile/index' import {atoms as a} from '#/alf' @@ -12,7 +13,7 @@ const LazyViewShot = React.lazy( const SIZE_MULTIPLIER = 5 export interface PlaceholderCanvasRef { - capture: (() => Promise) | undefined + capture: () => Promise } // This component is supposed to be invisible to the user. We only need this for ViewShot to have something to @@ -20,7 +21,7 @@ export interface PlaceholderCanvasRef { export const PlaceholderCanvas = React.forwardRef( function PlaceholderCanvas({}, ref) { const {avatar} = useAvatar() - const viewshotRef = React.useRef() + const viewshotRef = React.useRef(null) const Icon = avatar.placeholder.component const styles = React.useMemo( @@ -36,8 +37,11 @@ export const PlaceholderCanvas = React.forwardRef( ) React.useImperativeHandle(ref, () => ({ - // @ts-ignore this library doesn't have types - capture: viewshotRef.current?.capture, + capture: async () => { + if (viewshotRef.current?.capture) { + return await viewshotRef.current.capture() + } + }, })) return ( diff --git a/src/screens/Onboarding/StepProfile/index.tsx b/src/screens/Onboarding/StepProfile/index.tsx index ff16aeb1f3..79957da31a 100644 --- a/src/screens/Onboarding/StepProfile/index.tsx +++ b/src/screens/Onboarding/StepProfile/index.tsx @@ -137,7 +137,7 @@ export function StepProfile() { // and the default avatar will be used. We don't want to block getting through create if this fails for some // reason if (!imageUri || avatar.useCreatedAvatar) { - imageUri = await canvasRef.current?.capture?.() + imageUri = await canvasRef.current?.capture() } if (imageUri) { From 18462adc179a07fe222816c01f20ab6805d6fc90 Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 26 Sep 2024 20:10:46 -0700 Subject: [PATCH 5/5] only import type oops --- src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx b/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx index 4379ae9f05..eaad2113f8 100644 --- a/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx +++ b/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx @@ -1,6 +1,6 @@ import React from 'react' import {View} from 'react-native' -import ViewShot from 'react-native-view-shot' +import type ViewShot from 'react-native-view-shot' import {useAvatar} from '#/screens/Onboarding/StepProfile/index' import {atoms as a} from '#/alf'