[WIP] feat: improve dapp list render.

apps/mobile/src/components/Image/AppFastImage.tsx

@@ -0,0 +1,81 @@
+import { useRefState } from '@/hooks/common/useRefState';
+import { useThemeStyles } from '@/hooks/theme';
+import { createGetStyles } from '@/utils/styles';
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import FastImage from 'react-native-fast-image';
+
+type FastImageProps = React.ComponentProps<typeof FastImage>;
+export default function AppFastImage(
+  props: FastImageProps & {
+    PlaceholderContent?: React.ReactNode;
+    viewProps?: React.ComponentProps<typeof View>;
+  },
+) {
+  const { styles } = useThemeStyles(getStyles);
+  const {
+    PlaceholderContent,
+    viewProps,
+    onLoadEnd: propOnLoadEnd,
+    onError: propOnError,
+    ...rest
+  } = props;
+
+  const {
+    stateRef: firstLoadedRef,
+    state: firstLoaded,
+    setRefState,
+  } = useRefState(false);
+  const onLoadEnd = React.useCallback<
+    FastImageProps['onLoadEnd'] & object
+  >(() => {
+    if (!firstLoadedRef.current) setRefState(true, true);
+
+    propOnLoadEnd?.();
+  }, [firstLoadedRef, setRefState, propOnLoadEnd]);
+
+  const onError = React.useCallback<FastImageProps['onError'] & object>(() => {
+    if (!firstLoadedRef.current) setRefState(true, true);
+
+    propOnError?.();
+  }, [firstLoadedRef, setRefState, propOnError]);
+
+  return (
+    <View
+      {...viewProps}
+      style={[
+        styles.container,
+        // props.style?.width
+        viewProps?.style,
+      ]}>
+      <FastImage
+        {...rest}
+        style={StyleSheet.flatten([props.style])}
+        onLoadEnd={onLoadEnd}
+        onError={onError}
+      />
+      {PlaceholderContent && !firstLoaded && (
+        <View style={styles.placeholder}>{PlaceholderContent}</View>
+      )}
+    </View>
+  );
+}
+
+const getStyles = createGetStyles(colors => {
+  return {
+    container: {
+      position: 'relative',
+    },
+    placeholder: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      width: '100%',
+      height: '100%',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+  };
+});

apps/mobile/src/screens/Dapps/components/DappCard.tsx

@@ -16,6 +16,7 @@ import {
   TouchableOpacity,
   TouchableWithoutFeedback,
 } from 'react-native-gesture-handler';
+import FastImage from 'react-native-fast-image';
 import { DappIcon } from './DappIcon';
 import { stringUtils } from '@rabby-wallet/base-utils';
 import { CHAINS } from '@/constant/chains';
@@ -47,7 +48,7 @@ export const DappCardListBy = ({
             {data.map(item => {
               return (
                 <View style={styles.tooltipListItem} key={item.logo_url}>
-                  <Image
+                  <FastImage
                     style={styles.tooltipListItemIcon}
                     source={{ uri: item.logo_url }}
                   />
@@ -112,6 +113,7 @@ export const DappCard = ({
               data?.info?.logo_url
                 ? {
                     uri: data.info?.logo_url,
+                    priority: 'low',
                   }
                 : undefined
             }
@@ -121,7 +123,7 @@ export const DappCard = ({
           {isActive ? <View style={styles.dappIconCircle} /> : null}
           <>
             {data?.isConnected && chain ? (
-              <Image
+              <FastImage
                 source={{
                   uri: chain?.logo,
                 }}

apps/mobile/src/screens/Dapps/components/DappIcon.tsx

@@ -1,16 +1,9 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import AppFastImage from '@/components/Image/AppFastImage';
 import { useThemeColors } from '@/hooks/theme';
 import { getOriginName, hashCode } from '@/utils/common';
-import { Image } from '@rneui/themed';
-import React, { useMemo } from 'react';
-import {
-  // Image,
-  ImageStyle,
-  ImageURISource,
-  StyleProp,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
 
 const bgColorList = [
   '#F69373',
@@ -31,10 +24,9 @@ export const DappIcon = ({
   origin,
   style,
   source,
-}: {
-  style?: StyleProp<ImageStyle>;
+  ...rest
+}: React.ComponentProps<typeof AppFastImage> & {
   origin: string;
-  source?: ImageURISource;
 }) => {
   const colors = useThemeColors();
   const styles = React.useMemo(() => getStyles(colors), [colors]);
@@ -57,9 +49,15 @@ export const DappIcon = ({
     </View>
   );
 
-  if (source?.uri) {
+  if (source) {
     return (
-      <Image source={source} style={style} PlaceholderContent={Placeholder} />
+      <AppFastImage
+        source={source}
+        style={style}
+        fallback={false}
+        {...rest}
+        PlaceholderContent={Placeholder}
+      />
     );
   }