feat(panel): improved layout and performance

purrseus · purrseus · commit 748c09102d25 · 2025-10-12T06:39:18.000+07:00
diff --git a/src/core/constants.ts b/src/core/constants.ts
@@ -1 +1,3 @@
 export const NETWORK_REQUEST_HEADER = 'X-React-Native-Xenon';
+export const NETWORK_ITEM_HEIGHT = 36;
+export const CONSOLE_ITEM_HEIGHT = 36;
diff --git a/src/core/utils.ts b/src/core/utils.ts
@@ -152,6 +152,12 @@ export const convertToCurl = (
 
   return curlCommand;
 };
+
+export const formatCount = (count: number) => {
+  if (count < 1000) return count.toString();
+  if (count < 1000000) return `${(count / 1000).toFixed(1)}K`;
+  return `${(count / 1000000).toFixed(1)}M`;
+};
 //#endregion
 
 //#region decorators
diff --git a/src/ui/components/headers/DebuggerHeader.tsx b/src/ui/components/headers/DebuggerHeader.tsx
@@ -6,6 +6,7 @@ import icons from '../../../theme/icons';
 import Divider from '../common/Divider';
 import DebuggerHeaderItem from '../items/DebuggerHeaderItem';
 import HeaderComponents from './HeaderComponents';
+import { formatCount } from '../../../core/utils';
 
 interface DebuggerHeaderProps {
   selectedPanel: PanelState;
@@ -54,7 +55,7 @@ const DebuggerHeader = forwardRef<ScrollView, DebuggerHeaderProps>(
         <DebuggerHeaderItem
           isLabel
           isActive={selectedPanel === PanelState.Network}
-          content="Network Panel"
+          content={`Network (${formatCount(networkInterceptor.networkRequests.size)})`}
           onPress={() => switchTo(PanelState.Network)}
         />
 
@@ -74,7 +75,7 @@ const DebuggerHeader = forwardRef<ScrollView, DebuggerHeaderProps>(
         <DebuggerHeaderItem
           isLabel
           isActive={selectedPanel === PanelState.Console}
-          content="Console Panel"
+          content={`Console (${formatCount(consoleInterceptor.logMessages.length)})`}
           onPress={() => switchTo(PanelState.Console)}
         />
 
diff --git a/src/ui/components/items/ConsolePanelItem.tsx b/src/ui/components/items/ConsolePanelItem.tsx
@@ -1,4 +1,6 @@
-import { StyleSheet, Text } from 'react-native';
+import { memo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { CONSOLE_ITEM_HEIGHT } from '../../../core/constants';
 import { formatLogMessage, getConsoleTypeColor } from '../../../core/utils';
 import colors from '../../../theme/colors';
 import type { LogMessage } from '../../../types';
@@ -8,27 +10,39 @@ interface ConsolePanelItemProps extends LogMessage {
   onPress: () => void;
 }
 
-export default function ConsolePanelItem({ type, values, onPress }: ConsolePanelItemProps) {
-  return (
-    <Touchable
-      onPress={onPress}
-      style={[styles.container, { backgroundColor: getConsoleTypeColor(type) }]}
-    >
-      <Text numberOfLines={1} style={styles.text}>
-        {formatLogMessage(values)}
-      </Text>
-    </Touchable>
-  );
-}
+const ConsolePanelItem = memo<ConsolePanelItemProps>(
+  ({ type, values, onPress }) => {
+    return (
+      <Touchable onPress={onPress} style={styles.container}>
+        <View style={[styles.wrapper, { backgroundColor: getConsoleTypeColor(type) }]}>
+          <Text numberOfLines={1} style={styles.text}>
+            {formatLogMessage(values)}
+          </Text>
+        </View>
+      </Touchable>
+    );
+  },
+  (prevProps, nextProps) => {
+    return prevProps.type === nextProps.type && prevProps.values === nextProps.values;
+  },
+);
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    padding: 8,
+    paddingBottom: 4,
+    height: CONSOLE_ITEM_HEIGHT,
+  },
+  wrapper: {
+    flex: 1,
+    paddingHorizontal: 8,
+    justifyContent: 'center',
     borderRadius: 8,
   },
   text: {
     color: colors.black,
     fontSize: 14,
   },
 });
+
+export default ConsolePanelItem;
diff --git a/src/ui/components/items/NetworkPanelItem.tsx b/src/ui/components/items/NetworkPanelItem.tsx
@@ -1,13 +1,15 @@
-import { useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { URL } from 'react-native-url-polyfill';
+import { NETWORK_ITEM_HEIGHT } from '../../../core/constants';
 import {
   formatRequestDuration,
   formatRequestMethod,
   formatRequestStatusCode,
 } from '../../../core/utils';
 import colors from '../../../theme/colors';
 import type { HttpRequest, NetworkRequest } from '../../../types';
+import Divider from '../common/Divider';
 import Touchable from '../common/Touchable';
 
 interface NetworkPanelItemProps {
@@ -39,76 +41,85 @@ const getMethodColor = (method: string) => {
   }
 };
 
-export default function NetworkPanelItem({
-  method,
-  name,
-  startTime,
-  endTime,
-  status,
-  onPress,
-}: NetworkPanelItemProps) {
-  const duration = formatRequestDuration(startTime, endTime);
-  const requestMethod = formatRequestMethod(method);
-  const requestStatusCode = formatRequestStatusCode(status);
-  const isRequestFailed = Number.isInteger(status) && status! >= 400 && status! < 600;
-  const textStyle = [styles.text, isRequestFailed && styles.failedText];
+const NetworkPanelItem = memo<NetworkPanelItemProps>(
+  ({ method, name, startTime, endTime, status, onPress }) => {
+    const duration = formatRequestDuration(startTime, endTime);
+    const requestMethod = formatRequestMethod(method);
+    const requestStatusCode = formatRequestStatusCode(status);
+    const isRequestFailed = Number.isInteger(status) && status! >= 400 && status! < 600;
+    const textStyle = [styles.text, isRequestFailed && styles.failedText];
 
-  const requestPath = useMemo(() => {
-    if (!name) return '[failed]';
+    const requestPath = useMemo(() => {
+      if (!name) return '[failed]';
 
-    try {
-      const url = new URL(name);
-      const suffixUrl = url.pathname + url.search;
+      try {
+        const url = new URL(name);
+        const suffixUrl = url.pathname + url.search;
 
-      if (suffixUrl === '/') return url.host;
-      return suffixUrl;
-    } catch (error) {
-      return name;
-    }
-  }, [name]);
+        if (suffixUrl === '/') return url.host;
+        return suffixUrl;
+      } catch (error) {
+        return name;
+      }
+    }, [name]);
 
-  return (
-    <Touchable onPress={onPress} style={styles.container}>
-      <View style={styles.column}>
-        <Text
-          numberOfLines={1}
-          style={[
-            styles.text,
-            styles.methodText,
-            { backgroundColor: getMethodColor(requestMethod) },
-          ]}
-        >
-          {requestMethod}
-        </Text>
-      </View>
+    return (
+      <View style={styles.container}>
+        <Touchable onPress={onPress} style={styles.wrapper}>
+          <View style={styles.column}>
+            <Text
+              numberOfLines={1}
+              style={[
+                styles.text,
+                styles.methodText,
+                { backgroundColor: getMethodColor(requestMethod) },
+              ]}
+            >
+              {requestMethod}
+            </Text>
+          </View>
 
-      <View style={[styles.column, styles.pathColumn]}>
-        <Text numberOfLines={1} style={textStyle}>
-          {requestPath}
-        </Text>
-      </View>
+          <View style={[styles.column, styles.pathColumn]}>
+            <Text numberOfLines={1} style={textStyle}>
+              {requestPath}
+            </Text>
+          </View>
 
-      <View style={[styles.column, styles.durationColumn]}>
-        <Text numberOfLines={1} style={textStyle}>
-          {duration}
-        </Text>
-      </View>
+          <View style={[styles.column, styles.durationColumn]}>
+            <Text numberOfLines={1} style={textStyle}>
+              {duration}
+            </Text>
+          </View>
 
-      <View style={styles.column}>
-        <Text numberOfLines={1} style={textStyle}>
-          {requestStatusCode}
-        </Text>
+          <View style={styles.column}>
+            <Text numberOfLines={1} style={textStyle}>
+              {requestStatusCode}
+            </Text>
+          </View>
+        </Touchable>
+        <Divider type="horizontal" />
       </View>
-    </Touchable>
-  );
-}
+    );
+  },
+  (prevProps, nextProps) => {
+    return (
+      prevProps.method === nextProps.method &&
+      prevProps.name === nextProps.name &&
+      prevProps.startTime === nextProps.startTime &&
+      prevProps.endTime === nextProps.endTime &&
+      prevProps.status === nextProps.status
+    );
+  },
+);
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+  },
+  wrapper: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: 8,
+    height: NETWORK_ITEM_HEIGHT,
     columnGap: 8,
   },
   pathColumn: {
@@ -138,3 +149,5 @@ const styles = StyleSheet.create({
     fontWeight: '600',
   },
 });
+
+export default NetworkPanelItem;
diff --git a/src/ui/components/panels/ConsolePanel.tsx b/src/ui/components/panels/ConsolePanel.tsx
@@ -2,19 +2,17 @@ import { forwardRef, useCallback, useContext, useMemo } from 'react';
 import {
   FlatList,
   StyleSheet,
-  View,
   type ListRenderItem,
   type StyleProp,
   type ViewStyle,
 } from 'react-native';
 import { MainContext } from '../../../contexts';
+import { CONSOLE_ITEM_HEIGHT } from '../../../core/constants';
 import { formatLogMessage } from '../../../core/utils';
 import { DebuggerPanel, type LogMessage } from '../../../types';
 import Empty from '../common/Empty';
 import ConsolePanelItem from '../items/ConsolePanelItem';
 
-const Separator = () => <View style={styles.spacing} />;
-
 const ConsolePanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ style }, ref) => {
   const {
     debuggerState: { searchQuery },
@@ -55,17 +53,26 @@ const ConsolePanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ s
     [setDebuggerState],
   );
 
+  const getItemLayout = useCallback(
+    (_: ArrayLike<LogMessage> | null | undefined, index: number) => ({
+      length: CONSOLE_ITEM_HEIGHT,
+      offset: CONSOLE_ITEM_HEIGHT * index,
+      index,
+    }),
+    [],
+  );
+
   return (
     <FlatList
       ref={ref}
       inverted={!!data.length}
       data={data}
       renderItem={renderItem}
       keyExtractor={(_, index) => index.toString()}
-      ItemSeparatorComponent={Separator}
       style={[styles.container, style]}
       contentContainerStyle={data.length ? styles.contentContainer : undefined}
       ListEmptyComponent={<Empty>No logs yet</Empty>}
+      getItemLayout={getItemLayout}
     />
   );
 });
@@ -77,9 +84,6 @@ const styles = StyleSheet.create({
   contentContainer: {
     padding: 8,
   },
-  spacing: {
-    height: 4,
-  },
 });
 
 export default ConsolePanel;
diff --git a/src/ui/components/panels/NetworkPanel.tsx b/src/ui/components/panels/NetworkPanel.tsx
@@ -7,19 +7,17 @@ import {
   type ViewStyle,
 } from 'react-native';
 import { MainContext } from '../../../contexts';
+import { NETWORK_ITEM_HEIGHT } from '../../../core/constants';
 import {
   DebuggerPanel,
   NetworkType,
   type HttpRequest,
   type ID,
   type WebSocketRequest,
 } from '../../../types';
-import Divider from '../common/Divider';
 import Empty from '../common/Empty';
 import NetworkPanelItem from '../items/NetworkPanelItem';
 
-const Separator = () => <Divider type="horizontal" />;
-
 const NetworkPanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ style }, ref) => {
   const {
     debuggerState: { searchQuery },
@@ -64,16 +62,28 @@ const NetworkPanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ s
     [setDebuggerState],
   );
 
+  const getItemLayout = useCallback(
+    (
+      _: ArrayLike<[NonNullable<ID>, HttpRequest | WebSocketRequest]> | null | undefined,
+      index: number,
+    ) => ({
+      length: NETWORK_ITEM_HEIGHT,
+      offset: NETWORK_ITEM_HEIGHT * index,
+      index,
+    }),
+    [],
+  );
+
   return (
     <FlatList
       inverted={!!data.length}
       data={data}
       ref={ref}
       renderItem={renderItem}
       keyExtractor={([key]) => key}
-      ItemSeparatorComponent={Separator}
       style={[styles.container, style]}
       ListEmptyComponent={<Empty>No records yet</Empty>}
+      getItemLayout={getItemLayout}
     />
   );
 });

Original file line number	Diff line number	Diff line change
`@@ -1 +1,3 @@`
`1`	`1`	`export const NETWORK_REQUEST_HEADER = 'X-React-Native-Xenon';`
	`2`	`+export const NETWORK_ITEM_HEIGHT = 36;`
	`3`	`+export const CONSOLE_ITEM_HEIGHT = 36;`