react-native-inapp-inspector 2.3.4 → 2.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -49,7 +49,6 @@ const LogDetail_1 = __importDefault(require("./LogDetail"));
49
49
  const ConsoleTab_1 = __importDefault(require("./ConsoleTab"));
50
50
  const AnalyticsTab_1 = __importDefault(require("./AnalyticsTab"));
51
51
  const AnalyticsDetail_1 = __importDefault(require("../AnalyticsDetail"));
52
- const SkeletonPlaceholder_1 = __importDefault(require("./SkeletonPlaceholder"));
53
52
  const ReduxTab_1 = __importDefault(require("./ReduxTab"));
54
53
  const ReduxDetail_1 = __importDefault(require("./ReduxDetail"));
55
54
  const BundleTab_1 = __importDefault(require("./BundleTab"));
@@ -182,7 +181,7 @@ const MainScreen = () => {
182
181
  {activeTab === 'redux' && <ReduxDetail_1.default />}
183
182
  {activeTab === 'crash' && selectedCrash != null && (<CrashDetail_1.default />)}
184
183
  </react_native_1.Animated.View>)}
185
- </react_native_1.View>) : (<SkeletonPlaceholder_1.default />)}
184
+ </react_native_1.View>) : (<MainScreenSkeleton />)}
186
185
 
187
186
  {/* Settings Panel Layer - Rendered on top with smooth slide & spring transition */}
188
187
  {settingsPage !== null && (<react_native_1.Animated.View style={[
@@ -216,4 +215,165 @@ const MainScreen = () => {
216
215
  </react_native_1.Modal>
217
216
  </>);
218
217
  };
218
+ const MainScreenSkeleton = react_1.default.memo(function MainScreenSkeleton() {
219
+ const shimmerAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0.35)).current;
220
+ (0, react_1.useEffect)(() => {
221
+ const animation = react_native_1.Animated.loop(react_native_1.Animated.sequence([
222
+ react_native_1.Animated.timing(shimmerAnim, {
223
+ toValue: 0.85,
224
+ duration: 750,
225
+ useNativeDriver: true,
226
+ }),
227
+ react_native_1.Animated.timing(shimmerAnim, {
228
+ toValue: 0.35,
229
+ duration: 750,
230
+ useNativeDriver: true,
231
+ }),
232
+ ]));
233
+ animation.start();
234
+ return () => animation.stop();
235
+ }, [shimmerAnim]);
236
+ return (<react_native_1.View style={skeletonStyles.container}>
237
+ {/* ─── Search & Scope Toolbar Skeleton ─── */}
238
+ <react_native_1.View style={skeletonStyles.toolbarSkeleton}>
239
+ <react_native_1.Animated.View style={[skeletonStyles.searchBarSkeleton, { opacity: shimmerAnim }]}/>
240
+ <react_native_1.View style={skeletonStyles.actionButtonsRow}>
241
+ <react_native_1.Animated.View style={[skeletonStyles.iconButtonSkeleton, { opacity: shimmerAnim }]}/>
242
+ <react_native_1.Animated.View style={[skeletonStyles.iconButtonSkeleton, { opacity: shimmerAnim }]}/>
243
+ </react_native_1.View>
244
+ </react_native_1.View>
245
+
246
+ {/* ─── Quick Filter Chips Skeleton Strip ─── */}
247
+ <react_native_1.View style={skeletonStyles.chipStripSkeleton}>
248
+ <react_native_1.Animated.View style={[skeletonStyles.chipSkeleton, { width: 48, opacity: shimmerAnim }]}/>
249
+ <react_native_1.Animated.View style={[skeletonStyles.chipSkeleton, { width: 68, opacity: shimmerAnim }]}/>
250
+ <react_native_1.Animated.View style={[skeletonStyles.chipSkeleton, { width: 76, opacity: shimmerAnim }]}/>
251
+ <react_native_1.Animated.View style={[skeletonStyles.chipSkeleton, { width: 58, opacity: shimmerAnim }]}/>
252
+ </react_native_1.View>
253
+
254
+ {/* ─── List Cards Skeleton ─── */}
255
+ {[0, 1, 2, 3].map(i => (<react_native_1.Animated.View key={`skeleton_card_${i}`} style={[skeletonStyles.cardSkeleton, { opacity: shimmerAnim }]}>
256
+ <react_native_1.View style={skeletonStyles.cardTopRow}>
257
+ <react_native_1.View style={skeletonStyles.badgeGroup}>
258
+ <react_native_1.View style={skeletonStyles.statusBadgeSkeleton}/>
259
+ <react_native_1.View style={skeletonStyles.methodBadgeSkeleton}/>
260
+ </react_native_1.View>
261
+ <react_native_1.View style={skeletonStyles.timeSkeleton}/>
262
+ </react_native_1.View>
263
+ <react_native_1.View style={skeletonStyles.urlLineLong}/>
264
+ <react_native_1.View style={skeletonStyles.urlLineShort}/>
265
+ <react_native_1.View style={skeletonStyles.cardBottomRow}>
266
+ <react_native_1.View style={skeletonStyles.metaPillSkeleton}/>
267
+ <react_native_1.View style={skeletonStyles.metaPillSkeleton}/>
268
+ </react_native_1.View>
269
+ </react_native_1.Animated.View>))}
270
+ </react_native_1.View>);
271
+ });
272
+ const skeletonStyles = react_native_1.StyleSheet.create({
273
+ container: {
274
+ flex: 1,
275
+ paddingHorizontal: 12,
276
+ paddingTop: 8,
277
+ },
278
+ toolbarSkeleton: {
279
+ flexDirection: 'row',
280
+ alignItems: 'center',
281
+ gap: 8,
282
+ marginBottom: 8,
283
+ },
284
+ searchBarSkeleton: {
285
+ flex: 1,
286
+ height: 36,
287
+ borderRadius: 8,
288
+ backgroundColor: AppColors_1.AppColors.graySurface,
289
+ borderWidth: 1,
290
+ borderColor: AppColors_1.AppColors.dividerColor,
291
+ },
292
+ actionButtonsRow: {
293
+ flexDirection: 'row',
294
+ gap: 6,
295
+ },
296
+ iconButtonSkeleton: {
297
+ width: 36,
298
+ height: 36,
299
+ borderRadius: 8,
300
+ backgroundColor: AppColors_1.AppColors.graySurface,
301
+ borderWidth: 1,
302
+ borderColor: AppColors_1.AppColors.dividerColor,
303
+ },
304
+ chipStripSkeleton: {
305
+ flexDirection: 'row',
306
+ gap: 6,
307
+ marginBottom: 10,
308
+ },
309
+ chipSkeleton: {
310
+ height: 24,
311
+ borderRadius: 6,
312
+ backgroundColor: AppColors_1.AppColors.graySurface,
313
+ borderWidth: 1,
314
+ borderColor: AppColors_1.AppColors.dividerColor,
315
+ },
316
+ cardSkeleton: {
317
+ backgroundColor: AppColors_1.AppColors.primaryLight,
318
+ borderRadius: 10,
319
+ padding: 12,
320
+ marginBottom: 8,
321
+ borderWidth: 1,
322
+ borderColor: AppColors_1.AppColors.dividerColor,
323
+ },
324
+ cardTopRow: {
325
+ flexDirection: 'row',
326
+ justifyContent: 'space-between',
327
+ alignItems: 'center',
328
+ marginBottom: 8,
329
+ },
330
+ badgeGroup: {
331
+ flexDirection: 'row',
332
+ alignItems: 'center',
333
+ gap: 6,
334
+ },
335
+ statusBadgeSkeleton: {
336
+ width: 38,
337
+ height: 18,
338
+ borderRadius: 4,
339
+ backgroundColor: AppColors_1.AppColors.graySurface,
340
+ },
341
+ methodBadgeSkeleton: {
342
+ width: 44,
343
+ height: 18,
344
+ borderRadius: 4,
345
+ backgroundColor: AppColors_1.AppColors.graySurface,
346
+ },
347
+ timeSkeleton: {
348
+ width: 48,
349
+ height: 12,
350
+ borderRadius: 4,
351
+ backgroundColor: AppColors_1.AppColors.graySurface,
352
+ },
353
+ urlLineLong: {
354
+ height: 13,
355
+ borderRadius: 4,
356
+ backgroundColor: AppColors_1.AppColors.graySurface,
357
+ marginBottom: 5,
358
+ width: '90%',
359
+ },
360
+ urlLineShort: {
361
+ height: 11,
362
+ borderRadius: 4,
363
+ backgroundColor: AppColors_1.AppColors.graySurface,
364
+ marginBottom: 8,
365
+ width: '55%',
366
+ },
367
+ cardBottomRow: {
368
+ flexDirection: 'row',
369
+ gap: 8,
370
+ marginTop: 2,
371
+ },
372
+ metaPillSkeleton: {
373
+ width: 52,
374
+ height: 14,
375
+ borderRadius: 4,
376
+ backgroundColor: AppColors_1.AppColors.graySurface,
377
+ },
378
+ });
219
379
  exports.default = MainScreen;
@@ -1 +1 @@
1
- export declare const LIB_VERSION = "2.3.4";
1
+ export declare const LIB_VERSION = "2.3.5";
@@ -3,4 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.LIB_VERSION = void 0;
4
4
  // AUTO-GENERATED FILE — do not edit by hand.
5
5
  // Regenerated from package.json on every build by scripts/gen-version.js.
6
- exports.LIB_VERSION = '2.3.4';
6
+ exports.LIB_VERSION = '2.3.5';
@@ -8,7 +8,6 @@ export { setupAnalyticsLogger, logAnalyticsEvent, subscribeAnalyticsEvents, clea
8
8
  export { setupGlobalCrashHandler, subscribeCrashEvents, emitCrashEvent, getCrashRecords, clearCrashRecords, simulateTestCrash, exportCrashReport, parseCrashStackTrace, recordCustomCrash, addCrashBreadcrumb, recordNavigationBreadcrumb, recordNetworkBreadcrumb, recordReduxBreadcrumb, recordUserActionBreadcrumb, computeCrashFingerprint, type CrashEventPayload, } from './customHooks/crashHandler';
9
9
  export { default as CrashTab } from './components/Inspector/CrashTab';
10
10
  export { default as ErrorBoundary } from './components/ErrorBoundary';
11
- export { default as SkeletonPlaceholder } from './components/SkeletonPlaceholder';
12
11
  export { connectReduxStore, inspectorReduxMiddleware, getReduxState, subscribeReduxState, getActionHistory, clearActionHistory, getLastActionForReducer, } from './customHooks/reduxLogger';
13
12
  export { getEventCategory, registerGAPlugin, type GAPlugin, } from './helpers/gaAnalyticsRegistry';
14
13
  export { usePerformanceTracker, useComponentProfiler, useNavigationProfiler, trackComponentRender, trackNavigationTransition, trackHeavyTask, measureAsync, getHermesMemoryStats, registerComponentProfile, subscribeRenderProfiles, getRenderProfiles, logPerformanceEvent, clearPerformanceEvents, subscribePerformanceEvents, getPerformanceEvents, getInitialRenderProfiles, getInitialPerformanceEvents, generateFixSnippet, } from './customHooks/performanceTracker';
@@ -36,9 +36,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
36
36
  return (mod && mod.__esModule) ? mod : { "default": mod };
37
37
  };
38
38
  Object.defineProperty(exports, "__esModule", { value: true });
39
- 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;
40
- 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;
41
- 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;
39
+ 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;
40
+ 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;
41
+ 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;
42
42
  const react_1 = __importStar(require("react"));
43
43
  const react_native_1 = require("react-native");
44
44
  const native_1 = require("@react-navigation/native");
@@ -1939,8 +1939,6 @@ var CrashTab_1 = require("./components/Inspector/CrashTab");
1939
1939
  Object.defineProperty(exports, "CrashTab", { enumerable: true, get: function () { return __importDefault(CrashTab_1).default; } });
1940
1940
  var ErrorBoundary_2 = require("./components/ErrorBoundary");
1941
1941
  Object.defineProperty(exports, "ErrorBoundary", { enumerable: true, get: function () { return __importDefault(ErrorBoundary_2).default; } });
1942
- var SkeletonPlaceholder_1 = require("./components/SkeletonPlaceholder");
1943
- Object.defineProperty(exports, "SkeletonPlaceholder", { enumerable: true, get: function () { return __importDefault(SkeletonPlaceholder_1).default; } });
1944
1942
  var reduxLogger_2 = require("./customHooks/reduxLogger");
1945
1943
  Object.defineProperty(exports, "connectReduxStore", { enumerable: true, get: function () { return reduxLogger_2.connectReduxStore; } });
1946
1944
  Object.defineProperty(exports, "inspectorReduxMiddleware", { enumerable: true, get: function () { return reduxLogger_2.inspectorReduxMiddleware; } });
@@ -11,7 +11,6 @@ import LogDetail from './LogDetail';
11
11
  import ConsoleTab from './ConsoleTab';
12
12
  import AnalyticsTab from './AnalyticsTab';
13
13
  import AnalyticsDetail from '../AnalyticsDetail';
14
- import SkeletonPlaceholder from './SkeletonPlaceholder';
15
14
  import ReduxTab from './ReduxTab';
16
15
  import ReduxDetail from './ReduxDetail';
17
16
  import BundleTab from './BundleTab';
@@ -144,7 +143,7 @@ const MainScreen = () => {
144
143
  {activeTab === 'redux' && <ReduxDetail />}
145
144
  {activeTab === 'crash' && selectedCrash != null && (<CrashDetail />)}
146
145
  </Animated.View>)}
147
- </View>) : (<SkeletonPlaceholder />)}
146
+ </View>) : (<MainScreenSkeleton />)}
148
147
 
149
148
  {/* Settings Panel Layer - Rendered on top with smooth slide & spring transition */}
150
149
  {settingsPage !== null && (<Animated.View style={[
@@ -178,4 +177,165 @@ const MainScreen = () => {
178
177
  </Modal>
179
178
  </>);
180
179
  };
180
+ const MainScreenSkeleton = React.memo(function MainScreenSkeleton() {
181
+ const shimmerAnim = useRef(new Animated.Value(0.35)).current;
182
+ useEffect(() => {
183
+ const animation = Animated.loop(Animated.sequence([
184
+ Animated.timing(shimmerAnim, {
185
+ toValue: 0.85,
186
+ duration: 750,
187
+ useNativeDriver: true,
188
+ }),
189
+ Animated.timing(shimmerAnim, {
190
+ toValue: 0.35,
191
+ duration: 750,
192
+ useNativeDriver: true,
193
+ }),
194
+ ]));
195
+ animation.start();
196
+ return () => animation.stop();
197
+ }, [shimmerAnim]);
198
+ return (<View style={skeletonStyles.container}>
199
+ {/* ─── Search & Scope Toolbar Skeleton ─── */}
200
+ <View style={skeletonStyles.toolbarSkeleton}>
201
+ <Animated.View style={[skeletonStyles.searchBarSkeleton, { opacity: shimmerAnim }]}/>
202
+ <View style={skeletonStyles.actionButtonsRow}>
203
+ <Animated.View style={[skeletonStyles.iconButtonSkeleton, { opacity: shimmerAnim }]}/>
204
+ <Animated.View style={[skeletonStyles.iconButtonSkeleton, { opacity: shimmerAnim }]}/>
205
+ </View>
206
+ </View>
207
+
208
+ {/* ─── Quick Filter Chips Skeleton Strip ─── */}
209
+ <View style={skeletonStyles.chipStripSkeleton}>
210
+ <Animated.View style={[skeletonStyles.chipSkeleton, { width: 48, opacity: shimmerAnim }]}/>
211
+ <Animated.View style={[skeletonStyles.chipSkeleton, { width: 68, opacity: shimmerAnim }]}/>
212
+ <Animated.View style={[skeletonStyles.chipSkeleton, { width: 76, opacity: shimmerAnim }]}/>
213
+ <Animated.View style={[skeletonStyles.chipSkeleton, { width: 58, opacity: shimmerAnim }]}/>
214
+ </View>
215
+
216
+ {/* ─── List Cards Skeleton ─── */}
217
+ {[0, 1, 2, 3].map(i => (<Animated.View key={`skeleton_card_${i}`} style={[skeletonStyles.cardSkeleton, { opacity: shimmerAnim }]}>
218
+ <View style={skeletonStyles.cardTopRow}>
219
+ <View style={skeletonStyles.badgeGroup}>
220
+ <View style={skeletonStyles.statusBadgeSkeleton}/>
221
+ <View style={skeletonStyles.methodBadgeSkeleton}/>
222
+ </View>
223
+ <View style={skeletonStyles.timeSkeleton}/>
224
+ </View>
225
+ <View style={skeletonStyles.urlLineLong}/>
226
+ <View style={skeletonStyles.urlLineShort}/>
227
+ <View style={skeletonStyles.cardBottomRow}>
228
+ <View style={skeletonStyles.metaPillSkeleton}/>
229
+ <View style={skeletonStyles.metaPillSkeleton}/>
230
+ </View>
231
+ </Animated.View>))}
232
+ </View>);
233
+ });
234
+ const skeletonStyles = StyleSheet.create({
235
+ container: {
236
+ flex: 1,
237
+ paddingHorizontal: 12,
238
+ paddingTop: 8,
239
+ },
240
+ toolbarSkeleton: {
241
+ flexDirection: 'row',
242
+ alignItems: 'center',
243
+ gap: 8,
244
+ marginBottom: 8,
245
+ },
246
+ searchBarSkeleton: {
247
+ flex: 1,
248
+ height: 36,
249
+ borderRadius: 8,
250
+ backgroundColor: AppColors.graySurface,
251
+ borderWidth: 1,
252
+ borderColor: AppColors.dividerColor,
253
+ },
254
+ actionButtonsRow: {
255
+ flexDirection: 'row',
256
+ gap: 6,
257
+ },
258
+ iconButtonSkeleton: {
259
+ width: 36,
260
+ height: 36,
261
+ borderRadius: 8,
262
+ backgroundColor: AppColors.graySurface,
263
+ borderWidth: 1,
264
+ borderColor: AppColors.dividerColor,
265
+ },
266
+ chipStripSkeleton: {
267
+ flexDirection: 'row',
268
+ gap: 6,
269
+ marginBottom: 10,
270
+ },
271
+ chipSkeleton: {
272
+ height: 24,
273
+ borderRadius: 6,
274
+ backgroundColor: AppColors.graySurface,
275
+ borderWidth: 1,
276
+ borderColor: AppColors.dividerColor,
277
+ },
278
+ cardSkeleton: {
279
+ backgroundColor: AppColors.primaryLight,
280
+ borderRadius: 10,
281
+ padding: 12,
282
+ marginBottom: 8,
283
+ borderWidth: 1,
284
+ borderColor: AppColors.dividerColor,
285
+ },
286
+ cardTopRow: {
287
+ flexDirection: 'row',
288
+ justifyContent: 'space-between',
289
+ alignItems: 'center',
290
+ marginBottom: 8,
291
+ },
292
+ badgeGroup: {
293
+ flexDirection: 'row',
294
+ alignItems: 'center',
295
+ gap: 6,
296
+ },
297
+ statusBadgeSkeleton: {
298
+ width: 38,
299
+ height: 18,
300
+ borderRadius: 4,
301
+ backgroundColor: AppColors.graySurface,
302
+ },
303
+ methodBadgeSkeleton: {
304
+ width: 44,
305
+ height: 18,
306
+ borderRadius: 4,
307
+ backgroundColor: AppColors.graySurface,
308
+ },
309
+ timeSkeleton: {
310
+ width: 48,
311
+ height: 12,
312
+ borderRadius: 4,
313
+ backgroundColor: AppColors.graySurface,
314
+ },
315
+ urlLineLong: {
316
+ height: 13,
317
+ borderRadius: 4,
318
+ backgroundColor: AppColors.graySurface,
319
+ marginBottom: 5,
320
+ width: '90%',
321
+ },
322
+ urlLineShort: {
323
+ height: 11,
324
+ borderRadius: 4,
325
+ backgroundColor: AppColors.graySurface,
326
+ marginBottom: 8,
327
+ width: '55%',
328
+ },
329
+ cardBottomRow: {
330
+ flexDirection: 'row',
331
+ gap: 8,
332
+ marginTop: 2,
333
+ },
334
+ metaPillSkeleton: {
335
+ width: 52,
336
+ height: 14,
337
+ borderRadius: 4,
338
+ backgroundColor: AppColors.graySurface,
339
+ },
340
+ });
181
341
  export default MainScreen;
@@ -1 +1 @@
1
- export declare const LIB_VERSION = "2.3.4";
1
+ export declare const LIB_VERSION = "2.3.5";
@@ -1,3 +1,3 @@
1
1
  // AUTO-GENERATED FILE — do not edit by hand.
2
2
  // Regenerated from package.json on every build by scripts/gen-version.js.
3
- export const LIB_VERSION = '2.3.4';
3
+ export const LIB_VERSION = '2.3.5';
@@ -8,7 +8,6 @@ export { setupAnalyticsLogger, logAnalyticsEvent, subscribeAnalyticsEvents, clea
8
8
  export { setupGlobalCrashHandler, subscribeCrashEvents, emitCrashEvent, getCrashRecords, clearCrashRecords, simulateTestCrash, exportCrashReport, parseCrashStackTrace, recordCustomCrash, addCrashBreadcrumb, recordNavigationBreadcrumb, recordNetworkBreadcrumb, recordReduxBreadcrumb, recordUserActionBreadcrumb, computeCrashFingerprint, type CrashEventPayload, } from './customHooks/crashHandler';
9
9
  export { default as CrashTab } from './components/Inspector/CrashTab';
10
10
  export { default as ErrorBoundary } from './components/ErrorBoundary';
11
- export { default as SkeletonPlaceholder } from './components/SkeletonPlaceholder';
12
11
  export { connectReduxStore, inspectorReduxMiddleware, getReduxState, subscribeReduxState, getActionHistory, clearActionHistory, getLastActionForReducer, } from './customHooks/reduxLogger';
13
12
  export { getEventCategory, registerGAPlugin, type GAPlugin, } from './helpers/gaAnalyticsRegistry';
14
13
  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 CHANGED
@@ -1866,7 +1866,6 @@ export { setupAnalyticsLogger, logAnalyticsEvent, subscribeAnalyticsEvents, clea
1866
1866
  export { setupGlobalCrashHandler, subscribeCrashEvents, emitCrashEvent, getCrashRecords, clearCrashRecords, simulateTestCrash, exportCrashReport, parseCrashStackTrace, recordCustomCrash, addCrashBreadcrumb, recordNavigationBreadcrumb, recordNetworkBreadcrumb, recordReduxBreadcrumb, recordUserActionBreadcrumb, computeCrashFingerprint, } from './customHooks/crashHandler';
1867
1867
  export { default as CrashTab } from './components/Inspector/CrashTab';
1868
1868
  export { default as ErrorBoundary } from './components/ErrorBoundary';
1869
- export { default as SkeletonPlaceholder } from './components/SkeletonPlaceholder';
1870
1869
  export { connectReduxStore, inspectorReduxMiddleware, getReduxState, subscribeReduxState, getActionHistory, clearActionHistory, getLastActionForReducer, } from './customHooks/reduxLogger';
1871
1870
  export { getEventCategory, registerGAPlugin, } from './helpers/gaAnalyticsRegistry';
1872
1871
  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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-inapp-inspector",
3
- "version": "2.3.4",
3
+ "version": "2.3.5",
4
4
  "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.",
5
5
  "repository": {
6
6
  "type": "git",
@@ -21,7 +21,6 @@ import LogDetail from './LogDetail';
21
21
  import ConsoleTab from './ConsoleTab';
22
22
  import AnalyticsTab from './AnalyticsTab';
23
23
  import AnalyticsDetail from '../AnalyticsDetail';
24
- import SkeletonPlaceholder from './SkeletonPlaceholder';
25
24
  import ReduxTab from './ReduxTab';
26
25
  import ReduxDetail from './ReduxDetail';
27
26
  import BundleTab from './BundleTab';
@@ -208,7 +207,7 @@ const MainScreen = () => {
208
207
  )}
209
208
  </View>
210
209
  ) : (
211
- <SkeletonPlaceholder />
210
+ <MainScreenSkeleton />
212
211
  )}
213
212
 
214
213
  {/* Settings Panel Layer - Rendered on top with smooth slide & spring transition */}
@@ -251,4 +250,191 @@ const MainScreen = () => {
251
250
  );
252
251
  };
253
252
 
253
+ const MainScreenSkeleton = React.memo(function MainScreenSkeleton() {
254
+ const shimmerAnim = useRef(new Animated.Value(0.35)).current;
255
+
256
+ useEffect(() => {
257
+ const animation = Animated.loop(
258
+ Animated.sequence([
259
+ Animated.timing(shimmerAnim, {
260
+ toValue: 0.85,
261
+ duration: 750,
262
+ useNativeDriver: true,
263
+ }),
264
+ Animated.timing(shimmerAnim, {
265
+ toValue: 0.35,
266
+ duration: 750,
267
+ useNativeDriver: true,
268
+ }),
269
+ ]),
270
+ );
271
+ animation.start();
272
+ return () => animation.stop();
273
+ }, [shimmerAnim]);
274
+
275
+ return (
276
+ <View style={skeletonStyles.container}>
277
+ {/* ─── Search & Scope Toolbar Skeleton ─── */}
278
+ <View style={skeletonStyles.toolbarSkeleton}>
279
+ <Animated.View
280
+ style={[skeletonStyles.searchBarSkeleton, {opacity: shimmerAnim}]}
281
+ />
282
+ <View style={skeletonStyles.actionButtonsRow}>
283
+ <Animated.View
284
+ style={[skeletonStyles.iconButtonSkeleton, {opacity: shimmerAnim}]}
285
+ />
286
+ <Animated.View
287
+ style={[skeletonStyles.iconButtonSkeleton, {opacity: shimmerAnim}]}
288
+ />
289
+ </View>
290
+ </View>
291
+
292
+ {/* ─── Quick Filter Chips Skeleton Strip ─── */}
293
+ <View style={skeletonStyles.chipStripSkeleton}>
294
+ <Animated.View
295
+ style={[skeletonStyles.chipSkeleton, {width: 48, opacity: shimmerAnim}]}
296
+ />
297
+ <Animated.View
298
+ style={[skeletonStyles.chipSkeleton, {width: 68, opacity: shimmerAnim}]}
299
+ />
300
+ <Animated.View
301
+ style={[skeletonStyles.chipSkeleton, {width: 76, opacity: shimmerAnim}]}
302
+ />
303
+ <Animated.View
304
+ style={[skeletonStyles.chipSkeleton, {width: 58, opacity: shimmerAnim}]}
305
+ />
306
+ </View>
307
+
308
+ {/* ─── List Cards Skeleton ─── */}
309
+ {[0, 1, 2, 3].map(i => (
310
+ <Animated.View
311
+ key={`skeleton_card_${i}`}
312
+ style={[skeletonStyles.cardSkeleton, {opacity: shimmerAnim}]}>
313
+ <View style={skeletonStyles.cardTopRow}>
314
+ <View style={skeletonStyles.badgeGroup}>
315
+ <View style={skeletonStyles.statusBadgeSkeleton} />
316
+ <View style={skeletonStyles.methodBadgeSkeleton} />
317
+ </View>
318
+ <View style={skeletonStyles.timeSkeleton} />
319
+ </View>
320
+ <View style={skeletonStyles.urlLineLong} />
321
+ <View style={skeletonStyles.urlLineShort} />
322
+ <View style={skeletonStyles.cardBottomRow}>
323
+ <View style={skeletonStyles.metaPillSkeleton} />
324
+ <View style={skeletonStyles.metaPillSkeleton} />
325
+ </View>
326
+ </Animated.View>
327
+ ))}
328
+ </View>
329
+ );
330
+ });
331
+
332
+ const skeletonStyles = StyleSheet.create({
333
+ container: {
334
+ flex: 1,
335
+ paddingHorizontal: 12,
336
+ paddingTop: 8,
337
+ },
338
+ toolbarSkeleton: {
339
+ flexDirection: 'row',
340
+ alignItems: 'center',
341
+ gap: 8,
342
+ marginBottom: 8,
343
+ },
344
+ searchBarSkeleton: {
345
+ flex: 1,
346
+ height: 36,
347
+ borderRadius: 8,
348
+ backgroundColor: AppColors.graySurface,
349
+ borderWidth: 1,
350
+ borderColor: AppColors.dividerColor,
351
+ },
352
+ actionButtonsRow: {
353
+ flexDirection: 'row',
354
+ gap: 6,
355
+ },
356
+ iconButtonSkeleton: {
357
+ width: 36,
358
+ height: 36,
359
+ borderRadius: 8,
360
+ backgroundColor: AppColors.graySurface,
361
+ borderWidth: 1,
362
+ borderColor: AppColors.dividerColor,
363
+ },
364
+ chipStripSkeleton: {
365
+ flexDirection: 'row',
366
+ gap: 6,
367
+ marginBottom: 10,
368
+ },
369
+ chipSkeleton: {
370
+ height: 24,
371
+ borderRadius: 6,
372
+ backgroundColor: AppColors.graySurface,
373
+ borderWidth: 1,
374
+ borderColor: AppColors.dividerColor,
375
+ },
376
+ cardSkeleton: {
377
+ backgroundColor: AppColors.primaryLight,
378
+ borderRadius: 10,
379
+ padding: 12,
380
+ marginBottom: 8,
381
+ borderWidth: 1,
382
+ borderColor: AppColors.dividerColor,
383
+ },
384
+ cardTopRow: {
385
+ flexDirection: 'row',
386
+ justifyContent: 'space-between',
387
+ alignItems: 'center',
388
+ marginBottom: 8,
389
+ },
390
+ badgeGroup: {
391
+ flexDirection: 'row',
392
+ alignItems: 'center',
393
+ gap: 6,
394
+ },
395
+ statusBadgeSkeleton: {
396
+ width: 38,
397
+ height: 18,
398
+ borderRadius: 4,
399
+ backgroundColor: AppColors.graySurface,
400
+ },
401
+ methodBadgeSkeleton: {
402
+ width: 44,
403
+ height: 18,
404
+ borderRadius: 4,
405
+ backgroundColor: AppColors.graySurface,
406
+ },
407
+ timeSkeleton: {
408
+ width: 48,
409
+ height: 12,
410
+ borderRadius: 4,
411
+ backgroundColor: AppColors.graySurface,
412
+ },
413
+ urlLineLong: {
414
+ height: 13,
415
+ borderRadius: 4,
416
+ backgroundColor: AppColors.graySurface,
417
+ marginBottom: 5,
418
+ width: '90%',
419
+ },
420
+ urlLineShort: {
421
+ height: 11,
422
+ borderRadius: 4,
423
+ backgroundColor: AppColors.graySurface,
424
+ marginBottom: 8,
425
+ width: '55%',
426
+ },
427
+ cardBottomRow: {
428
+ flexDirection: 'row',
429
+ gap: 8,
430
+ marginTop: 2,
431
+ },
432
+ metaPillSkeleton: {
433
+ width: 52,
434
+ height: 14,
435
+ borderRadius: 4,
436
+ backgroundColor: AppColors.graySurface,
437
+ },
438
+ });
439
+
254
440
  export default MainScreen;
@@ -1,3 +1,3 @@
1
1
  // AUTO-GENERATED FILE — do not edit by hand.
2
2
  // Regenerated from package.json on every build by scripts/gen-version.js.
3
- export const LIB_VERSION = '2.3.4';
3
+ export const LIB_VERSION = '2.3.5';
package/src/index.tsx CHANGED
@@ -2245,7 +2245,6 @@ export {
2245
2245
 
2246
2246
  export {default as CrashTab} from './components/Inspector/CrashTab';
2247
2247
  export {default as ErrorBoundary} from './components/ErrorBoundary';
2248
- export {default as SkeletonPlaceholder} from './components/SkeletonPlaceholder';
2249
2248
 
2250
2249
  export {
2251
2250
  connectReduxStore,