react-native-inapp-inspector 2.3.3 → 2.3.5

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

@@ -49,7 +49,6 @@ 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"));
@@ -182,7 +181,7 @@ const MainScreen = () => {
                         {activeTab === 'redux' && <ReduxDetail_1.default />}
                         {activeTab === 'crash' && selectedCrash != null && (<CrashDetail_1.default />)}
                       </react_native_1.Animated.View>)}
-                  </react_native_1.View>) : (<SkeletonPlaceholder_1.default />)}
+                  </react_native_1.View>) : (<MainScreenSkeleton />)}
 
                 {/* Settings Panel Layer - Rendered on top with smooth slide & spring transition */}
                 {settingsPage !== null && (<react_native_1.Animated.View style={[
@@ -216,4 +215,165 @@ const MainScreen = () => {
     </react_native_1.Modal>
     </>);
 };
+const MainScreenSkeleton = react_1.default.memo(function MainScreenSkeleton() {
+    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 ─── */}
+      {[0, 1, 2, 3].map(i => (<react_native_1.Animated.View key={`skeleton_card_${i}`} style={[skeletonStyles.cardSkeleton, { opacity: shimmerAnim }]}>
+          <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>
+          <react_native_1.View style={skeletonStyles.urlLineLong}/>
+          <react_native_1.View style={skeletonStyles.urlLineShort}/>
+          <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 = MainScreen;

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

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

package/dist/commonjs/components/SkeletonPlaceholder.js

@@ -10,14 +10,200 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
 }));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+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 });
-exports.default = void 0;
-__exportStar(require("./Inspector/SkeletonPlaceholder"), exports);
-var SkeletonPlaceholder_1 = require("./Inspector/SkeletonPlaceholder");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(SkeletonPlaceholder_1).default; } });
+exports.SkeletonPlaceholder = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const AppColors_1 = require("../styles/AppColors");
+exports.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 = exports.SkeletonPlaceholder;

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

@@ -1 +1 @@
-export declare const LIB_VERSION = "2.3.3";
+export declare const LIB_VERSION = "2.3.5";

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.3';
+exports.LIB_VERSION = '2.3.5';

package/dist/commonjs/index.d.ts

@@ -8,7 +8,6 @@ export { setupAnalyticsLogger, logAnalyticsEvent, subscribeAnalyticsEvents, clea
 export { setupGlobalCrashHandler, subscribeCrashEvents, emitCrashEvent, getCrashRecords, clearCrashRecords, simulateTestCrash, exportCrashReport, parseCrashStackTrace, recordCustomCrash, addCrashBreadcrumb, recordNavigationBreadcrumb, recordNetworkBreadcrumb, recordReduxBreadcrumb, recordUserActionBreadcrumb, computeCrashFingerprint, type CrashEventPayload, } from './customHooks/crashHandler';
 export { default as CrashTab } from './components/Inspector/CrashTab';
 export { default as ErrorBoundary } from './components/ErrorBoundary';
-export { default as SkeletonPlaceholder } from './components/Inspector/SkeletonPlaceholder';
 export { connectReduxStore, inspectorReduxMiddleware, getReduxState, subscribeReduxState, getActionHistory, clearActionHistory, getLastActionForReducer, } from './customHooks/reduxLogger';
 export { getEventCategory, registerGAPlugin, type GAPlugin, } from './helpers/gaAnalyticsRegistry';
 export { usePerformanceTracker, useComponentProfiler, useNavigationProfiler, trackComponentRender, trackNavigationTransition, trackHeavyTask, measureAsync, getHermesMemoryStats, registerComponentProfile, subscribeRenderProfiles, getRenderProfiles, logPerformanceEvent, clearPerformanceEvents, subscribePerformanceEvents, getPerformanceEvents, getInitialRenderProfiles, getInitialPerformanceEvents, generateFixSnippet, } from './customHooks/performanceTracker';

package/dist/commonjs/index.js

@@ -36,9 +36,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getHermesMemoryStats = exports.measureAsync = exports.trackHeavyTask = exports.trackNavigationTransition = exports.trackComponentRender = exports.useNavigationProfiler = exports.useComponentProfiler = exports.usePerformanceTracker = exports.registerGAPlugin = exports.getEventCategory = exports.getLastActionForReducer = exports.clearActionHistory = exports.getActionHistory = exports.subscribeReduxState = exports.getReduxState = exports.inspectorReduxMiddleware = exports.connectReduxStore = exports.SkeletonPlaceholder = exports.ErrorBoundary = exports.CrashTab = exports.computeCrashFingerprint = exports.recordUserActionBreadcrumb = exports.recordReduxBreadcrumb = exports.recordNetworkBreadcrumb = exports.recordNavigationBreadcrumb = exports.addCrashBreadcrumb = exports.recordCustomCrash = exports.parseCrashStackTrace = exports.exportCrashReport = exports.simulateTestCrash = exports.clearCrashRecords = exports.getCrashRecords = exports.emitCrashEvent = exports.subscribeCrashEvents = exports.setupGlobalCrashHandler = exports.getCollectionEnabled = exports.getDefaultEventParameters = exports.getCurrentUserId = exports.getCurrentUserProperties = exports.clearAnalyticsEvents = exports.subscribeAnalyticsEvents = exports.logAnalyticsEvent = exports.setupAnalyticsLogger = exports.subscribeConsoleLogs = exports.clearConsoleLogs = exports.setupConsoleLogger = exports.addAxiosInterceptors = exports.subscribeNetworkLogs = exports.clearNetworkLogs = exports.setupNetworkLogger = void 0;
-exports.connectAsyncStorage = exports.BrandCircleIcon = exports.BrandSquareIcon = exports.prunePerformanceEvents = exports.getMaxPerformanceEventsLimit = exports.setMaxPerformanceEventsLimit = exports.pruneCrashRecords = exports.getMaxCrashLogsLimit = exports.pruneAnalyticsLogs = exports.getMaxAnalyticsLogsLimit = exports.setMaxAnalyticsLogsLimit = exports.pruneReduxHistory = exports.getMaxReduxHistoryLimit = exports.setMaxReduxHistoryLimit = exports.pruneConsoleLogs = exports.getMaxConsoleLogsLimit = exports.setMaxConsoleLogsLimit = exports.pruneNetworkLogs = exports.getMaxNetworkLogsLimit = exports.setMaxNetworkLogsLimit = exports.subscribeMemoryWarning = exports.pruneAllLogs = exports.setupMemoryWarningHandler = exports.isNativeModuleAvailable = exports.setNativeStorageItem = exports.getNativeStorageItem = exports.getNativeFpsMetrics = exports.stopNativeFpsMonitoring = exports.startNativeFpsMonitoring = exports.subscribeNativeDeviceShake = exports.subscribeNativeFloatingButtonPress = exports.setNativeFloatingButtonBadge = exports.hideNativeFloatingButton = exports.showNativeFloatingButton = exports.subscribeNativeCrashes = exports.enableNativeCrashProtection = exports.getNativeDeviceMetrics = exports.InspectCatch = exports.InspectTrackTime = exports.InspectLog = exports.generateFixSnippet = exports.getInitialPerformanceEvents = exports.getInitialRenderProfiles = exports.getPerformanceEvents = exports.subscribePerformanceEvents = exports.clearPerformanceEvents = exports.logPerformanceEvent = exports.getRenderProfiles = exports.subscribeRenderProfiles = exports.registerComponentProfile = void 0;
-exports.I18nextProvider = exports.setTranslations = exports.addTranslations = exports.setLanguage = exports.useTranslation = exports.i18n = exports.t = exports.updateAppColorsTheme = exports.getThemeColors = exports.setAppColors = exports.AppColors = exports.setAppFonts = exports.AppFonts = exports.BreadcrumbType = exports.CrashFilterType = exports.CrashDetailSubTab = exports.CrashExportFormat = exports.CrashType = exports.PerformanceSubTab = exports.BundleSubTab = exports.DiffResultType = exports.StackFrameType = exports.GAEventCategory = exports.AnalyticsEventSource = exports.ConsoleLogType = exports.LogFilter = exports.SettingsSubTab = exports.SettingsPage = exports.ModalAnimationType = exports.LocalFilter = exports.SortOrder = exports.StatusFilter = exports.Method = exports.ActiveTab = exports.subscribeToStorageChanges = exports.clearStorageDriver = exports.removeStorageEntry = exports.setStorageEntry = exports.fetchStorageEntries = exports.getRegisteredMMKVInstanceIds = exports.isMMKVConnected = exports.isAsyncStorageConnected = exports.connectMMKV = void 0;
+exports.registerComponentProfile = exports.getHermesMemoryStats = exports.measureAsync = exports.trackHeavyTask = exports.trackNavigationTransition = exports.trackComponentRender = exports.useNavigationProfiler = exports.useComponentProfiler = exports.usePerformanceTracker = exports.registerGAPlugin = exports.getEventCategory = exports.getLastActionForReducer = exports.clearActionHistory = exports.getActionHistory = exports.subscribeReduxState = exports.getReduxState = exports.inspectorReduxMiddleware = exports.connectReduxStore = exports.ErrorBoundary = exports.CrashTab = exports.computeCrashFingerprint = exports.recordUserActionBreadcrumb = exports.recordReduxBreadcrumb = exports.recordNetworkBreadcrumb = exports.recordNavigationBreadcrumb = exports.addCrashBreadcrumb = exports.recordCustomCrash = exports.parseCrashStackTrace = exports.exportCrashReport = exports.simulateTestCrash = exports.clearCrashRecords = exports.getCrashRecords = exports.emitCrashEvent = exports.subscribeCrashEvents = exports.setupGlobalCrashHandler = exports.getCollectionEnabled = exports.getDefaultEventParameters = exports.getCurrentUserId = exports.getCurrentUserProperties = exports.clearAnalyticsEvents = exports.subscribeAnalyticsEvents = exports.logAnalyticsEvent = exports.setupAnalyticsLogger = exports.subscribeConsoleLogs = exports.clearConsoleLogs = exports.setupConsoleLogger = exports.addAxiosInterceptors = exports.subscribeNetworkLogs = exports.clearNetworkLogs = exports.setupNetworkLogger = void 0;
+exports.connectMMKV = exports.connectAsyncStorage = exports.BrandCircleIcon = exports.BrandSquareIcon = exports.prunePerformanceEvents = exports.getMaxPerformanceEventsLimit = exports.setMaxPerformanceEventsLimit = exports.pruneCrashRecords = exports.getMaxCrashLogsLimit = exports.pruneAnalyticsLogs = exports.getMaxAnalyticsLogsLimit = exports.setMaxAnalyticsLogsLimit = exports.pruneReduxHistory = exports.getMaxReduxHistoryLimit = exports.setMaxReduxHistoryLimit = exports.pruneConsoleLogs = exports.getMaxConsoleLogsLimit = exports.setMaxConsoleLogsLimit = exports.pruneNetworkLogs = exports.getMaxNetworkLogsLimit = exports.setMaxNetworkLogsLimit = exports.subscribeMemoryWarning = exports.pruneAllLogs = exports.setupMemoryWarningHandler = exports.isNativeModuleAvailable = exports.setNativeStorageItem = exports.getNativeStorageItem = exports.getNativeFpsMetrics = exports.stopNativeFpsMonitoring = exports.startNativeFpsMonitoring = exports.subscribeNativeDeviceShake = exports.subscribeNativeFloatingButtonPress = exports.setNativeFloatingButtonBadge = exports.hideNativeFloatingButton = exports.showNativeFloatingButton = exports.subscribeNativeCrashes = exports.enableNativeCrashProtection = exports.getNativeDeviceMetrics = exports.InspectCatch = exports.InspectTrackTime = exports.InspectLog = exports.generateFixSnippet = exports.getInitialPerformanceEvents = exports.getInitialRenderProfiles = exports.getPerformanceEvents = exports.subscribePerformanceEvents = exports.clearPerformanceEvents = exports.logPerformanceEvent = exports.getRenderProfiles = exports.subscribeRenderProfiles = void 0;
+exports.I18nextProvider = exports.setTranslations = exports.addTranslations = exports.setLanguage = exports.useTranslation = exports.i18n = exports.t = exports.updateAppColorsTheme = exports.getThemeColors = exports.setAppColors = exports.AppColors = exports.setAppFonts = exports.AppFonts = exports.BreadcrumbType = exports.CrashFilterType = exports.CrashDetailSubTab = exports.CrashExportFormat = exports.CrashType = exports.PerformanceSubTab = exports.BundleSubTab = exports.DiffResultType = exports.StackFrameType = exports.GAEventCategory = exports.AnalyticsEventSource = exports.ConsoleLogType = exports.LogFilter = exports.SettingsSubTab = exports.SettingsPage = exports.ModalAnimationType = exports.LocalFilter = exports.SortOrder = exports.StatusFilter = exports.Method = exports.ActiveTab = exports.subscribeToStorageChanges = exports.clearStorageDriver = exports.removeStorageEntry = exports.setStorageEntry = exports.fetchStorageEntries = exports.getRegisteredMMKVInstanceIds = exports.isMMKVConnected = exports.isAsyncStorageConnected = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const native_1 = require("@react-navigation/native");
@@ -1939,8 +1939,6 @@ var CrashTab_1 = require("./components/Inspector/CrashTab");
 Object.defineProperty(exports, "CrashTab", { enumerable: true, get: function () { return __importDefault(CrashTab_1).default; } });
 var ErrorBoundary_2 = require("./components/ErrorBoundary");
 Object.defineProperty(exports, "ErrorBoundary", { enumerable: true, get: function () { return __importDefault(ErrorBoundary_2).default; } });
-var SkeletonPlaceholder_1 = require("./components/Inspector/SkeletonPlaceholder");
-Object.defineProperty(exports, "SkeletonPlaceholder", { enumerable: true, get: function () { return __importDefault(SkeletonPlaceholder_1).default; } });
 var reduxLogger_2 = require("./customHooks/reduxLogger");
 Object.defineProperty(exports, "connectReduxStore", { enumerable: true, get: function () { return reduxLogger_2.connectReduxStore; } });
 Object.defineProperty(exports, "inspectorReduxMiddleware", { enumerable: true, get: function () { return reduxLogger_2.inspectorReduxMiddleware; } });

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

@@ -11,7 +11,6 @@ import LogDetail from './LogDetail';
 import ConsoleTab from './ConsoleTab';
 import AnalyticsTab from './AnalyticsTab';
 import AnalyticsDetail from '../AnalyticsDetail';
-import SkeletonPlaceholder from './SkeletonPlaceholder';
 import ReduxTab from './ReduxTab';
 import ReduxDetail from './ReduxDetail';
 import BundleTab from './BundleTab';
@@ -144,7 +143,7 @@ const MainScreen = () => {
                         {activeTab === 'redux' && <ReduxDetail />}
                         {activeTab === 'crash' && selectedCrash != null && (<CrashDetail />)}
                       </Animated.View>)}
-                  </View>) : (<SkeletonPlaceholder />)}
+                  </View>) : (<MainScreenSkeleton />)}
 
                 {/* Settings Panel Layer - Rendered on top with smooth slide & spring transition */}
                 {settingsPage !== null && (<Animated.View style={[
@@ -178,4 +177,165 @@ const MainScreen = () => {
     </Modal>
     </>);
 };
+const MainScreenSkeleton = React.memo(function MainScreenSkeleton() {
+    const shimmerAnim = useRef(new Animated.Value(0.35)).current;
+    useEffect(() => {
+        const animation = Animated.loop(Animated.sequence([
+            Animated.timing(shimmerAnim, {
+                toValue: 0.85,
+                duration: 750,
+                useNativeDriver: true,
+            }),
+            Animated.timing(shimmerAnim, {
+                toValue: 0.35,
+                duration: 750,
+                useNativeDriver: true,
+            }),
+        ]));
+        animation.start();
+        return () => animation.stop();
+    }, [shimmerAnim]);
+    return (<View style={skeletonStyles.container}>
+      {/* ─── Search & Scope Toolbar Skeleton ─── */}
+      <View style={skeletonStyles.toolbarSkeleton}>
+        <Animated.View style={[skeletonStyles.searchBarSkeleton, { opacity: shimmerAnim }]}/>
+        <View style={skeletonStyles.actionButtonsRow}>
+          <Animated.View style={[skeletonStyles.iconButtonSkeleton, { opacity: shimmerAnim }]}/>
+          <Animated.View style={[skeletonStyles.iconButtonSkeleton, { opacity: shimmerAnim }]}/>
+        </View>
+      </View>
+
+      {/* ─── Quick Filter Chips Skeleton Strip ─── */}
+      <View style={skeletonStyles.chipStripSkeleton}>
+        <Animated.View style={[skeletonStyles.chipSkeleton, { width: 48, opacity: shimmerAnim }]}/>
+        <Animated.View style={[skeletonStyles.chipSkeleton, { width: 68, opacity: shimmerAnim }]}/>
+        <Animated.View style={[skeletonStyles.chipSkeleton, { width: 76, opacity: shimmerAnim }]}/>
+        <Animated.View style={[skeletonStyles.chipSkeleton, { width: 58, opacity: shimmerAnim }]}/>
+      </View>
+
+      {/* ─── List Cards Skeleton ─── */}
+      {[0, 1, 2, 3].map(i => (<Animated.View key={`skeleton_card_${i}`} style={[skeletonStyles.cardSkeleton, { opacity: shimmerAnim }]}>
+          <View style={skeletonStyles.cardTopRow}>
+            <View style={skeletonStyles.badgeGroup}>
+              <View style={skeletonStyles.statusBadgeSkeleton}/>
+              <View style={skeletonStyles.methodBadgeSkeleton}/>
+            </View>
+            <View style={skeletonStyles.timeSkeleton}/>
+          </View>
+          <View style={skeletonStyles.urlLineLong}/>
+          <View style={skeletonStyles.urlLineShort}/>
+          <View style={skeletonStyles.cardBottomRow}>
+            <View style={skeletonStyles.metaPillSkeleton}/>
+            <View style={skeletonStyles.metaPillSkeleton}/>
+          </View>
+        </Animated.View>))}
+    </View>);
+});
+const skeletonStyles = 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.graySurface,
+        borderWidth: 1,
+        borderColor: AppColors.dividerColor,
+    },
+    actionButtonsRow: {
+        flexDirection: 'row',
+        gap: 6,
+    },
+    iconButtonSkeleton: {
+        width: 36,
+        height: 36,
+        borderRadius: 8,
+        backgroundColor: AppColors.graySurface,
+        borderWidth: 1,
+        borderColor: AppColors.dividerColor,
+    },
+    chipStripSkeleton: {
+        flexDirection: 'row',
+        gap: 6,
+        marginBottom: 10,
+    },
+    chipSkeleton: {
+        height: 24,
+        borderRadius: 6,
+        backgroundColor: AppColors.graySurface,
+        borderWidth: 1,
+        borderColor: AppColors.dividerColor,
+    },
+    cardSkeleton: {
+        backgroundColor: AppColors.primaryLight,
+        borderRadius: 10,
+        padding: 12,
+        marginBottom: 8,
+        borderWidth: 1,
+        borderColor: 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.graySurface,
+    },
+    methodBadgeSkeleton: {
+        width: 44,
+        height: 18,
+        borderRadius: 4,
+        backgroundColor: AppColors.graySurface,
+    },
+    timeSkeleton: {
+        width: 48,
+        height: 12,
+        borderRadius: 4,
+        backgroundColor: AppColors.graySurface,
+    },
+    urlLineLong: {
+        height: 13,
+        borderRadius: 4,
+        backgroundColor: AppColors.graySurface,
+        marginBottom: 5,
+        width: '90%',
+    },
+    urlLineShort: {
+        height: 11,
+        borderRadius: 4,
+        backgroundColor: AppColors.graySurface,
+        marginBottom: 8,
+        width: '55%',
+    },
+    cardBottomRow: {
+        flexDirection: 'row',
+        gap: 8,
+        marginTop: 2,
+    },
+    metaPillSkeleton: {
+        width: 52,
+        height: 14,
+        borderRadius: 4,
+        backgroundColor: AppColors.graySurface,
+    },
+});
 export default MainScreen;

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

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

package/dist/esm/components/SkeletonPlaceholder.js

@@ -1,2 +1,173 @@
-export * from './Inspector/SkeletonPlaceholder';
-export { default } from './Inspector/SkeletonPlaceholder';
+import React, { useEffect, useRef } from 'react';
+import { Animated, StyleSheet, View } from 'react-native';
+import { AppColors } from '../styles/AppColors';
+export const SkeletonPlaceholder = React.memo(function SkeletonPlaceholder({ cardCount = 4, }) {
+    const shimmerAnim = useRef(new Animated.Value(0.35)).current;
+    useEffect(() => {
+        const animation = Animated.loop(Animated.sequence([
+            Animated.timing(shimmerAnim, {
+                toValue: 0.85,
+                duration: 750,
+                useNativeDriver: true,
+            }),
+            Animated.timing(shimmerAnim, {
+                toValue: 0.35,
+                duration: 750,
+                useNativeDriver: true,
+            }),
+        ]));
+        animation.start();
+        return () => animation.stop();
+    }, [shimmerAnim]);
+    return (<View style={skeletonStyles.container}>
+      {/* ─── Search & Scope Toolbar Skeleton ─── */}
+      <View style={skeletonStyles.toolbarSkeleton}>
+        <Animated.View style={[
+            skeletonStyles.searchBarSkeleton,
+            { opacity: shimmerAnim },
+        ]}/>
+        <View style={skeletonStyles.actionButtonsRow}>
+          <Animated.View style={[skeletonStyles.iconButtonSkeleton, { opacity: shimmerAnim }]}/>
+          <Animated.View style={[skeletonStyles.iconButtonSkeleton, { opacity: shimmerAnim }]}/>
+        </View>
+      </View>
+
+      {/* ─── Quick Filter Chips Skeleton Strip ─── */}
+      <View style={skeletonStyles.chipStripSkeleton}>
+        <Animated.View style={[skeletonStyles.chipSkeleton, { width: 48, opacity: shimmerAnim }]}/>
+        <Animated.View style={[skeletonStyles.chipSkeleton, { width: 68, opacity: shimmerAnim }]}/>
+        <Animated.View style={[skeletonStyles.chipSkeleton, { width: 76, opacity: shimmerAnim }]}/>
+        <Animated.View style={[skeletonStyles.chipSkeleton, { width: 58, opacity: shimmerAnim }]}/>
+      </View>
+
+      {/* ─── List Cards Skeleton ─── */}
+      {Array.from({ length: cardCount }).map((_, i) => (<Animated.View key={`skeleton_card_${i}`} style={[skeletonStyles.cardSkeleton, { opacity: shimmerAnim }]}>
+          {/* Top row: Status pill + Method + Time */}
+          <View style={skeletonStyles.cardTopRow}>
+            <View style={skeletonStyles.badgeGroup}>
+              <View style={skeletonStyles.statusBadgeSkeleton}/>
+              <View style={skeletonStyles.methodBadgeSkeleton}/>
+            </View>
+            <View style={skeletonStyles.timeSkeleton}/>
+          </View>
+
+          {/* Middle row: URL lines */}
+          <View style={skeletonStyles.urlLineLong}/>
+          <View style={skeletonStyles.urlLineShort}/>
+
+          {/* Bottom row: Latency & Size */}
+          <View style={skeletonStyles.cardBottomRow}>
+            <View style={skeletonStyles.metaPillSkeleton}/>
+            <View style={skeletonStyles.metaPillSkeleton}/>
+          </View>
+        </Animated.View>))}
+    </View>);
+});
+const skeletonStyles = 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.graySurface,
+        borderWidth: 1,
+        borderColor: AppColors.dividerColor,
+    },
+    actionButtonsRow: {
+        flexDirection: 'row',
+        gap: 6,
+    },
+    iconButtonSkeleton: {
+        width: 36,
+        height: 36,
+        borderRadius: 8,
+        backgroundColor: AppColors.graySurface,
+        borderWidth: 1,
+        borderColor: AppColors.dividerColor,
+    },
+    chipStripSkeleton: {
+        flexDirection: 'row',
+        gap: 6,
+        marginBottom: 10,
+    },
+    chipSkeleton: {
+        height: 24,
+        borderRadius: 6,
+        backgroundColor: AppColors.graySurface,
+        borderWidth: 1,
+        borderColor: AppColors.dividerColor,
+    },
+    cardSkeleton: {
+        backgroundColor: AppColors.primaryLight,
+        borderRadius: 10,
+        padding: 12,
+        marginBottom: 8,
+        borderWidth: 1,
+        borderColor: 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.graySurface,
+    },
+    methodBadgeSkeleton: {
+        width: 44,
+        height: 18,
+        borderRadius: 4,
+        backgroundColor: AppColors.graySurface,
+    },
+    timeSkeleton: {
+        width: 48,
+        height: 12,
+        borderRadius: 4,
+        backgroundColor: AppColors.graySurface,
+    },
+    urlLineLong: {
+        height: 13,
+        borderRadius: 4,
+        backgroundColor: AppColors.graySurface,
+        marginBottom: 5,
+        width: '90%',
+    },
+    urlLineShort: {
+        height: 11,
+        borderRadius: 4,
+        backgroundColor: AppColors.graySurface,
+        marginBottom: 8,
+        width: '55%',
+    },
+    cardBottomRow: {
+        flexDirection: 'row',
+        gap: 8,
+        marginTop: 2,
+    },
+    metaPillSkeleton: {
+        width: 52,
+        height: 14,
+        borderRadius: 4,
+        backgroundColor: AppColors.graySurface,
+    },
+});
+export default SkeletonPlaceholder;

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

@@ -1 +1 @@
-export declare const LIB_VERSION = "2.3.3";
+export declare const LIB_VERSION = "2.3.5";

package/dist/esm/constants/version.js

@@ -1,3 +1,3 @@
 // AUTO-GENERATED FILE — do not edit by hand.
 // Regenerated from package.json on every build by scripts/gen-version.js.
-export const LIB_VERSION = '2.3.3';
+export const LIB_VERSION = '2.3.5';

package/dist/esm/index.d.ts

@@ -8,7 +8,6 @@ export { setupAnalyticsLogger, logAnalyticsEvent, subscribeAnalyticsEvents, clea
 export { setupGlobalCrashHandler, subscribeCrashEvents, emitCrashEvent, getCrashRecords, clearCrashRecords, simulateTestCrash, exportCrashReport, parseCrashStackTrace, recordCustomCrash, addCrashBreadcrumb, recordNavigationBreadcrumb, recordNetworkBreadcrumb, recordReduxBreadcrumb, recordUserActionBreadcrumb, computeCrashFingerprint, type CrashEventPayload, } from './customHooks/crashHandler';
 export { default as CrashTab } from './components/Inspector/CrashTab';
 export { default as ErrorBoundary } from './components/ErrorBoundary';
-export { default as SkeletonPlaceholder } from './components/Inspector/SkeletonPlaceholder';
 export { connectReduxStore, inspectorReduxMiddleware, getReduxState, subscribeReduxState, getActionHistory, clearActionHistory, getLastActionForReducer, } from './customHooks/reduxLogger';
 export { getEventCategory, registerGAPlugin, type GAPlugin, } from './helpers/gaAnalyticsRegistry';
 export { usePerformanceTracker, useComponentProfiler, useNavigationProfiler, trackComponentRender, trackNavigationTransition, trackHeavyTask, measureAsync, getHermesMemoryStats, registerComponentProfile, subscribeRenderProfiles, getRenderProfiles, logPerformanceEvent, clearPerformanceEvents, subscribePerformanceEvents, getPerformanceEvents, getInitialRenderProfiles, getInitialPerformanceEvents, generateFixSnippet, } from './customHooks/performanceTracker';

package/dist/esm/index.js

@@ -1866,7 +1866,6 @@ export { setupAnalyticsLogger, logAnalyticsEvent, subscribeAnalyticsEvents, clea
 export { setupGlobalCrashHandler, subscribeCrashEvents, emitCrashEvent, getCrashRecords, clearCrashRecords, simulateTestCrash, exportCrashReport, parseCrashStackTrace, recordCustomCrash, addCrashBreadcrumb, recordNavigationBreadcrumb, recordNetworkBreadcrumb, recordReduxBreadcrumb, recordUserActionBreadcrumb, computeCrashFingerprint, } from './customHooks/crashHandler';
 export { default as CrashTab } from './components/Inspector/CrashTab';
 export { default as ErrorBoundary } from './components/ErrorBoundary';
-export { default as SkeletonPlaceholder } from './components/Inspector/SkeletonPlaceholder';
 export { connectReduxStore, inspectorReduxMiddleware, getReduxState, subscribeReduxState, getActionHistory, clearActionHistory, getLastActionForReducer, } from './customHooks/reduxLogger';
 export { getEventCategory, registerGAPlugin, } from './helpers/gaAnalyticsRegistry';
 export { usePerformanceTracker, useComponentProfiler, useNavigationProfiler, trackComponentRender, trackNavigationTransition, trackHeavyTask, measureAsync, getHermesMemoryStats, registerComponentProfile, subscribeRenderProfiles, getRenderProfiles, logPerformanceEvent, clearPerformanceEvents, subscribePerformanceEvents, getPerformanceEvents, getInitialRenderProfiles, getInitialPerformanceEvents, generateFixSnippet, } from './customHooks/performanceTracker';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-inapp-inspector",
-  "version": "2.3.3",
+  "version": "2.3.5",
   "description": "The zero-config, all-in-one in-app debugger for React Native & Expo. Inspect Network (fetch/axios), Console logs, Stack Traces, Redux State, Firebase Analytics, and JS Bundle size directly on device.",
   "repository": {
     "type": "git",

package/src/components/Inspector/MainScreen.tsx

@@ -21,7 +21,6 @@ import LogDetail from './LogDetail';
 import ConsoleTab from './ConsoleTab';
 import AnalyticsTab from './AnalyticsTab';
 import AnalyticsDetail from '../AnalyticsDetail';
-import SkeletonPlaceholder from './SkeletonPlaceholder';
 import ReduxTab from './ReduxTab';
 import ReduxDetail from './ReduxDetail';
 import BundleTab from './BundleTab';
@@ -208,7 +207,7 @@ const MainScreen = () => {
                     )}
                   </View>
                 ) : (
-                  <SkeletonPlaceholder />
+                  <MainScreenSkeleton />
                 )}
 
                 {/* Settings Panel Layer - Rendered on top with smooth slide & spring transition */}
@@ -251,4 +250,191 @@ const MainScreen = () => {
   );
 };
 
+const MainScreenSkeleton = React.memo(function MainScreenSkeleton() {
+  const shimmerAnim = useRef(new Animated.Value(0.35)).current;
+
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(shimmerAnim, {
+          toValue: 0.85,
+          duration: 750,
+          useNativeDriver: true,
+        }),
+        Animated.timing(shimmerAnim, {
+          toValue: 0.35,
+          duration: 750,
+          useNativeDriver: true,
+        }),
+      ]),
+    );
+    animation.start();
+    return () => animation.stop();
+  }, [shimmerAnim]);
+
+  return (
+    <View style={skeletonStyles.container}>
+      {/* ─── Search & Scope Toolbar Skeleton ─── */}
+      <View style={skeletonStyles.toolbarSkeleton}>
+        <Animated.View
+          style={[skeletonStyles.searchBarSkeleton, {opacity: shimmerAnim}]}
+        />
+        <View style={skeletonStyles.actionButtonsRow}>
+          <Animated.View
+            style={[skeletonStyles.iconButtonSkeleton, {opacity: shimmerAnim}]}
+          />
+          <Animated.View
+            style={[skeletonStyles.iconButtonSkeleton, {opacity: shimmerAnim}]}
+          />
+        </View>
+      </View>
+
+      {/* ─── Quick Filter Chips Skeleton Strip ─── */}
+      <View style={skeletonStyles.chipStripSkeleton}>
+        <Animated.View
+          style={[skeletonStyles.chipSkeleton, {width: 48, opacity: shimmerAnim}]}
+        />
+        <Animated.View
+          style={[skeletonStyles.chipSkeleton, {width: 68, opacity: shimmerAnim}]}
+        />
+        <Animated.View
+          style={[skeletonStyles.chipSkeleton, {width: 76, opacity: shimmerAnim}]}
+        />
+        <Animated.View
+          style={[skeletonStyles.chipSkeleton, {width: 58, opacity: shimmerAnim}]}
+        />
+      </View>
+
+      {/* ─── List Cards Skeleton ─── */}
+      {[0, 1, 2, 3].map(i => (
+        <Animated.View
+          key={`skeleton_card_${i}`}
+          style={[skeletonStyles.cardSkeleton, {opacity: shimmerAnim}]}>
+          <View style={skeletonStyles.cardTopRow}>
+            <View style={skeletonStyles.badgeGroup}>
+              <View style={skeletonStyles.statusBadgeSkeleton} />
+              <View style={skeletonStyles.methodBadgeSkeleton} />
+            </View>
+            <View style={skeletonStyles.timeSkeleton} />
+          </View>
+          <View style={skeletonStyles.urlLineLong} />
+          <View style={skeletonStyles.urlLineShort} />
+          <View style={skeletonStyles.cardBottomRow}>
+            <View style={skeletonStyles.metaPillSkeleton} />
+            <View style={skeletonStyles.metaPillSkeleton} />
+          </View>
+        </Animated.View>
+      ))}
+    </View>
+  );
+});
+
+const skeletonStyles = 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.graySurface,
+    borderWidth: 1,
+    borderColor: AppColors.dividerColor,
+  },
+  actionButtonsRow: {
+    flexDirection: 'row',
+    gap: 6,
+  },
+  iconButtonSkeleton: {
+    width: 36,
+    height: 36,
+    borderRadius: 8,
+    backgroundColor: AppColors.graySurface,
+    borderWidth: 1,
+    borderColor: AppColors.dividerColor,
+  },
+  chipStripSkeleton: {
+    flexDirection: 'row',
+    gap: 6,
+    marginBottom: 10,
+  },
+  chipSkeleton: {
+    height: 24,
+    borderRadius: 6,
+    backgroundColor: AppColors.graySurface,
+    borderWidth: 1,
+    borderColor: AppColors.dividerColor,
+  },
+  cardSkeleton: {
+    backgroundColor: AppColors.primaryLight,
+    borderRadius: 10,
+    padding: 12,
+    marginBottom: 8,
+    borderWidth: 1,
+    borderColor: 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.graySurface,
+  },
+  methodBadgeSkeleton: {
+    width: 44,
+    height: 18,
+    borderRadius: 4,
+    backgroundColor: AppColors.graySurface,
+  },
+  timeSkeleton: {
+    width: 48,
+    height: 12,
+    borderRadius: 4,
+    backgroundColor: AppColors.graySurface,
+  },
+  urlLineLong: {
+    height: 13,
+    borderRadius: 4,
+    backgroundColor: AppColors.graySurface,
+    marginBottom: 5,
+    width: '90%',
+  },
+  urlLineShort: {
+    height: 11,
+    borderRadius: 4,
+    backgroundColor: AppColors.graySurface,
+    marginBottom: 8,
+    width: '55%',
+  },
+  cardBottomRow: {
+    flexDirection: 'row',
+    gap: 8,
+    marginTop: 2,
+  },
+  metaPillSkeleton: {
+    width: 52,
+    height: 14,
+    borderRadius: 4,
+    backgroundColor: AppColors.graySurface,
+  },
+});
+
 export default MainScreen;

package/src/components/SkeletonPlaceholder.tsx

@@ -1,2 +1,206 @@
-export * from './Inspector/SkeletonPlaceholder';
-export {default} from './Inspector/SkeletonPlaceholder';
+import React, {useEffect, useRef} from 'react';
+import {Animated, StyleSheet, View} from 'react-native';
+import {AppColors} from '../styles/AppColors';
+
+export interface SkeletonPlaceholderProps {
+  cardCount?: number;
+}
+
+export const SkeletonPlaceholder = React.memo(function SkeletonPlaceholder({
+  cardCount = 4,
+}: SkeletonPlaceholderProps) {
+  const shimmerAnim = useRef(new Animated.Value(0.35)).current;
+
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(shimmerAnim, {
+          toValue: 0.85,
+          duration: 750,
+          useNativeDriver: true,
+        }),
+        Animated.timing(shimmerAnim, {
+          toValue: 0.35,
+          duration: 750,
+          useNativeDriver: true,
+        }),
+      ]),
+    );
+    animation.start();
+    return () => animation.stop();
+  }, [shimmerAnim]);
+
+  return (
+    <View style={skeletonStyles.container}>
+      {/* ─── Search & Scope Toolbar Skeleton ─── */}
+      <View style={skeletonStyles.toolbarSkeleton}>
+        <Animated.View
+          style={[
+            skeletonStyles.searchBarSkeleton,
+            {opacity: shimmerAnim},
+          ]}
+        />
+        <View style={skeletonStyles.actionButtonsRow}>
+          <Animated.View
+            style={[skeletonStyles.iconButtonSkeleton, {opacity: shimmerAnim}]}
+          />
+          <Animated.View
+            style={[skeletonStyles.iconButtonSkeleton, {opacity: shimmerAnim}]}
+          />
+        </View>
+      </View>
+
+      {/* ─── Quick Filter Chips Skeleton Strip ─── */}
+      <View style={skeletonStyles.chipStripSkeleton}>
+        <Animated.View
+          style={[skeletonStyles.chipSkeleton, {width: 48, opacity: shimmerAnim}]}
+        />
+        <Animated.View
+          style={[skeletonStyles.chipSkeleton, {width: 68, opacity: shimmerAnim}]}
+        />
+        <Animated.View
+          style={[skeletonStyles.chipSkeleton, {width: 76, opacity: shimmerAnim}]}
+        />
+        <Animated.View
+          style={[skeletonStyles.chipSkeleton, {width: 58, opacity: shimmerAnim}]}
+        />
+      </View>
+
+      {/* ─── List Cards Skeleton ─── */}
+      {Array.from({length: cardCount}).map((_, i) => (
+        <Animated.View
+          key={`skeleton_card_${i}`}
+          style={[skeletonStyles.cardSkeleton, {opacity: shimmerAnim}]}>
+          {/* Top row: Status pill + Method + Time */}
+          <View style={skeletonStyles.cardTopRow}>
+            <View style={skeletonStyles.badgeGroup}>
+              <View style={skeletonStyles.statusBadgeSkeleton} />
+              <View style={skeletonStyles.methodBadgeSkeleton} />
+            </View>
+            <View style={skeletonStyles.timeSkeleton} />
+          </View>
+
+          {/* Middle row: URL lines */}
+          <View style={skeletonStyles.urlLineLong} />
+          <View style={skeletonStyles.urlLineShort} />
+
+          {/* Bottom row: Latency & Size */}
+          <View style={skeletonStyles.cardBottomRow}>
+            <View style={skeletonStyles.metaPillSkeleton} />
+            <View style={skeletonStyles.metaPillSkeleton} />
+          </View>
+        </Animated.View>
+      ))}
+    </View>
+  );
+});
+
+const skeletonStyles = 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.graySurface,
+    borderWidth: 1,
+    borderColor: AppColors.dividerColor,
+  },
+  actionButtonsRow: {
+    flexDirection: 'row',
+    gap: 6,
+  },
+  iconButtonSkeleton: {
+    width: 36,
+    height: 36,
+    borderRadius: 8,
+    backgroundColor: AppColors.graySurface,
+    borderWidth: 1,
+    borderColor: AppColors.dividerColor,
+  },
+  chipStripSkeleton: {
+    flexDirection: 'row',
+    gap: 6,
+    marginBottom: 10,
+  },
+  chipSkeleton: {
+    height: 24,
+    borderRadius: 6,
+    backgroundColor: AppColors.graySurface,
+    borderWidth: 1,
+    borderColor: AppColors.dividerColor,
+  },
+  cardSkeleton: {
+    backgroundColor: AppColors.primaryLight,
+    borderRadius: 10,
+    padding: 12,
+    marginBottom: 8,
+    borderWidth: 1,
+    borderColor: 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.graySurface,
+  },
+  methodBadgeSkeleton: {
+    width: 44,
+    height: 18,
+    borderRadius: 4,
+    backgroundColor: AppColors.graySurface,
+  },
+  timeSkeleton: {
+    width: 48,
+    height: 12,
+    borderRadius: 4,
+    backgroundColor: AppColors.graySurface,
+  },
+  urlLineLong: {
+    height: 13,
+    borderRadius: 4,
+    backgroundColor: AppColors.graySurface,
+    marginBottom: 5,
+    width: '90%',
+  },
+  urlLineShort: {
+    height: 11,
+    borderRadius: 4,
+    backgroundColor: AppColors.graySurface,
+    marginBottom: 8,
+    width: '55%',
+  },
+  cardBottomRow: {
+    flexDirection: 'row',
+    gap: 8,
+    marginTop: 2,
+  },
+  metaPillSkeleton: {
+    width: 52,
+    height: 14,
+    borderRadius: 4,
+    backgroundColor: AppColors.graySurface,
+  },
+});
+
+export default SkeletonPlaceholder;

package/src/constants/version.ts

@@ -1,3 +1,3 @@
 // AUTO-GENERATED FILE — do not edit by hand.
 // Regenerated from package.json on every build by scripts/gen-version.js.
-export const LIB_VERSION = '2.3.3';
+export const LIB_VERSION = '2.3.5';

package/src/index.tsx

@@ -2245,7 +2245,6 @@ export {
 
 export {default as CrashTab} from './components/Inspector/CrashTab';
 export {default as ErrorBoundary} from './components/ErrorBoundary';
-export {default as SkeletonPlaceholder} from './components/Inspector/SkeletonPlaceholder';
 
 export {
   connectReduxStore,