react-native-inapp-inspector 2.3.0 → 2.3.1

package/dist/commonjs/components/Inspector/MainScreen.js

@@ -49,6 +49,7 @@ const LogDetail_1 = __importDefault(require("./LogDetail"));
 const ConsoleTab_1 = __importDefault(require("./ConsoleTab"));
 const AnalyticsTab_1 = __importDefault(require("./AnalyticsTab"));
 const AnalyticsDetail_1 = __importDefault(require("../AnalyticsDetail"));
+const SkeletonPlaceholder_1 = __importDefault(require("../SkeletonPlaceholder"));
 const ReduxTab_1 = __importDefault(require("./ReduxTab"));
 const ReduxDetail_1 = __importDefault(require("./ReduxDetail"));
 const BundleTab_1 = __importDefault(require("./BundleTab"));
@@ -64,7 +65,7 @@ const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
 const NavigationTracker_1 = __importDefault(require("./NavigationTracker"));
 const MainScreen = () => {
-    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, activeTab, isReady, isEnabled, useNativeFab, hasNavigationContext, setNavState, } = (0, InspectorContext_1.useInspector)();
+    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, activeTab, isReady, enabled, useNativeFab, hasNavigationContext, setNavState, } = (0, InspectorContext_1.useInspector)();
     const isDetailActive = (activeTab === 'apis' && selected != null) ||
         (activeTab === 'analytics' && selectedEvent != null) ||
         (activeTab === 'logs' && selectedLog != null) ||
@@ -106,7 +107,7 @@ const MainScreen = () => {
     }, [activeTab]);
     return (<>
       {(react_native_1.Platform.OS === 'ios' || react_native_1.Platform.OS === 'android') &&
-            isEnabled &&
+            enabled &&
             !visible &&
             !useNativeFab && <FabLauncher_1.default />}
       <react_native_1.Modal visible={visible} animationType={modalAnimationType} transparent statusBarTranslucent={true}>
@@ -126,10 +127,10 @@ const MainScreen = () => {
               <InspectorHeader_1.default />
 
               <react_native_1.View style={{ flex: 1 }}>
-                {isReady ? (<react_native_1.View style={{ flex: 1 }}>
-                    {/* ─── Horizontal Scrollable Tab Bar inside Content ─── */}
-                    {!isDetailActive && <TabBar_1.default />}
+                {/* ─── Horizontal Scrollable Tab Bar inside Content (Always visible) ─── */}
+                {!isDetailActive && <TabBar_1.default />}
 
+                {isReady ? (<react_native_1.View style={{ flex: 1 }}>
                     {/* Persistent List Layer - Never unmounted, preserves 100% native scroll with smooth tab transition */}
                     <react_native_1.Animated.View style={[
                     {
@@ -181,12 +182,7 @@ const MainScreen = () => {
                         {activeTab === 'redux' && <ReduxDetail_1.default />}
                         {activeTab === 'crash' && selectedCrash != null && (<CrashDetail_1.default />)}
                       </react_native_1.Animated.View>)}
-                  </react_native_1.View>) : (<react_native_1.View style={styles_1.default.empty}>
-                    <react_native_1.ActivityIndicator size="large" color={AppColors_1.AppColors.purple}/>
-                    <react_native_1.Text style={[styles_1.default.emptySub, { marginTop: 12 }]}>
-                      Loading logs...
-                    </react_native_1.Text>
-                  </react_native_1.View>)}
+                  </react_native_1.View>) : (<SkeletonPlaceholder_1.default />)}
 
                 {/* Settings Panel Layer - Rendered on top with smooth slide & spring transition */}
                 {settingsPage !== null && (<react_native_1.Animated.View style={[

package/dist/commonjs/components/Inspector/StorageTab.js

@@ -47,6 +47,92 @@ const NetworkIcons_1 = require("../NetworkIcons");
 const storageInspector_1 = require("../../customHooks/storageInspector");
 const helpers_1 = require("../../helpers");
 const toast_1 = require("../../helpers/toast");
+const getTypeBadge = (type) => {
+    switch (type) {
+        case 'json':
+            return { label: 'JSON', color: AppColors_1.AppColors.purple, bg: `${AppColors_1.AppColors.purple}16` };
+        case 'number':
+            return { label: 'NUM', color: AppColors_1.AppColors.warningIconGold, bg: `${AppColors_1.AppColors.warningIconGold}16` };
+        case 'boolean':
+            return { label: 'BOOL', color: AppColors_1.AppColors.emerald500, bg: `${AppColors_1.AppColors.emerald500}16` };
+        case 'null':
+            return { label: 'NULL', color: AppColors_1.AppColors.grayTextWeak, bg: `${AppColors_1.AppColors.grayTextWeak}16` };
+        default:
+            return { label: 'STR', color: AppColors_1.AppColors.blue500, bg: `${AppColors_1.AppColors.blue500}16` };
+    }
+};
+const StorageEntryCard = react_1.default.memo(function StorageEntryCard({ entry, isExpanded, onToggleExpand, onCopy, onEdit, onDelete, badge, }) {
+    const formattedBytes = (0, react_1.useMemo)(() => {
+        return entry.byteSize < 1024
+            ? `${entry.byteSize} B`
+            : `${(entry.byteSize / 1024).toFixed(1)} KB`;
+    }, [entry.byteSize]);
+    // Lazy compute displayed value to avoid layout thrashing on large JSON strings
+    const displayValue = (0, react_1.useMemo)(() => {
+        if (!isExpanded) {
+            if (entry.value.length > 250) {
+                return entry.value.slice(0, 250) + '...';
+            }
+            return entry.value;
+        }
+        if (entry.type === 'json') {
+            try {
+                const parsed = entry.parsedValue ?? JSON.parse(entry.value);
+                return JSON.stringify(parsed, null, 2);
+            }
+            catch {
+                return entry.value;
+            }
+        }
+        return entry.value;
+    }, [isExpanded, entry.value, entry.type, entry.parsedValue]);
+    return (<react_native_1.View style={styles.entryCard}>
+      {/* Entry Header: Key name, Type Badge, Size, Actions */}
+      <react_native_1.View style={styles.entryHeader}>
+        <react_native_1.View style={{ flex: 1, marginRight: 8 }}>
+          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
+            <react_native_1.Text style={styles.entryKey} numberOfLines={1} selectable>
+              {entry.key}
+            </react_native_1.Text>
+            <react_native_1.View style={[
+            styles.typeBadge,
+            { backgroundColor: badge.bg, borderColor: `${badge.color}33` },
+        ]}>
+              <react_native_1.Text style={[styles.typeBadgeText, { color: badge.color }]}>
+                {badge.label}
+              </react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.Text style={styles.sizeText}>{formattedBytes}</react_native_1.Text>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        {/* Actions: Copy, Edit, Delete */}
+        <react_native_1.View style={styles.entryActions}>
+          <TouchableScale_1.default hitSlop={6} onPress={() => onCopy(entry)} style={styles.entryActionBtn}>
+            <NetworkIcons_1.CopyIcon size={12} color={AppColors_1.AppColors.grayText}/>
+          </TouchableScale_1.default>
+
+          <TouchableScale_1.default hitSlop={6} onPress={() => onEdit(entry)} style={styles.entryActionBtn}>
+            <NetworkIcons_1.PencilIcon size={12} color={AppColors_1.AppColors.purple}/>
+          </TouchableScale_1.default>
+
+          <TouchableScale_1.default hitSlop={6} onPress={() => onDelete(entry.key)} style={[styles.entryActionBtn, { backgroundColor: `${AppColors_1.AppColors.errorColor}12` }]}>
+            <NetworkIcons_1.TrashIcon size={12} color={AppColors_1.AppColors.errorColor}/>
+          </TouchableScale_1.default>
+        </react_native_1.View>
+      </react_native_1.View>
+
+      {/* Entry Value Preview / Viewer */}
+      <TouchableScale_1.default onPress={() => onToggleExpand(entry.key)} style={styles.valuePreviewBox}>
+        <react_native_1.Text style={styles.valuePreviewText} numberOfLines={isExpanded ? undefined : 3} selectable={isExpanded}>
+          {displayValue}
+        </react_native_1.Text>
+        {entry.value.length > 80 && (<react_native_1.Text style={styles.expandHint}>
+            {isExpanded ? '▲ Collapse' : '▼ Expand'}
+          </react_native_1.Text>)}
+      </TouchableScale_1.default>
+    </react_native_1.View>);
+});
 exports.StorageTab = react_1.default.memo(() => {
     const { t } = (0, i18n_1.useTranslation)();
     const [activeDriver, setActiveDriver] = (0, react_1.useState)('asyncStorage');
@@ -205,20 +291,11 @@ exports.StorageTab = react_1.default.memo(() => {
             return `${(totalBytes / 1024).toFixed(1)} KB`;
         return `${(totalBytes / (1024 * 1024)).toFixed(2)} MB`;
     }, [totalBytes]);
-    const getTypeBadge = (type) => {
-        switch (type) {
-            case 'json':
-                return { label: 'JSON', color: AppColors_1.AppColors.purple, bg: `${AppColors_1.AppColors.purple}16` };
-            case 'number':
-                return { label: 'NUM', color: AppColors_1.AppColors.warningIconGold, bg: `${AppColors_1.AppColors.warningIconGold}16` };
-            case 'boolean':
-                return { label: 'BOOL', color: AppColors_1.AppColors.emerald500, bg: `${AppColors_1.AppColors.emerald500}16` };
-            case 'null':
-                return { label: 'NULL', color: AppColors_1.AppColors.grayTextWeak, bg: `${AppColors_1.AppColors.grayTextWeak}16` };
-            default:
-                return { label: 'STR', color: AppColors_1.AppColors.blue500, bg: `${AppColors_1.AppColors.blue500}16` };
-        }
-    };
+    const handleCopyEntry = (0, react_1.useCallback)((entry) => {
+        (0, helpers_1.copyToClipboard)(entry.value, entry.key);
+        (0, toast_1.showToast)(`Copied value of "${entry.key}"`);
+    }, []);
+    const renderItem = (0, react_1.useCallback)(({ item }) => (<StorageEntryCard entry={item} isExpanded={Boolean(expandedKeys[item.key])} onToggleExpand={toggleExpand} onCopy={handleCopyEntry} onEdit={handleOpenEdit} onDelete={handleDeleteKey} badge={getTypeBadge(item.type)}/>), [expandedKeys, handleCopyEntry]);
     const isConnected = activeDriver === 'asyncStorage'
         ? (0, storageInspector_1.isAsyncStorageConnected)()
         : (0, storageInspector_1.isMMKVConnected)();
@@ -334,81 +411,19 @@ exports.StorageTab = react_1.default.memo(() => {
       {isLoading ? (<react_native_1.View style={styles.loadingContainer}>
           <react_native_1.ActivityIndicator size="small" color={AppColors_1.AppColors.purple}/>
           <react_native_1.Text style={styles.loadingText}>Loading storage entries...</react_native_1.Text>
-        </react_native_1.View>) : filteredEntries.length === 0 ? (<react_native_1.ScrollView contentContainerStyle={styles.emptyContainer} showsVerticalScrollIndicator={false}>
-          <react_native_1.View style={styles.emptyIconWrap}>
-            <NetworkIcons_1.DatabaseIcon size={28} color={AppColors_1.AppColors.grayTextWeak}/>
-          </react_native_1.View>
-          <react_native_1.Text style={styles.emptyTitle}>
-            {search ? 'No matching keys found' : `No ${activeDriver === 'asyncStorage' ? 'AsyncStorage' : 'MMKV'} Keys`}
-          </react_native_1.Text>
-          <react_native_1.Text style={styles.emptySubtitle}>
-            {search
-                ? 'Try modifying your search query'
-                : `Storage is auto-detected. Tap "+ Add" above to create your first ${activeDriver === 'asyncStorage' ? 'AsyncStorage' : 'MMKV'} key!`}
-          </react_native_1.Text>
-        </react_native_1.ScrollView>) : (<react_native_1.ScrollView style={styles.scrollArea} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
-          {filteredEntries.map(entry => {
-                const isExpanded = Boolean(expandedKeys[entry.key]);
-                const badge = getTypeBadge(entry.type);
-                const formattedBytes = entry.byteSize < 1024
-                    ? `${entry.byteSize} B`
-                    : `${(entry.byteSize / 1024).toFixed(1)} KB`;
-                return (<react_native_1.View key={entry.key} style={styles.entryCard}>
-                {/* Entry Header: Key name, Type Badge, Size, Actions */}
-                <react_native_1.View style={styles.entryHeader}>
-                  <react_native_1.View style={{ flex: 1, marginRight: 8 }}>
-                    <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
-                      <react_native_1.Text style={styles.entryKey} numberOfLines={1} selectable>
-                        {entry.key}
-                      </react_native_1.Text>
-                      <react_native_1.View style={[
-                        styles.typeBadge,
-                        { backgroundColor: badge.bg, borderColor: `${badge.color}33` },
-                    ]}>
-                        <react_native_1.Text style={[styles.typeBadgeText, { color: badge.color }]}>
-                          {badge.label}
-                        </react_native_1.Text>
-                      </react_native_1.View>
-                      <react_native_1.Text style={styles.sizeText}>{formattedBytes}</react_native_1.Text>
-                    </react_native_1.View>
-                  </react_native_1.View>
-
-                  {/* Actions: Copy, Edit, Delete */}
-                  <react_native_1.View style={styles.entryActions}>
-                    <TouchableScale_1.default hitSlop={6} onPress={() => {
-                        (0, helpers_1.copyToClipboard)(entry.value, entry.key);
-                        (0, toast_1.showToast)(`Copied value of "${entry.key}"`);
-                    }} style={styles.entryActionBtn}>
-                      <NetworkIcons_1.CopyIcon size={12} color={AppColors_1.AppColors.grayText}/>
-                    </TouchableScale_1.default>
-
-                    <TouchableScale_1.default hitSlop={6} onPress={() => handleOpenEdit(entry)} style={styles.entryActionBtn}>
-                      <NetworkIcons_1.PencilIcon size={12} color={AppColors_1.AppColors.purple}/>
-                    </TouchableScale_1.default>
-
-                    <TouchableScale_1.default hitSlop={6} onPress={() => handleDeleteKey(entry.key)} style={[styles.entryActionBtn, { backgroundColor: `${AppColors_1.AppColors.errorColor}12` }]}>
-                      <NetworkIcons_1.TrashIcon size={12} color={AppColors_1.AppColors.errorColor}/>
-                    </TouchableScale_1.default>
-                  </react_native_1.View>
-                </react_native_1.View>
-
-                {/* Entry Value Preview / Viewer */}
-                <TouchableScale_1.default onPress={() => toggleExpand(entry.key)} style={styles.valuePreviewBox}>
-                  <react_native_1.Text style={styles.valuePreviewText} numberOfLines={isExpanded ? undefined : 3} selectable>
-                    {entry.type === 'json' && entry.parsedValue
-                        ? isExpanded
-                            ? JSON.stringify(entry.parsedValue, null, 2)
-                            : entry.value
-                        : entry.value}
-                  </react_native_1.Text>
-                  {entry.value.length > 80 && (<react_native_1.Text style={styles.expandHint}>
-                      {isExpanded ? '▲ Collapse' : '▼ Expand'}
-                    </react_native_1.Text>)}
-                </TouchableScale_1.default>
-              </react_native_1.View>);
-            })}
-          <react_native_1.View style={{ height: 60 }}/>
-        </react_native_1.ScrollView>)}
+        </react_native_1.View>) : (<react_native_1.FlatList data={filteredEntries} keyExtractor={item => item.key} renderItem={renderItem} initialNumToRender={10} maxToRenderPerBatch={10} windowSize={5} removeClippedSubviews={react_native_1.Platform.OS === 'android'} style={styles.scrollArea} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false} ListEmptyComponent={<react_native_1.View style={styles.emptyContainer}>
+              <react_native_1.View style={styles.emptyIconWrap}>
+                <NetworkIcons_1.DatabaseIcon size={28} color={AppColors_1.AppColors.grayTextWeak}/>
+              </react_native_1.View>
+              <react_native_1.Text style={styles.emptyTitle}>
+                {search ? 'No matching keys found' : `No ${activeDriver === 'asyncStorage' ? 'AsyncStorage' : 'MMKV'} Keys`}
+              </react_native_1.Text>
+              <react_native_1.Text style={styles.emptySubtitle}>
+                {search
+                    ? 'Try modifying your search query'
+                    : `Storage is auto-detected. Tap "+ Add" above to create your first ${activeDriver === 'asyncStorage' ? 'AsyncStorage' : 'MMKV'} key!`}
+              </react_native_1.Text>
+            </react_native_1.View>} ListFooterComponent={<react_native_1.View style={{ height: 60 }}/>}/>)}
 
       {/* ── Create / Edit Key Modal ── */}
       <react_native_1.Modal visible={modalVisible} transparent animationType="fade" onRequestClose={() => setModalVisible(false)}>

package/dist/commonjs/components/SkeletonPlaceholder.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface SkeletonPlaceholderProps {
+    cardCount?: number;
+}
+declare const SkeletonPlaceholder: React.NamedExoticComponent<SkeletonPlaceholderProps>;
+export default SkeletonPlaceholder;

package/dist/commonjs/components/SkeletonPlaceholder.js

@@ -0,0 +1,208 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const AppColors_1 = require("../styles/AppColors");
+const SkeletonPlaceholder = react_1.default.memo(function SkeletonPlaceholder({ cardCount = 4, }) {
+    const shimmerAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0.35)).current;
+    (0, react_1.useEffect)(() => {
+        const animation = react_native_1.Animated.loop(react_native_1.Animated.sequence([
+            react_native_1.Animated.timing(shimmerAnim, {
+                toValue: 0.85,
+                duration: 750,
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(shimmerAnim, {
+                toValue: 0.35,
+                duration: 750,
+                useNativeDriver: true,
+            }),
+        ]));
+        animation.start();
+        return () => animation.stop();
+    }, [shimmerAnim]);
+    return (<react_native_1.View style={skeletonStyles.container}>
+      {/* ─── Search & Scope Toolbar Skeleton ─── */}
+      <react_native_1.View style={skeletonStyles.toolbarSkeleton}>
+        <react_native_1.Animated.View style={[
+            skeletonStyles.searchBarSkeleton,
+            { opacity: shimmerAnim },
+        ]}/>
+        <react_native_1.View style={skeletonStyles.actionButtonsRow}>
+          <react_native_1.Animated.View style={[skeletonStyles.iconButtonSkeleton, { opacity: shimmerAnim }]}/>
+          <react_native_1.Animated.View style={[skeletonStyles.iconButtonSkeleton, { opacity: shimmerAnim }]}/>
+        </react_native_1.View>
+      </react_native_1.View>
+
+      {/* ─── Quick Filter Chips Skeleton Strip ─── */}
+      <react_native_1.View style={skeletonStyles.chipStripSkeleton}>
+        <react_native_1.Animated.View style={[skeletonStyles.chipSkeleton, { width: 48, opacity: shimmerAnim }]}/>
+        <react_native_1.Animated.View style={[skeletonStyles.chipSkeleton, { width: 68, opacity: shimmerAnim }]}/>
+        <react_native_1.Animated.View style={[skeletonStyles.chipSkeleton, { width: 76, opacity: shimmerAnim }]}/>
+        <react_native_1.Animated.View style={[skeletonStyles.chipSkeleton, { width: 58, opacity: shimmerAnim }]}/>
+      </react_native_1.View>
+
+      {/* ─── List Cards Skeleton ─── */}
+      {Array.from({ length: cardCount }).map((_, i) => (<react_native_1.Animated.View key={`skeleton_card_${i}`} style={[skeletonStyles.cardSkeleton, { opacity: shimmerAnim }]}>
+          {/* Top row: Status pill + Method + Time */}
+          <react_native_1.View style={skeletonStyles.cardTopRow}>
+            <react_native_1.View style={skeletonStyles.badgeGroup}>
+              <react_native_1.View style={skeletonStyles.statusBadgeSkeleton}/>
+              <react_native_1.View style={skeletonStyles.methodBadgeSkeleton}/>
+            </react_native_1.View>
+            <react_native_1.View style={skeletonStyles.timeSkeleton}/>
+          </react_native_1.View>
+
+          {/* Middle row: URL lines */}
+          <react_native_1.View style={skeletonStyles.urlLineLong}/>
+          <react_native_1.View style={skeletonStyles.urlLineShort}/>
+
+          {/* Bottom row: Latency & Size */}
+          <react_native_1.View style={skeletonStyles.cardBottomRow}>
+            <react_native_1.View style={skeletonStyles.metaPillSkeleton}/>
+            <react_native_1.View style={skeletonStyles.metaPillSkeleton}/>
+          </react_native_1.View>
+        </react_native_1.Animated.View>))}
+    </react_native_1.View>);
+});
+const skeletonStyles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        paddingHorizontal: 12,
+        paddingTop: 8,
+    },
+    toolbarSkeleton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        marginBottom: 8,
+    },
+    searchBarSkeleton: {
+        flex: 1,
+        height: 36,
+        borderRadius: 8,
+        backgroundColor: AppColors_1.AppColors.graySurface,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+    },
+    actionButtonsRow: {
+        flexDirection: 'row',
+        gap: 6,
+    },
+    iconButtonSkeleton: {
+        width: 36,
+        height: 36,
+        borderRadius: 8,
+        backgroundColor: AppColors_1.AppColors.graySurface,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+    },
+    chipStripSkeleton: {
+        flexDirection: 'row',
+        gap: 6,
+        marginBottom: 10,
+    },
+    chipSkeleton: {
+        height: 24,
+        borderRadius: 6,
+        backgroundColor: AppColors_1.AppColors.graySurface,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+    },
+    cardSkeleton: {
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderRadius: 10,
+        padding: 12,
+        marginBottom: 8,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+    },
+    cardTopRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 8,
+    },
+    badgeGroup: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
+    statusBadgeSkeleton: {
+        width: 38,
+        height: 18,
+        borderRadius: 4,
+        backgroundColor: AppColors_1.AppColors.graySurface,
+    },
+    methodBadgeSkeleton: {
+        width: 44,
+        height: 18,
+        borderRadius: 4,
+        backgroundColor: AppColors_1.AppColors.graySurface,
+    },
+    timeSkeleton: {
+        width: 48,
+        height: 12,
+        borderRadius: 4,
+        backgroundColor: AppColors_1.AppColors.graySurface,
+    },
+    urlLineLong: {
+        height: 13,
+        borderRadius: 4,
+        backgroundColor: AppColors_1.AppColors.graySurface,
+        marginBottom: 5,
+        width: '90%',
+    },
+    urlLineShort: {
+        height: 11,
+        borderRadius: 4,
+        backgroundColor: AppColors_1.AppColors.graySurface,
+        marginBottom: 8,
+        width: '55%',
+    },
+    cardBottomRow: {
+        flexDirection: 'row',
+        gap: 8,
+        marginTop: 2,
+    },
+    metaPillSkeleton: {
+        width: 52,
+        height: 14,
+        borderRadius: 4,
+        backgroundColor: AppColors_1.AppColors.graySurface,
+    },
+});
+exports.default = SkeletonPlaceholder;

package/dist/commonjs/constants/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "2.3.0";
+export declare const LIB_VERSION = "2.3.1";

package/dist/commonjs/constants/version.js

@@ -3,4 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LIB_VERSION = void 0;
 // AUTO-GENERATED FILE — do not edit by hand.
 // Regenerated from package.json on every build by scripts/gen-version.js.
-exports.LIB_VERSION = '2.3.0';
+exports.LIB_VERSION = '2.3.1';

package/dist/commonjs/customHooks/storageInspector.d.ts

@@ -37,11 +37,11 @@ export declare const getRegisteredMMKVInstanceIds: () => string[];
  */
 export declare const calculateByteSize: (str: string) => number;
 /**
- * Determine type and format value safely
+ * Determine type and format value safely without blocking JS thread
  */
 export declare const analyzeStorageValue: (rawVal: any) => {
     strVal: string;
-    parsedVal?: any;
+    parsedValue?: any;
     type: "json" | "string" | "number" | "boolean" | "null";
     byteSize: number;
 };

package/dist/commonjs/customHooks/storageInspector.js

@@ -266,34 +266,38 @@ const calculateByteSize = (str) => {
 };
 exports.calculateByteSize = calculateByteSize;
 /**
- * Determine type and format value safely
+ * Determine type and format value safely without blocking JS thread
  */
 const analyzeStorageValue = (rawVal) => {
     if (rawVal === null || rawVal === undefined) {
         return { strVal: 'null', type: 'null', byteSize: 4 };
     }
     const strVal = typeof rawVal === 'string' ? rawVal : String(rawVal);
-    const byteSize = (0, exports.calculateByteSize)(strVal);
+    const byteSize = strVal.length * 2;
     if (typeof rawVal === 'number') {
-        return { strVal, parsedVal: rawVal, type: 'number', byteSize };
+        return { strVal, parsedValue: rawVal, type: 'number', byteSize };
     }
     if (typeof rawVal === 'boolean') {
-        return { strVal, parsedVal: rawVal, type: 'boolean', byteSize };
+        return { strVal, parsedValue: rawVal, type: 'boolean', byteSize };
     }
     const trimmed = strVal.trim();
     if ((trimmed.startsWith('{') && trimmed.endsWith('}')) ||
         (trimmed.startsWith('[') && trimmed.endsWith(']'))) {
-        try {
-            const parsed = JSON.parse(trimmed);
-            return { strVal, parsedVal: parsed, type: 'json', byteSize };
+        // For small/medium JSON, parse eagerly; for huge payloads (>10KB), parse lazily on expand
+        if (trimmed.length < 10000) {
+            try {
+                const parsed = JSON.parse(trimmed);
+                return { strVal, parsedValue: parsed, type: 'json', byteSize };
+            }
+            catch { }
         }
-        catch { }
+        return { strVal, type: 'json', byteSize };
     }
     if (trimmed === 'true' || trimmed === 'false') {
-        return { strVal, parsedVal: trimmed === 'true', type: 'boolean', byteSize };
+        return { strVal, parsedValue: trimmed === 'true', type: 'boolean', byteSize };
     }
     if (!isNaN(Number(trimmed)) && trimmed !== '') {
-        return { strVal, parsedVal: Number(trimmed), type: 'number', byteSize };
+        return { strVal, parsedValue: Number(trimmed), type: 'number', byteSize };
     }
     return { strVal, type: 'string', byteSize };
 };
@@ -319,7 +323,7 @@ const fetchStorageEntries = async (driver, instanceId) => {
                     entries.push({
                         key: k,
                         value: analysis.strVal,
-                        parsedValue: analysis.parsedVal,
+                        parsedValue: analysis.parsedValue,
                         type: analysis.type,
                         byteSize: analysis.byteSize,
                     });
@@ -332,7 +336,7 @@ const fetchStorageEntries = async (driver, instanceId) => {
                     entries.push({
                         key: k,
                         value: analysis.strVal,
-                        parsedValue: analysis.parsedVal,
+                        parsedValue: analysis.parsedValue,
                         type: analysis.type,
                         byteSize: analysis.byteSize,
                     });
@@ -373,7 +377,7 @@ const fetchStorageEntries = async (driver, instanceId) => {
                 entries.push({
                     key: k,
                     value: analysis.strVal,
-                    parsedValue: analysis.parsedVal,
+                    parsedValue: analysis.parsedValue,
                     type: analysis.type,
                     byteSize: analysis.byteSize,
                 });