refactor: remove splash screen(OK-24225) (#3762)

* fix: fix splash screen

* refactor: remove useEffect & useState

* docs: add comment

* fix: fix types

@types/react-native-animated-splash-screen.d.ts

@@ -1,22 +0,0 @@
-declare module 'react-native-animated-splash-screen' {
-  interface Props {
-    preload?: boolean;
-    logoWidth?: number;
-    logoHeight?: number;
-    backgroundColor?: string;
-    isLoaded: boolean;
-    disableBackgroundImage?: boolean;
-    logoImage?: string | number | object;
-    translucent?: boolean;
-    customComponent?: React.ReactNode;
-    disableAppScale?: boolean;
-    duration?: number;
-    delay?: number;
-    showStatusBar?: boolean;
-
-    children?: React.ReactNode;
-  }
-
-  const props: React.FC<Props>;
-  export default props;
-}

development/tsCheck.js

@@ -1,7 +1,7 @@
 const { execSync } = require('child_process');
 const { exit } = require('process');
 
-const MAX_ERROR_COUNT = 62;
+const MAX_ERROR_COUNT = 61;
 
 try {
   execSync(

packages/kit/package.json

@@ -34,7 +34,6 @@
     "react-async-hook": "^4.0.0",
     "react-freeze": "^1.0.3",
     "react-intl": "^5.21.2",
-    "react-native-animated-splash-screen": "^2.0.5",
     "react-native-camera-kit": "14.0.0-beta2",
     "react-native-webview": "https://github.com/OneKeyHQ/react-native-webview.git#834d8096f8cfd78a961fb7a13f06f0cc64b2c9c3",
     "react-redux": "^8.0.5",

packages/kit/src/provider/AppLoading.tsx

@@ -1,98 +1,73 @@
 /* eslint-disable global-require */
-import type { PropsWithChildren, ReactNode } from 'react';
-import { memo, useEffect, useMemo, useState } from 'react';
+import type { PropsWithChildren } from 'react';
+import { Suspense, useMemo } from 'react';
 
 import { Dimensions } from 'react-native';
-import AnimatedSplash from 'react-native-animated-splash-screen';
 
-import { Stack, useThemeValue } from '@onekeyhq/components';
+import { Image, Stack } from '@onekeyhq/components';
 // import backgroundApiProxy from '@onekeyhq/kit/src/background/instance/backgroundApiProxy';
 import { useHtmlPreloadSplashLogoRemove } from '@onekeyhq/kit/src/hooks/useHtmlPreloadSplashLogoRemove';
+import { createSuspender } from '@onekeyhq/shared/src/modules3rdParty/use-suspender';
 import platformEnv from '@onekeyhq/shared/src/platformEnv';
 
-const AnimatedSplashView = memo(
-  ({
-    bgColor,
-    initDataReady,
-    children,
-  }: {
-    bgColor?: string;
-    children?: ReactNode | undefined;
-    initDataReady: boolean;
-  }) => {
-    global.$$onekeyPerfTrace?.log({
-      name: `AppLoading SplashScreen render`,
-      payload: {
-        initDataReady,
-        bgColor,
-      },
-    });
+import type { ImageSourcePropType } from 'react-native';
 
-    const logoImage = useMemo((): any => {
-      if (initDataReady && platformEnv.isExtension) {
-        // do not show default splash logo in extension
-        return null;
-      }
-      return platformEnv.isRuntimeBrowser
-        ? require('../../assets/splash.svg') // SVG in web env
-        : require('../../assets/splash.png');
-    }, [initDataReady]);
+const { height: windowHeight, width: windowWidth } = Dimensions.get('window');
 
-    const content = useMemo(
-      () => (
-        <AnimatedSplash
-          preload
-          disableAppScale={platformEnv.isExtension}
-          disableImageBackgroundAnimation={platformEnv.isExtension}
-          // imageBackgroundSource
-          translucent={!platformEnv.isNativeAndroid}
-          isLoaded={initDataReady}
-          // isLoaded={false}
-          logoImage={logoImage}
-          backgroundColor={bgColor}
-          // backgroundColor={platformEnv.isExtension ? 'rbga(0,0,0,0)' : bgColor}
-          // same size to onekey-index-html-preload-image at index.html.ejs
-          //      background img not working
-          logoHeight={
-            platformEnv.isRuntimeBrowser ? 80 : Dimensions.get('window').height
-          }
-          logoWidth={
-            platformEnv.isRuntimeBrowser ? 80 : Dimensions.get('window').width
-          }
-        >
-          {children}
-        </AnimatedSplash>
-      ),
-      [bgColor, children, initDataReady, logoImage],
-    );
-    return (
-      <Stack flex={1} backgroundColor={bgColor}>
-        {content}
-      </Stack>
-    );
-  },
-);
-AnimatedSplashView.displayName = 'AnimatedSplashView';
+const buildImageSource = () =>
+  platformEnv.isRuntimeBrowser
+    ? ({
+        uri: require('../../assets/splash.svg'),
+        width: '100%',
+        height: '100%',
+      } as unknown as ImageSourcePropType)
+    : (require('../../assets/splash.png') as ImageSourcePropType);
 
-const AppLoading = ({ children }: PropsWithChildren<unknown>) => {
-  const [initDataReady, setInitDataReady] = useState(false);
-  const bgColor = useThemeValue('bg');
-  useHtmlPreloadSplashLogoRemove();
-
-  useEffect(() => {
-    setTimeout(() => {
-      setInitDataReady(true);
-    }, 50);
-  }, []);
-
-  return (
-    <AnimatedSplashView
-      initDataReady={initDataReady}
-      bgColor={platformEnv.isRuntimeBrowser ? undefined : bgColor}
+function SplashView() {
+  const logoImage = useMemo(() => buildImageSource(), []);
+  return platformEnv.isRuntimeBrowser ? (
+    <Stack
+      flex={1}
+      bg="$background"
+      justifyContent="center"
+      alignItems="center"
     >
-      {children}
-    </AnimatedSplashView>
+      <Stack w={80} h={80}>
+        <Image flex={1} source={logoImage} />
+      </Stack>
+    </Stack>
+  ) : (
+    <Image
+      flex={1}
+      aspectRatio={windowWidth / windowHeight}
+      resizeMode="contain"
+      source={logoImage}
+    />
   );
+}
+
+const useWaitReady = createSuspender(
+  () =>
+    // TODO：It needs to be modified to listen for the event of data loading completion to end the waiting.
+    new Promise<void>((resolve) => {
+      setTimeout(() => {
+        resolve();
+      }, 50);
+    }),
+);
+
+const PendingComponent = ({ children }: PropsWithChildren<unknown>) => {
+  useWaitReady();
+  return children;
 };
 
+function AppLoading({ children }: PropsWithChildren<unknown>) {
+  useHtmlPreloadSplashLogoRemove();
+  return (
+    <Suspense fallback={<SplashView />}>
+      <PendingComponent>{children}</PendingComponent>
+    </Suspense>
+  );
+}
+
 export default AppLoading;

packages/kit/src/views/Discover/Explorer/Desktop/ControllerBarDesktop.tsx

@@ -151,7 +151,7 @@ function ControllerBarDesktop() {
         />
       </XStack>
       {/* <NetworkAccountSelectorTriggerDesktop /> */}
-      {/* BrowserToolbar gas pannel */}
+      {/* BrowserToolbar gas panel */}
       {/* Toolbar More Menu */}
     </XStack>
     // Add: SearchView

packages/kit/src/views/Tab/Home/HomePageTabs/index.tsx

@@ -144,6 +144,33 @@ function HomePage() {
 
   const renderHeaderView = useCallback(() => <HeaderView />, []);
 
+  const renderContentItem = useCallback(
+    ({
+      item,
+    }: {
+      item: {
+        backgroundColor: string;
+        contentHeight: number | undefined;
+        page: any;
+      };
+      index: number;
+    }) => (
+      <Stack
+        style={{
+          flex: 1,
+          backgroundColor: item.backgroundColor,
+        }}
+      >
+        <item.page
+          onContentSizeChange={(_: number, height: number) => {
+            item.contentHeight = height;
+          }}
+        />
+      </Stack>
+    ),
+    [],
+  );
+
   return useMemo(
     () => (
       <Stack bg="$bg" flex={1}>
@@ -172,44 +199,21 @@ function HomePage() {
             }}
           />
           <Stack style={{ height: contentHeight }}>
-            <Content
-              renderItem={({
-                item,
-              }: {
-                item: {
-                  backgroundColor: string;
-                  contentHeight: number | undefined;
-                  page: any;
-                };
-                index: number;
-              }) => (
-                <Stack
-                  style={{
-                    flex: 1,
-                    backgroundColor: item.backgroundColor,
-                  }}
-                >
-                  <item.page
-                    onContentSizeChange={(width: number, height: number) => {
-                      item.contentHeight = height;
-                    }}
-                  />
-                </Stack>
-              )}
-            />
+            <Content renderItem={renderContentItem} />
           </Stack>
         </ScrollView>
       </Stack>
     ),
     [
-      bgAppColor,
-      textColor,
-      textSubduedColor,
-      contentHeight,
-      Header,
-      Content,
       onRefresh,
       renderHeaderView,
+      Header,
+      bgAppColor,
+      textSubduedColor,
+      textColor,
+      contentHeight,
+      Content,
+      renderContentItem,
     ],
   );
 }

yarn.lock

@@ -5076,7 +5076,6 @@ __metadata:
     react-async-hook: ^4.0.0
     react-freeze: ^1.0.3
     react-intl: ^5.21.2
-    react-native-animated-splash-screen: ^2.0.5
     react-native-camera-kit: 14.0.0-beta2
     react-native-webview: "https://github.com/OneKeyHQ/react-native-webview.git#834d8096f8cfd78a961fb7a13f06f0cc64b2c9c3"
     react-redux: ^8.0.5
@@ -24053,15 +24052,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-animated-splash-screen@npm:^2.0.5":
-  version: 2.0.5
-  resolution: "react-native-animated-splash-screen@npm:2.0.5"
-  dependencies:
-    prop-types: ^15.7.2
-  checksum: 60a0a14563e4f5de917b1beb20e2c0c7fbb74ed9049ca452a10b8ba9ad705d9825b6430aba090e6912ac7a922e2ad19ba4579181ea103479e405702468bb1b96
-  languageName: node
-  linkType: hard
-
 "react-native-ble-manager@npm:^8.1.0":
   version: 8.8.0
   resolution: "react-native-ble-manager@npm:8.8.0"