Lazy load ViewShot (#5517)

* lazy one spot

* lazy signup

* fix type

* tweak type, fix missing viewshot type

* only import type oops

1 files changed, 11 insertions, 6 deletions

diff --git a/src/components/StarterPack/QrCode.tsx b/src/components/StarterPack/QrCode.tsx
index 8ce5cbbb1..c6408109b 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<ViewShot, Props>(function QrCode(
   }
 
   return (
-    <ViewShot ref={ref}>
+    <LazyViewShot ref={ref}>
       <LinearGradientBackground
         style={[
           {width: 300, minHeight: 390},
@@ -79,7 +84,7 @@ export const QrCode = React.forwardRef<ViewShot, Props>(function QrCode(
           </Text>
         </View>
       </LinearGradientBackground>
-    </ViewShot>
+    </LazyViewShot>
   )
 })