Added skeleton fetching screen on Picking screen - #447
Conversation
awalkowiak
left a comment
awalkowiak
left a comment
There was a problem hiding this comment.
I think it lgtm, but I'll wait for the backend to be merged first
There was a problem hiding this comment.
🟡 Changes recommended
The counts-loading flag should be reset when re-fetching so the skeleton accurately reflects subsequent refreshes, and list keys should use stable identifiers (item.code) to avoid remount issues.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR adds a shimmer/skeleton UI to the Picking “Pick Type” screen so the options + form don’t render until pick-task counts have finished loading, improving perceived responsiveness during the initial fetch.
Changes:
- Added a
PickingPickTypeSkeletoncomponent that mirrors the pick-type option list and form layout with shimmer placeholders. - Added skeleton-specific styles for radio/title/subtitle/count/input/button placeholders.
- Updated
PickingPickTypeScreento render the skeleton until counts fetch completes.
File summaries
| File | Description |
|---|---|
src/screens/Picking/styles.ts |
Adds style tokens for shimmer blocks (radio/title/subtitle/count/input/button). |
src/screens/Picking/PickingPickTypeSkeleton.tsx |
Introduces a skeleton component for the pick-type options + form layout. |
src/screens/Picking/PickingPickTypeScreen.tsx |
Tracks counts-load completion and conditionally renders skeleton vs. real UI. |
Review details
- Files reviewed: 3/3 changed files
- Comments generated: 3
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| const fetchCounts = React.useCallback(() => { | ||
| dispatch( | ||
| getPickTaskCountsAction(({ response, errorMessage }) => { | ||
| setHasLoadedCounts(true); | ||
| if (errorMessage || !response?.data) { | ||
| Alert.alert('Error', 'Failed to load pick task counts. Please try again.'); | ||
| return; |
| <TouchableOpacity | ||
| key={item.label} | ||
| activeOpacity={0.7} | ||
| style={[styles.optionRow, isLast && styles.optionRowLast, selected && styles.optionRowSelected]} | ||
| onPress={() => setDeliveryType(item)} | ||
| > |
| <View key={item.label} style={[styles.optionRow, isLast && styles.optionRowLast]}> | ||
| <ShimmerBlock style={styles.radioSkeleton} /> | ||
|
|
PickingSkeletonFetching.webm