feat-x/skeleton (#3700)

* feat:  Skeleton works

* fix: fix radio story event

* fix:fix ts type error

* fix: fix lint

* feat: Screen Component.

* doc: add more comment

---------

Co-authored-by: hublot <[email protected]>

apps/mobile/babel.config.js

@@ -12,7 +12,10 @@ module.exports = function (api) {
           require('@tamagui/babel-plugin/dist/cjs/index.native'),
           {
             components: ['tamagui'],
-            config: path.join(__dirname, '../../packages/components/tamagui.config.ts'),
+            config: path.join(
+              __dirname,
+              '../../packages/components/tamagui.config.ts',
+            ),
             importsWhitelist: [],
             logTimings: true,
             disableExtraction: process.env.NODE_ENV === 'development',

packages/components/src/Screen/index.native.tsx

@@ -0,0 +1,32 @@
+import type { PropsWithChildren } from 'react';
+import { useEffect, useState } from 'react';
+
+import { useNavigation } from '@react-navigation/native';
+
+import useIsLowPerformanceDevice from '../hooks/useIsLowPerformanceDevice';
+import { Spinner } from '../Spinner';
+import { Stack } from '../Stack';
+
+const Loading = () => (
+  <Stack flex={1} alignContent="center" justifyContent="center">
+    <Spinner size="large" />
+  </Stack>
+);
+
+function LoadingScreen({ children }: PropsWithChildren<unknown>) {
+  const [isTransitionEnd, setIsTransitionEnd] = useState(false);
+  const navigation = useNavigation();
+  useEffect(() => {
+    // 'onTransitionEnd' event is missing in react navigation types
+    const unsubscribe = navigation.addListener('transitionEnd' as any, () => {
+      setIsTransitionEnd(true);
+    });
+    return unsubscribe;
+  }, [navigation]);
+  return isTransitionEnd ? children : <Loading />;
+}
+
+export function Screen({ children }: PropsWithChildren<unknown>) {
+  const isLowPerformanceDevice = useIsLowPerformanceDevice();
+  return isLowPerformanceDevice ? LoadingScreen : children;
+}

packages/components/src/Screen/index.tsx

@@ -0,0 +1,5 @@
+import type { PropsWithChildren } from 'react';
+
+export function Screen({ children }: PropsWithChildren<unknown>) {
+  return children;
+}

packages/components/src/Skeleton/index.tsx

@@ -0,0 +1,47 @@
+import { MotiView } from 'moti';
+import { Skeleton as MotiSkeleton } from 'moti/skeleton';
+import { StyleSheet } from 'react-native';
+
+import useTheme from '../Provider/hooks/useTheme';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  padded: {
+    padding: 16,
+  },
+});
+
+const Spacer = ({ height = 16 }: { height: number }) => (
+  <MotiView style={{ height }} />
+);
+
+export function Skeleton() {
+  const { themeVariant } = useTheme();
+  return (
+    <MotiView
+      transition={{
+        type: 'timing',
+      }}
+      style={[styles.container, styles.padded]}
+      animate={{
+        backgroundColor: themeVariant === 'dark' ? '#000000' : '#ffffff',
+      }}
+    >
+      <MotiSkeleton
+        colorMode={themeVariant}
+        radius="round"
+        height={75}
+        width={75}
+      />
+      <Spacer />
+      <MotiSkeleton colorMode={themeVariant} width={250} />
+      <Spacer height={8} />
+      <MotiSkeleton colorMode={themeVariant} width="100%" />
+      <Spacer height={8} />
+      <MotiSkeleton colorMode={themeVariant} width="100%" />
+    </MotiView>
+  );
+}

packages/components/src/hooks/useIsLowPerformanceDevice.ts

@@ -0,0 +1,6 @@
+// import platformEnv from "@onekeyhq/shared/src/platformEnv";
+
+export default function useIsLowPerformanceDevice() {
+  //   return !platformEnv.isDev ? IsLowPerformanceDevice : false;
+  return false;
+}

packages/components/src/hooks/useKeyboardHeight.ts

@@ -9,11 +9,11 @@ export default function useKeyboardHeight() {
 
   const handleKeyboardWillShow: KeyboardEventListener = useCallback((e) => {
     setKeyboardHeight(e.endCoordinates.height);
-  });
+  }, []);
   // const handleKeyboardDidShow: KeyboardEventListener = useCallback((e) => {});
-  const handleKeyboardWillHide: KeyboardEventListener = useCallback((e) => {
+  const handleKeyboardWillHide: KeyboardEventListener = useCallback(() => {
     setKeyboardHeight(0);
-  });
+  }, []);
   // const handleKeyboardDidHide: KeyboardEventListener = useCallback((e) => {});
 
   useEffect(() => {
@@ -27,7 +27,7 @@ export default function useKeyboardHeight() {
     return () => {
       subscriptions.forEach((subscription) => subscription.remove());
     };
-  }, []);
+  }, [handleKeyboardWillHide, handleKeyboardWillShow]);
 
   return keyboardHeight;
 }

packages/components/src/index.tsx

@@ -38,6 +38,8 @@ export * from './Provider/hooks/useThemeValue';
 export * from './Provider/hooks/useIsMounted';
 export * from './QRCode';
 export * from './CollapsibleTabView';
+export * from './Skeleton';
+export * from './Screen';
 export * as DelayedFreeze from './DelayedFreeze';
 
 // Navigation

packages/kit/src/routes/Gallery/index.tsx

@@ -28,6 +28,7 @@ import AlertGallery from '../../views/Components/stories/Alert';
 import DividerGallery from '../../views/Components/stories/Divider';
 import FormGallery from '../../views/Components/stories/Form';
 import QRCodeGallery from '../../views/Components/stories/QRCode';
+import SkeletonGallery from '../../views/Components/stories/Skeleton';
 import TextAreaGallery from '../../views/Components/stories/TextArea';
 import ThemeGallery from '../../views/Components/stories/Theme';
 
@@ -39,6 +40,7 @@ export enum GalleryRoutes {
   ComponentIcon = 'component/icon',
   ComponentButton = 'component/button',
   ComponentSelect = 'component/select',
+  ComponentSkeleton = 'component/skeleton',
   ComponentIconButton = 'component/iconButton',
   ComponentBadge = 'component/badge',
   ComponentDialog = 'component/dialog',
@@ -83,6 +85,7 @@ export const stackScreenList = [
   { name: GalleryRoutes.ComponentDialog, component: DialogGallery },
   { name: GalleryRoutes.ComponentEmpty, component: EmptyGallery },
   { name: GalleryRoutes.ComponentRadio, component: RadioGallery },
+  { name: GalleryRoutes.ComponentSkeleton, component: SkeletonGallery },
   { name: GalleryRoutes.ComponentCheckbox, component: CheckboxGallery },
   { name: GalleryRoutes.ComponentToggleGroup, component: ToggleGroupGallery },
   { name: GalleryRoutes.ComponentActionList, component: ActionListGallery },

packages/kit/src/views/Components/stories/Radio.tsx

@@ -1,7 +1,24 @@
+import { useState } from 'react';
+
 import { Radio } from '@onekeyhq/components';
 
 import { Layout } from './utils/Layout';
 
+const RadioExample = () => {
+  const [radioValue, setRadioValue] = useState<string>();
+  return (
+    <Radio
+      value={radioValue}
+      onChange={setRadioValue}
+      options={[
+        { label: 'Option 1', value: '1' },
+        { label: 'Option 2', value: '2' },
+        { label: 'Option 3', value: '3' },
+      ]}
+    />
+  );
+};
+
 const RadioGallery = () => (
   <Layout
     description=".."
@@ -10,15 +27,7 @@ const RadioGallery = () => (
     elements={[
       {
         title: 'Default',
-        element: (
-          <Radio
-            options={[
-              { label: 'Option 1', value: '1' },
-              { label: 'Option 2', value: '2' },
-              { label: 'Option 3', value: '3' },
-            ]}
-          />
-        ),
+        element: <RadioExample />,
       },
     ]}
   />

packages/kit/src/views/Components/stories/Skeleton.tsx

@@ -0,0 +1,19 @@
+import { Skeleton } from '@onekeyhq/components';
+
+import { Layout } from './utils/Layout';
+
+const SelectGallery = () => (
+  <Layout
+    description="..."
+    suggestions={['...']}
+    boundaryConditions={['...']}
+    elements={[
+      {
+        title: '默认状态',
+        element: <Skeleton />,
+      },
+    ]}
+  />
+);
+
+export default SelectGallery;