react-native-inapp-inspector 2.3.3 → 2.3.4
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.
- package/dist/commonjs/components/SkeletonPlaceholder.d.ts +6 -2
- package/dist/commonjs/components/SkeletonPlaceholder.js +196 -10
- package/dist/commonjs/constants/version.d.ts +1 -1
- package/dist/commonjs/constants/version.js +1 -1
- package/dist/commonjs/index.d.ts +1 -1
- package/dist/commonjs/index.js +1 -1
- package/dist/esm/components/SkeletonPlaceholder.d.ts +6 -2
- package/dist/esm/components/SkeletonPlaceholder.js +173 -2
- package/dist/esm/constants/version.d.ts +1 -1
- package/dist/esm/constants/version.js +1 -1
- package/dist/esm/index.d.ts +1 -1
- package/dist/esm/index.js +1 -1
- package/package.json +1 -1
- package/src/components/SkeletonPlaceholder.tsx +206 -2
- package/src/constants/version.ts +1 -1
- package/src/index.tsx +1 -1
|
@@ -1,2 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
export
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface SkeletonPlaceholderProps {
|
|
3
|
+
cardCount?: number;
|
|
4
|
+
}
|
|
5
|
+
export declare const SkeletonPlaceholder: React.NamedExoticComponent<SkeletonPlaceholderProps>;
|
|
6
|
+
export default SkeletonPlaceholder;
|
|
@@ -10,14 +10,200 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
|
|
|
10
10
|
if (k2 === undefined) k2 = k;
|
|
11
11
|
o[k2] = m[k];
|
|
12
12
|
}));
|
|
13
|
-
var
|
|
14
|
-
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
19
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
20
|
-
exports.
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
36
|
+
exports.SkeletonPlaceholder = void 0;
|
|
37
|
+
const react_1 = __importStar(require("react"));
|
|
38
|
+
const react_native_1 = require("react-native");
|
|
39
|
+
const AppColors_1 = require("../styles/AppColors");
|
|
40
|
+
exports.SkeletonPlaceholder = react_1.default.memo(function SkeletonPlaceholder({ cardCount = 4, }) {
|
|
41
|
+
const shimmerAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0.35)).current;
|
|
42
|
+
(0, react_1.useEffect)(() => {
|
|
43
|
+
const animation = react_native_1.Animated.loop(react_native_1.Animated.sequence([
|
|
44
|
+
react_native_1.Animated.timing(shimmerAnim, {
|
|
45
|
+
toValue: 0.85,
|
|
46
|
+
duration: 750,
|
|
47
|
+
useNativeDriver: true,
|
|
48
|
+
}),
|
|
49
|
+
react_native_1.Animated.timing(shimmerAnim, {
|
|
50
|
+
toValue: 0.35,
|
|
51
|
+
duration: 750,
|
|
52
|
+
useNativeDriver: true,
|
|
53
|
+
}),
|
|
54
|
+
]));
|
|
55
|
+
animation.start();
|
|
56
|
+
return () => animation.stop();
|
|
57
|
+
}, [shimmerAnim]);
|
|
58
|
+
return (<react_native_1.View style={skeletonStyles.container}>
|
|
59
|
+
{/* ─── Search & Scope Toolbar Skeleton ─── */}
|
|
60
|
+
<react_native_1.View style={skeletonStyles.toolbarSkeleton}>
|
|
61
|
+
<react_native_1.Animated.View style={[
|
|
62
|
+
skeletonStyles.searchBarSkeleton,
|
|
63
|
+
{ opacity: shimmerAnim },
|
|
64
|
+
]}/>
|
|
65
|
+
<react_native_1.View style={skeletonStyles.actionButtonsRow}>
|
|
66
|
+
<react_native_1.Animated.View style={[skeletonStyles.iconButtonSkeleton, { opacity: shimmerAnim }]}/>
|
|
67
|
+
<react_native_1.Animated.View style={[skeletonStyles.iconButtonSkeleton, { opacity: shimmerAnim }]}/>
|
|
68
|
+
</react_native_1.View>
|
|
69
|
+
</react_native_1.View>
|
|
70
|
+
|
|
71
|
+
{/* ─── Quick Filter Chips Skeleton Strip ─── */}
|
|
72
|
+
<react_native_1.View style={skeletonStyles.chipStripSkeleton}>
|
|
73
|
+
<react_native_1.Animated.View style={[skeletonStyles.chipSkeleton, { width: 48, opacity: shimmerAnim }]}/>
|
|
74
|
+
<react_native_1.Animated.View style={[skeletonStyles.chipSkeleton, { width: 68, opacity: shimmerAnim }]}/>
|
|
75
|
+
<react_native_1.Animated.View style={[skeletonStyles.chipSkeleton, { width: 76, opacity: shimmerAnim }]}/>
|
|
76
|
+
<react_native_1.Animated.View style={[skeletonStyles.chipSkeleton, { width: 58, opacity: shimmerAnim }]}/>
|
|
77
|
+
</react_native_1.View>
|
|
78
|
+
|
|
79
|
+
{/* ─── List Cards Skeleton ─── */}
|
|
80
|
+
{Array.from({ length: cardCount }).map((_, i) => (<react_native_1.Animated.View key={`skeleton_card_${i}`} style={[skeletonStyles.cardSkeleton, { opacity: shimmerAnim }]}>
|
|
81
|
+
{/* Top row: Status pill + Method + Time */}
|
|
82
|
+
<react_native_1.View style={skeletonStyles.cardTopRow}>
|
|
83
|
+
<react_native_1.View style={skeletonStyles.badgeGroup}>
|
|
84
|
+
<react_native_1.View style={skeletonStyles.statusBadgeSkeleton}/>
|
|
85
|
+
<react_native_1.View style={skeletonStyles.methodBadgeSkeleton}/>
|
|
86
|
+
</react_native_1.View>
|
|
87
|
+
<react_native_1.View style={skeletonStyles.timeSkeleton}/>
|
|
88
|
+
</react_native_1.View>
|
|
89
|
+
|
|
90
|
+
{/* Middle row: URL lines */}
|
|
91
|
+
<react_native_1.View style={skeletonStyles.urlLineLong}/>
|
|
92
|
+
<react_native_1.View style={skeletonStyles.urlLineShort}/>
|
|
93
|
+
|
|
94
|
+
{/* Bottom row: Latency & Size */}
|
|
95
|
+
<react_native_1.View style={skeletonStyles.cardBottomRow}>
|
|
96
|
+
<react_native_1.View style={skeletonStyles.metaPillSkeleton}/>
|
|
97
|
+
<react_native_1.View style={skeletonStyles.metaPillSkeleton}/>
|
|
98
|
+
</react_native_1.View>
|
|
99
|
+
</react_native_1.Animated.View>))}
|
|
100
|
+
</react_native_1.View>);
|
|
101
|
+
});
|
|
102
|
+
const skeletonStyles = react_native_1.StyleSheet.create({
|
|
103
|
+
container: {
|
|
104
|
+
flex: 1,
|
|
105
|
+
paddingHorizontal: 12,
|
|
106
|
+
paddingTop: 8,
|
|
107
|
+
},
|
|
108
|
+
toolbarSkeleton: {
|
|
109
|
+
flexDirection: 'row',
|
|
110
|
+
alignItems: 'center',
|
|
111
|
+
gap: 8,
|
|
112
|
+
marginBottom: 8,
|
|
113
|
+
},
|
|
114
|
+
searchBarSkeleton: {
|
|
115
|
+
flex: 1,
|
|
116
|
+
height: 36,
|
|
117
|
+
borderRadius: 8,
|
|
118
|
+
backgroundColor: AppColors_1.AppColors.graySurface,
|
|
119
|
+
borderWidth: 1,
|
|
120
|
+
borderColor: AppColors_1.AppColors.dividerColor,
|
|
121
|
+
},
|
|
122
|
+
actionButtonsRow: {
|
|
123
|
+
flexDirection: 'row',
|
|
124
|
+
gap: 6,
|
|
125
|
+
},
|
|
126
|
+
iconButtonSkeleton: {
|
|
127
|
+
width: 36,
|
|
128
|
+
height: 36,
|
|
129
|
+
borderRadius: 8,
|
|
130
|
+
backgroundColor: AppColors_1.AppColors.graySurface,
|
|
131
|
+
borderWidth: 1,
|
|
132
|
+
borderColor: AppColors_1.AppColors.dividerColor,
|
|
133
|
+
},
|
|
134
|
+
chipStripSkeleton: {
|
|
135
|
+
flexDirection: 'row',
|
|
136
|
+
gap: 6,
|
|
137
|
+
marginBottom: 10,
|
|
138
|
+
},
|
|
139
|
+
chipSkeleton: {
|
|
140
|
+
height: 24,
|
|
141
|
+
borderRadius: 6,
|
|
142
|
+
backgroundColor: AppColors_1.AppColors.graySurface,
|
|
143
|
+
borderWidth: 1,
|
|
144
|
+
borderColor: AppColors_1.AppColors.dividerColor,
|
|
145
|
+
},
|
|
146
|
+
cardSkeleton: {
|
|
147
|
+
backgroundColor: AppColors_1.AppColors.primaryLight,
|
|
148
|
+
borderRadius: 10,
|
|
149
|
+
padding: 12,
|
|
150
|
+
marginBottom: 8,
|
|
151
|
+
borderWidth: 1,
|
|
152
|
+
borderColor: AppColors_1.AppColors.dividerColor,
|
|
153
|
+
},
|
|
154
|
+
cardTopRow: {
|
|
155
|
+
flexDirection: 'row',
|
|
156
|
+
justifyContent: 'space-between',
|
|
157
|
+
alignItems: 'center',
|
|
158
|
+
marginBottom: 8,
|
|
159
|
+
},
|
|
160
|
+
badgeGroup: {
|
|
161
|
+
flexDirection: 'row',
|
|
162
|
+
alignItems: 'center',
|
|
163
|
+
gap: 6,
|
|
164
|
+
},
|
|
165
|
+
statusBadgeSkeleton: {
|
|
166
|
+
width: 38,
|
|
167
|
+
height: 18,
|
|
168
|
+
borderRadius: 4,
|
|
169
|
+
backgroundColor: AppColors_1.AppColors.graySurface,
|
|
170
|
+
},
|
|
171
|
+
methodBadgeSkeleton: {
|
|
172
|
+
width: 44,
|
|
173
|
+
height: 18,
|
|
174
|
+
borderRadius: 4,
|
|
175
|
+
backgroundColor: AppColors_1.AppColors.graySurface,
|
|
176
|
+
},
|
|
177
|
+
timeSkeleton: {
|
|
178
|
+
width: 48,
|
|
179
|
+
height: 12,
|
|
180
|
+
borderRadius: 4,
|
|
181
|
+
backgroundColor: AppColors_1.AppColors.graySurface,
|
|
182
|
+
},
|
|
183
|
+
urlLineLong: {
|
|
184
|
+
height: 13,
|
|
185
|
+
borderRadius: 4,
|
|
186
|
+
backgroundColor: AppColors_1.AppColors.graySurface,
|
|
187
|
+
marginBottom: 5,
|
|
188
|
+
width: '90%',
|
|
189
|
+
},
|
|
190
|
+
urlLineShort: {
|
|
191
|
+
height: 11,
|
|
192
|
+
borderRadius: 4,
|
|
193
|
+
backgroundColor: AppColors_1.AppColors.graySurface,
|
|
194
|
+
marginBottom: 8,
|
|
195
|
+
width: '55%',
|
|
196
|
+
},
|
|
197
|
+
cardBottomRow: {
|
|
198
|
+
flexDirection: 'row',
|
|
199
|
+
gap: 8,
|
|
200
|
+
marginTop: 2,
|
|
201
|
+
},
|
|
202
|
+
metaPillSkeleton: {
|
|
203
|
+
width: 52,
|
|
204
|
+
height: 14,
|
|
205
|
+
borderRadius: 4,
|
|
206
|
+
backgroundColor: AppColors_1.AppColors.graySurface,
|
|
207
|
+
},
|
|
208
|
+
});
|
|
209
|
+
exports.default = exports.SkeletonPlaceholder;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const LIB_VERSION = "2.3.
|
|
1
|
+
export declare const LIB_VERSION = "2.3.4";
|
|
@@ -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.
|
|
6
|
+
exports.LIB_VERSION = '2.3.4';
|
package/dist/commonjs/index.d.ts
CHANGED
|
@@ -8,7 +8,7 @@ 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/
|
|
11
|
+
export { default as SkeletonPlaceholder } from './components/SkeletonPlaceholder';
|
|
12
12
|
export { connectReduxStore, inspectorReduxMiddleware, getReduxState, subscribeReduxState, getActionHistory, clearActionHistory, getLastActionForReducer, } from './customHooks/reduxLogger';
|
|
13
13
|
export { getEventCategory, registerGAPlugin, type GAPlugin, } from './helpers/gaAnalyticsRegistry';
|
|
14
14
|
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
CHANGED
|
@@ -1939,7 +1939,7 @@ 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/
|
|
1942
|
+
var SkeletonPlaceholder_1 = require("./components/SkeletonPlaceholder");
|
|
1943
1943
|
Object.defineProperty(exports, "SkeletonPlaceholder", { enumerable: true, get: function () { return __importDefault(SkeletonPlaceholder_1).default; } });
|
|
1944
1944
|
var reduxLogger_2 = require("./customHooks/reduxLogger");
|
|
1945
1945
|
Object.defineProperty(exports, "connectReduxStore", { enumerable: true, get: function () { return reduxLogger_2.connectReduxStore; } });
|
|
@@ -1,2 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
export
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface SkeletonPlaceholderProps {
|
|
3
|
+
cardCount?: number;
|
|
4
|
+
}
|
|
5
|
+
export declare const SkeletonPlaceholder: React.NamedExoticComponent<SkeletonPlaceholderProps>;
|
|
6
|
+
export default SkeletonPlaceholder;
|
|
@@ -1,2 +1,173 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import React, { useEffect, useRef } from 'react';
|
|
2
|
+
import { Animated, StyleSheet, View } from 'react-native';
|
|
3
|
+
import { AppColors } from '../styles/AppColors';
|
|
4
|
+
export const SkeletonPlaceholder = React.memo(function SkeletonPlaceholder({ cardCount = 4, }) {
|
|
5
|
+
const shimmerAnim = useRef(new Animated.Value(0.35)).current;
|
|
6
|
+
useEffect(() => {
|
|
7
|
+
const animation = Animated.loop(Animated.sequence([
|
|
8
|
+
Animated.timing(shimmerAnim, {
|
|
9
|
+
toValue: 0.85,
|
|
10
|
+
duration: 750,
|
|
11
|
+
useNativeDriver: true,
|
|
12
|
+
}),
|
|
13
|
+
Animated.timing(shimmerAnim, {
|
|
14
|
+
toValue: 0.35,
|
|
15
|
+
duration: 750,
|
|
16
|
+
useNativeDriver: true,
|
|
17
|
+
}),
|
|
18
|
+
]));
|
|
19
|
+
animation.start();
|
|
20
|
+
return () => animation.stop();
|
|
21
|
+
}, [shimmerAnim]);
|
|
22
|
+
return (<View style={skeletonStyles.container}>
|
|
23
|
+
{/* ─── Search & Scope Toolbar Skeleton ─── */}
|
|
24
|
+
<View style={skeletonStyles.toolbarSkeleton}>
|
|
25
|
+
<Animated.View style={[
|
|
26
|
+
skeletonStyles.searchBarSkeleton,
|
|
27
|
+
{ opacity: shimmerAnim },
|
|
28
|
+
]}/>
|
|
29
|
+
<View style={skeletonStyles.actionButtonsRow}>
|
|
30
|
+
<Animated.View style={[skeletonStyles.iconButtonSkeleton, { opacity: shimmerAnim }]}/>
|
|
31
|
+
<Animated.View style={[skeletonStyles.iconButtonSkeleton, { opacity: shimmerAnim }]}/>
|
|
32
|
+
</View>
|
|
33
|
+
</View>
|
|
34
|
+
|
|
35
|
+
{/* ─── Quick Filter Chips Skeleton Strip ─── */}
|
|
36
|
+
<View style={skeletonStyles.chipStripSkeleton}>
|
|
37
|
+
<Animated.View style={[skeletonStyles.chipSkeleton, { width: 48, opacity: shimmerAnim }]}/>
|
|
38
|
+
<Animated.View style={[skeletonStyles.chipSkeleton, { width: 68, opacity: shimmerAnim }]}/>
|
|
39
|
+
<Animated.View style={[skeletonStyles.chipSkeleton, { width: 76, opacity: shimmerAnim }]}/>
|
|
40
|
+
<Animated.View style={[skeletonStyles.chipSkeleton, { width: 58, opacity: shimmerAnim }]}/>
|
|
41
|
+
</View>
|
|
42
|
+
|
|
43
|
+
{/* ─── List Cards Skeleton ─── */}
|
|
44
|
+
{Array.from({ length: cardCount }).map((_, i) => (<Animated.View key={`skeleton_card_${i}`} style={[skeletonStyles.cardSkeleton, { opacity: shimmerAnim }]}>
|
|
45
|
+
{/* Top row: Status pill + Method + Time */}
|
|
46
|
+
<View style={skeletonStyles.cardTopRow}>
|
|
47
|
+
<View style={skeletonStyles.badgeGroup}>
|
|
48
|
+
<View style={skeletonStyles.statusBadgeSkeleton}/>
|
|
49
|
+
<View style={skeletonStyles.methodBadgeSkeleton}/>
|
|
50
|
+
</View>
|
|
51
|
+
<View style={skeletonStyles.timeSkeleton}/>
|
|
52
|
+
</View>
|
|
53
|
+
|
|
54
|
+
{/* Middle row: URL lines */}
|
|
55
|
+
<View style={skeletonStyles.urlLineLong}/>
|
|
56
|
+
<View style={skeletonStyles.urlLineShort}/>
|
|
57
|
+
|
|
58
|
+
{/* Bottom row: Latency & Size */}
|
|
59
|
+
<View style={skeletonStyles.cardBottomRow}>
|
|
60
|
+
<View style={skeletonStyles.metaPillSkeleton}/>
|
|
61
|
+
<View style={skeletonStyles.metaPillSkeleton}/>
|
|
62
|
+
</View>
|
|
63
|
+
</Animated.View>))}
|
|
64
|
+
</View>);
|
|
65
|
+
});
|
|
66
|
+
const skeletonStyles = StyleSheet.create({
|
|
67
|
+
container: {
|
|
68
|
+
flex: 1,
|
|
69
|
+
paddingHorizontal: 12,
|
|
70
|
+
paddingTop: 8,
|
|
71
|
+
},
|
|
72
|
+
toolbarSkeleton: {
|
|
73
|
+
flexDirection: 'row',
|
|
74
|
+
alignItems: 'center',
|
|
75
|
+
gap: 8,
|
|
76
|
+
marginBottom: 8,
|
|
77
|
+
},
|
|
78
|
+
searchBarSkeleton: {
|
|
79
|
+
flex: 1,
|
|
80
|
+
height: 36,
|
|
81
|
+
borderRadius: 8,
|
|
82
|
+
backgroundColor: AppColors.graySurface,
|
|
83
|
+
borderWidth: 1,
|
|
84
|
+
borderColor: AppColors.dividerColor,
|
|
85
|
+
},
|
|
86
|
+
actionButtonsRow: {
|
|
87
|
+
flexDirection: 'row',
|
|
88
|
+
gap: 6,
|
|
89
|
+
},
|
|
90
|
+
iconButtonSkeleton: {
|
|
91
|
+
width: 36,
|
|
92
|
+
height: 36,
|
|
93
|
+
borderRadius: 8,
|
|
94
|
+
backgroundColor: AppColors.graySurface,
|
|
95
|
+
borderWidth: 1,
|
|
96
|
+
borderColor: AppColors.dividerColor,
|
|
97
|
+
},
|
|
98
|
+
chipStripSkeleton: {
|
|
99
|
+
flexDirection: 'row',
|
|
100
|
+
gap: 6,
|
|
101
|
+
marginBottom: 10,
|
|
102
|
+
},
|
|
103
|
+
chipSkeleton: {
|
|
104
|
+
height: 24,
|
|
105
|
+
borderRadius: 6,
|
|
106
|
+
backgroundColor: AppColors.graySurface,
|
|
107
|
+
borderWidth: 1,
|
|
108
|
+
borderColor: AppColors.dividerColor,
|
|
109
|
+
},
|
|
110
|
+
cardSkeleton: {
|
|
111
|
+
backgroundColor: AppColors.primaryLight,
|
|
112
|
+
borderRadius: 10,
|
|
113
|
+
padding: 12,
|
|
114
|
+
marginBottom: 8,
|
|
115
|
+
borderWidth: 1,
|
|
116
|
+
borderColor: AppColors.dividerColor,
|
|
117
|
+
},
|
|
118
|
+
cardTopRow: {
|
|
119
|
+
flexDirection: 'row',
|
|
120
|
+
justifyContent: 'space-between',
|
|
121
|
+
alignItems: 'center',
|
|
122
|
+
marginBottom: 8,
|
|
123
|
+
},
|
|
124
|
+
badgeGroup: {
|
|
125
|
+
flexDirection: 'row',
|
|
126
|
+
alignItems: 'center',
|
|
127
|
+
gap: 6,
|
|
128
|
+
},
|
|
129
|
+
statusBadgeSkeleton: {
|
|
130
|
+
width: 38,
|
|
131
|
+
height: 18,
|
|
132
|
+
borderRadius: 4,
|
|
133
|
+
backgroundColor: AppColors.graySurface,
|
|
134
|
+
},
|
|
135
|
+
methodBadgeSkeleton: {
|
|
136
|
+
width: 44,
|
|
137
|
+
height: 18,
|
|
138
|
+
borderRadius: 4,
|
|
139
|
+
backgroundColor: AppColors.graySurface,
|
|
140
|
+
},
|
|
141
|
+
timeSkeleton: {
|
|
142
|
+
width: 48,
|
|
143
|
+
height: 12,
|
|
144
|
+
borderRadius: 4,
|
|
145
|
+
backgroundColor: AppColors.graySurface,
|
|
146
|
+
},
|
|
147
|
+
urlLineLong: {
|
|
148
|
+
height: 13,
|
|
149
|
+
borderRadius: 4,
|
|
150
|
+
backgroundColor: AppColors.graySurface,
|
|
151
|
+
marginBottom: 5,
|
|
152
|
+
width: '90%',
|
|
153
|
+
},
|
|
154
|
+
urlLineShort: {
|
|
155
|
+
height: 11,
|
|
156
|
+
borderRadius: 4,
|
|
157
|
+
backgroundColor: AppColors.graySurface,
|
|
158
|
+
marginBottom: 8,
|
|
159
|
+
width: '55%',
|
|
160
|
+
},
|
|
161
|
+
cardBottomRow: {
|
|
162
|
+
flexDirection: 'row',
|
|
163
|
+
gap: 8,
|
|
164
|
+
marginTop: 2,
|
|
165
|
+
},
|
|
166
|
+
metaPillSkeleton: {
|
|
167
|
+
width: 52,
|
|
168
|
+
height: 14,
|
|
169
|
+
borderRadius: 4,
|
|
170
|
+
backgroundColor: AppColors.graySurface,
|
|
171
|
+
},
|
|
172
|
+
});
|
|
173
|
+
export default SkeletonPlaceholder;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const LIB_VERSION = "2.3.
|
|
1
|
+
export declare const LIB_VERSION = "2.3.4";
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -8,7 +8,7 @@ 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/
|
|
11
|
+
export { default as SkeletonPlaceholder } from './components/SkeletonPlaceholder';
|
|
12
12
|
export { connectReduxStore, inspectorReduxMiddleware, getReduxState, subscribeReduxState, getActionHistory, clearActionHistory, getLastActionForReducer, } from './customHooks/reduxLogger';
|
|
13
13
|
export { getEventCategory, registerGAPlugin, type GAPlugin, } from './helpers/gaAnalyticsRegistry';
|
|
14
14
|
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,7 @@ 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/
|
|
1869
|
+
export { default as SkeletonPlaceholder } from './components/SkeletonPlaceholder';
|
|
1870
1870
|
export { connectReduxStore, inspectorReduxMiddleware, getReduxState, subscribeReduxState, getActionHistory, clearActionHistory, getLastActionForReducer, } from './customHooks/reduxLogger';
|
|
1871
1871
|
export { getEventCategory, registerGAPlugin, } from './helpers/gaAnalyticsRegistry';
|
|
1872
1872
|
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.
|
|
3
|
+
"version": "2.3.4",
|
|
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",
|
|
@@ -1,2 +1,206 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import React, {useEffect, useRef} from 'react';
|
|
2
|
+
import {Animated, StyleSheet, View} from 'react-native';
|
|
3
|
+
import {AppColors} from '../styles/AppColors';
|
|
4
|
+
|
|
5
|
+
export interface SkeletonPlaceholderProps {
|
|
6
|
+
cardCount?: number;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export const SkeletonPlaceholder = React.memo(function SkeletonPlaceholder({
|
|
10
|
+
cardCount = 4,
|
|
11
|
+
}: SkeletonPlaceholderProps) {
|
|
12
|
+
const shimmerAnim = useRef(new Animated.Value(0.35)).current;
|
|
13
|
+
|
|
14
|
+
useEffect(() => {
|
|
15
|
+
const animation = Animated.loop(
|
|
16
|
+
Animated.sequence([
|
|
17
|
+
Animated.timing(shimmerAnim, {
|
|
18
|
+
toValue: 0.85,
|
|
19
|
+
duration: 750,
|
|
20
|
+
useNativeDriver: true,
|
|
21
|
+
}),
|
|
22
|
+
Animated.timing(shimmerAnim, {
|
|
23
|
+
toValue: 0.35,
|
|
24
|
+
duration: 750,
|
|
25
|
+
useNativeDriver: true,
|
|
26
|
+
}),
|
|
27
|
+
]),
|
|
28
|
+
);
|
|
29
|
+
animation.start();
|
|
30
|
+
return () => animation.stop();
|
|
31
|
+
}, [shimmerAnim]);
|
|
32
|
+
|
|
33
|
+
return (
|
|
34
|
+
<View style={skeletonStyles.container}>
|
|
35
|
+
{/* ─── Search & Scope Toolbar Skeleton ─── */}
|
|
36
|
+
<View style={skeletonStyles.toolbarSkeleton}>
|
|
37
|
+
<Animated.View
|
|
38
|
+
style={[
|
|
39
|
+
skeletonStyles.searchBarSkeleton,
|
|
40
|
+
{opacity: shimmerAnim},
|
|
41
|
+
]}
|
|
42
|
+
/>
|
|
43
|
+
<View style={skeletonStyles.actionButtonsRow}>
|
|
44
|
+
<Animated.View
|
|
45
|
+
style={[skeletonStyles.iconButtonSkeleton, {opacity: shimmerAnim}]}
|
|
46
|
+
/>
|
|
47
|
+
<Animated.View
|
|
48
|
+
style={[skeletonStyles.iconButtonSkeleton, {opacity: shimmerAnim}]}
|
|
49
|
+
/>
|
|
50
|
+
</View>
|
|
51
|
+
</View>
|
|
52
|
+
|
|
53
|
+
{/* ─── Quick Filter Chips Skeleton Strip ─── */}
|
|
54
|
+
<View style={skeletonStyles.chipStripSkeleton}>
|
|
55
|
+
<Animated.View
|
|
56
|
+
style={[skeletonStyles.chipSkeleton, {width: 48, opacity: shimmerAnim}]}
|
|
57
|
+
/>
|
|
58
|
+
<Animated.View
|
|
59
|
+
style={[skeletonStyles.chipSkeleton, {width: 68, opacity: shimmerAnim}]}
|
|
60
|
+
/>
|
|
61
|
+
<Animated.View
|
|
62
|
+
style={[skeletonStyles.chipSkeleton, {width: 76, opacity: shimmerAnim}]}
|
|
63
|
+
/>
|
|
64
|
+
<Animated.View
|
|
65
|
+
style={[skeletonStyles.chipSkeleton, {width: 58, opacity: shimmerAnim}]}
|
|
66
|
+
/>
|
|
67
|
+
</View>
|
|
68
|
+
|
|
69
|
+
{/* ─── List Cards Skeleton ─── */}
|
|
70
|
+
{Array.from({length: cardCount}).map((_, i) => (
|
|
71
|
+
<Animated.View
|
|
72
|
+
key={`skeleton_card_${i}`}
|
|
73
|
+
style={[skeletonStyles.cardSkeleton, {opacity: shimmerAnim}]}>
|
|
74
|
+
{/* Top row: Status pill + Method + Time */}
|
|
75
|
+
<View style={skeletonStyles.cardTopRow}>
|
|
76
|
+
<View style={skeletonStyles.badgeGroup}>
|
|
77
|
+
<View style={skeletonStyles.statusBadgeSkeleton} />
|
|
78
|
+
<View style={skeletonStyles.methodBadgeSkeleton} />
|
|
79
|
+
</View>
|
|
80
|
+
<View style={skeletonStyles.timeSkeleton} />
|
|
81
|
+
</View>
|
|
82
|
+
|
|
83
|
+
{/* Middle row: URL lines */}
|
|
84
|
+
<View style={skeletonStyles.urlLineLong} />
|
|
85
|
+
<View style={skeletonStyles.urlLineShort} />
|
|
86
|
+
|
|
87
|
+
{/* Bottom row: Latency & Size */}
|
|
88
|
+
<View style={skeletonStyles.cardBottomRow}>
|
|
89
|
+
<View style={skeletonStyles.metaPillSkeleton} />
|
|
90
|
+
<View style={skeletonStyles.metaPillSkeleton} />
|
|
91
|
+
</View>
|
|
92
|
+
</Animated.View>
|
|
93
|
+
))}
|
|
94
|
+
</View>
|
|
95
|
+
);
|
|
96
|
+
});
|
|
97
|
+
|
|
98
|
+
const skeletonStyles = StyleSheet.create({
|
|
99
|
+
container: {
|
|
100
|
+
flex: 1,
|
|
101
|
+
paddingHorizontal: 12,
|
|
102
|
+
paddingTop: 8,
|
|
103
|
+
},
|
|
104
|
+
toolbarSkeleton: {
|
|
105
|
+
flexDirection: 'row',
|
|
106
|
+
alignItems: 'center',
|
|
107
|
+
gap: 8,
|
|
108
|
+
marginBottom: 8,
|
|
109
|
+
},
|
|
110
|
+
searchBarSkeleton: {
|
|
111
|
+
flex: 1,
|
|
112
|
+
height: 36,
|
|
113
|
+
borderRadius: 8,
|
|
114
|
+
backgroundColor: AppColors.graySurface,
|
|
115
|
+
borderWidth: 1,
|
|
116
|
+
borderColor: AppColors.dividerColor,
|
|
117
|
+
},
|
|
118
|
+
actionButtonsRow: {
|
|
119
|
+
flexDirection: 'row',
|
|
120
|
+
gap: 6,
|
|
121
|
+
},
|
|
122
|
+
iconButtonSkeleton: {
|
|
123
|
+
width: 36,
|
|
124
|
+
height: 36,
|
|
125
|
+
borderRadius: 8,
|
|
126
|
+
backgroundColor: AppColors.graySurface,
|
|
127
|
+
borderWidth: 1,
|
|
128
|
+
borderColor: AppColors.dividerColor,
|
|
129
|
+
},
|
|
130
|
+
chipStripSkeleton: {
|
|
131
|
+
flexDirection: 'row',
|
|
132
|
+
gap: 6,
|
|
133
|
+
marginBottom: 10,
|
|
134
|
+
},
|
|
135
|
+
chipSkeleton: {
|
|
136
|
+
height: 24,
|
|
137
|
+
borderRadius: 6,
|
|
138
|
+
backgroundColor: AppColors.graySurface,
|
|
139
|
+
borderWidth: 1,
|
|
140
|
+
borderColor: AppColors.dividerColor,
|
|
141
|
+
},
|
|
142
|
+
cardSkeleton: {
|
|
143
|
+
backgroundColor: AppColors.primaryLight,
|
|
144
|
+
borderRadius: 10,
|
|
145
|
+
padding: 12,
|
|
146
|
+
marginBottom: 8,
|
|
147
|
+
borderWidth: 1,
|
|
148
|
+
borderColor: AppColors.dividerColor,
|
|
149
|
+
},
|
|
150
|
+
cardTopRow: {
|
|
151
|
+
flexDirection: 'row',
|
|
152
|
+
justifyContent: 'space-between',
|
|
153
|
+
alignItems: 'center',
|
|
154
|
+
marginBottom: 8,
|
|
155
|
+
},
|
|
156
|
+
badgeGroup: {
|
|
157
|
+
flexDirection: 'row',
|
|
158
|
+
alignItems: 'center',
|
|
159
|
+
gap: 6,
|
|
160
|
+
},
|
|
161
|
+
statusBadgeSkeleton: {
|
|
162
|
+
width: 38,
|
|
163
|
+
height: 18,
|
|
164
|
+
borderRadius: 4,
|
|
165
|
+
backgroundColor: AppColors.graySurface,
|
|
166
|
+
},
|
|
167
|
+
methodBadgeSkeleton: {
|
|
168
|
+
width: 44,
|
|
169
|
+
height: 18,
|
|
170
|
+
borderRadius: 4,
|
|
171
|
+
backgroundColor: AppColors.graySurface,
|
|
172
|
+
},
|
|
173
|
+
timeSkeleton: {
|
|
174
|
+
width: 48,
|
|
175
|
+
height: 12,
|
|
176
|
+
borderRadius: 4,
|
|
177
|
+
backgroundColor: AppColors.graySurface,
|
|
178
|
+
},
|
|
179
|
+
urlLineLong: {
|
|
180
|
+
height: 13,
|
|
181
|
+
borderRadius: 4,
|
|
182
|
+
backgroundColor: AppColors.graySurface,
|
|
183
|
+
marginBottom: 5,
|
|
184
|
+
width: '90%',
|
|
185
|
+
},
|
|
186
|
+
urlLineShort: {
|
|
187
|
+
height: 11,
|
|
188
|
+
borderRadius: 4,
|
|
189
|
+
backgroundColor: AppColors.graySurface,
|
|
190
|
+
marginBottom: 8,
|
|
191
|
+
width: '55%',
|
|
192
|
+
},
|
|
193
|
+
cardBottomRow: {
|
|
194
|
+
flexDirection: 'row',
|
|
195
|
+
gap: 8,
|
|
196
|
+
marginTop: 2,
|
|
197
|
+
},
|
|
198
|
+
metaPillSkeleton: {
|
|
199
|
+
width: 52,
|
|
200
|
+
height: 14,
|
|
201
|
+
borderRadius: 4,
|
|
202
|
+
backgroundColor: AppColors.graySurface,
|
|
203
|
+
},
|
|
204
|
+
});
|
|
205
|
+
|
|
206
|
+
export default SkeletonPlaceholder;
|
package/src/constants/version.ts
CHANGED
package/src/index.tsx
CHANGED
|
@@ -2245,7 +2245,7 @@ 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/
|
|
2248
|
+
export {default as SkeletonPlaceholder} from './components/SkeletonPlaceholder';
|
|
2249
2249
|
|
|
2250
2250
|
export {
|
|
2251
2251
|
connectReduxStore,
|