From 145c9cb427093782809b38a7574bc8965e95ca98 Mon Sep 17 00:00:00 2001
From: druchniewicz <druchniewicz@soldevelo.com>
Date: Mon, 7 Sep 2026 17:48:29 +0200
Subject: [PATCH] Added skeleton fetching screen on Picking screen

---
 src/screens/Picking/PickingPickTypeScreen.tsx | 132 ++++++++++--------
 .../Picking/PickingPickTypeSkeleton.tsx       |  43 ++++++
 src/screens/Picking/styles.ts                 |  40 ++++++
 3 files changed, 153 insertions(+), 62 deletions(-)
 create mode 100644 src/screens/Picking/PickingPickTypeSkeleton.tsx

diff --git a/src/screens/Picking/PickingPickTypeScreen.tsx b/src/screens/Picking/PickingPickTypeScreen.tsx
index cef0d93b..64e7b829 100644
--- a/src/screens/Picking/PickingPickTypeScreen.tsx
+++ b/src/screens/Picking/PickingPickTypeScreen.tsx
@@ -10,6 +10,7 @@ import { DeliveryType, DeliveryTypeCode, DeliveryTypeOrderCount } from '../../ty
 import Theme from '../../utils/Theme';
 import { DELIVERY_TYPES, PRIORITY_LABELS } from './constants';
 import { usePickingContext } from './PickingContext';
+import PickingPickTypeSkeleton from './PickingPickTypeSkeleton';
 import styles from './styles';
 
 const NUMBER_OF_ORDERS_THRESHOLD = 10;
@@ -21,10 +22,12 @@ export default function PickingPickTypeScreen() {
   const [deliveryType, setDeliveryType] = React.useState<DeliveryType | null>(DELIVERY_TYPES[0]);
   const [numberOfOrdersToGroup, setNumberOfOrdersToGroup] = React.useState<string>('');
   const [counts, setCounts] = React.useState<Record<string, DeliveryTypeOrderCount>>({});
+  const [hasLoadedCounts, setHasLoadedCounts] = React.useState<boolean>(false);
 
   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;
@@ -99,69 +102,74 @@ export default function PickingPickTypeScreen() {
         <Paragraph>Please select the appropriate pick type and specify the number of orders to group.</Paragraph>
       </View>
 
-      <View style={styles.optionsCard}>
-        {DELIVERY_TYPES.map((item, index) => {
-          const selected = isSelected(item);
-          const count = counts[item.code];
-          const isEmpty = !count || count.availableCount === 0;
-          const priorityLabel = item.code === DeliveryTypeCode.DEFAULT ? undefined : PRIORITY_LABELS[item.priority];
-          const isLast = index === DELIVERY_TYPES.length - 1;
-
-          return (
-            <TouchableOpacity
-              key={item.label}
-              activeOpacity={0.7}
-              style={[styles.optionRow, isLast && styles.optionRowLast, selected && styles.optionRowSelected]}
-              onPress={() => setDeliveryType(item)}
+      {!hasLoadedCounts ? (
+        <PickingPickTypeSkeleton />
+      ) : (
+        <>
+          <View style={styles.optionsCard}>
+            {DELIVERY_TYPES.map((item, index) => {
+              const selected = isSelected(item);
+              const count = counts[item.code];
+              const isEmpty = !count || count.availableCount === 0;
+              const priorityLabel = item.code === DeliveryTypeCode.DEFAULT ? undefined : PRIORITY_LABELS[item.priority];
+              const isLast = index === DELIVERY_TYPES.length - 1;
+
+              return (
+                <TouchableOpacity
+                  key={item.label}
+                  activeOpacity={0.7}
+                  style={[styles.optionRow, isLast && styles.optionRowLast, selected && styles.optionRowSelected]}
+                  onPress={() => setDeliveryType(item)}
+                >
+                  <RadioButton
+                    value={item.code}
+                    color={Theme.colors.primary}
+                    status={selected ? 'checked' : 'unchecked'}
+                    onPress={() => setDeliveryType(item)}
+                  />
+
+                  <View style={styles.optionRowContent}>
+                    <View>
+                      <Paragraph style={styles.optionTitle}>{item.label}</Paragraph>
+                      {priorityLabel ? <Paragraph style={styles.optionSubtitle}>{priorityLabel}</Paragraph> : null}
+                    </View>
+
+                    <View style={styles.countWrapper}>
+                      <Paragraph style={[styles.countValue, isEmpty && styles.countValueEmpty]}>
+                        {count ? count.availableCount : 0}
+                      </Paragraph>
+                      <Paragraph style={styles.countCaption}>Orders</Paragraph>
+                    </View>
+                  </View>
+                </TouchableOpacity>
+              );
+            })}
+          </View>
+
+          <View style={styles.formWrapper}>
+            <PaperTextInput
+              autoCompleteType="off"
+              style={[styles.marginTopSmall, styles.whiteInput]}
+              label="Orders to Group"
+              mode="outlined"
+              keyboardType="numeric"
+              value={numberOfOrdersToGroup}
+              onChangeText={setNumberOfOrdersToGroup}
+              onSubmitEditing={handleRetrievePickTasks}
+            />
+
+            <Button
+              mode="contained"
+              style={styles.marginTop}
+              contentStyle={styles.ctaContent}
+              disabled={!deliveryType || !numberOfOrdersToGroup}
+              onPress={handleRetrievePickTasks}
             >
-              <RadioButton
-                value={item.code}
-                color={Theme.colors.primary}
-                status={selected ? 'checked' : 'unchecked'}
-                onPress={() => setDeliveryType(item)}
-              />
-
-              <View style={styles.optionRowContent}>
-                <View>
-                  <Paragraph style={styles.optionTitle}>{item.label}</Paragraph>
-                  {priorityLabel ? <Paragraph style={styles.optionSubtitle}>{priorityLabel}</Paragraph> : null}
-                </View>
-
-                {/* Count is always rendered: shows 0 until counts load */}
-                <View style={styles.countWrapper}>
-                  <Paragraph style={[styles.countValue, isEmpty && styles.countValueEmpty]}>
-                    {count ? count.availableCount : 0}
-                  </Paragraph>
-                  <Paragraph style={styles.countCaption}>Orders</Paragraph>
-                </View>
-              </View>
-            </TouchableOpacity>
-          );
-        })}
-      </View>
-
-      <View style={styles.formWrapper}>
-        <PaperTextInput
-          autoCompleteType="off"
-          style={[styles.marginTopSmall, styles.whiteInput]}
-          label="Orders to Group"
-          mode="outlined"
-          keyboardType="numeric"
-          value={numberOfOrdersToGroup}
-          onChangeText={setNumberOfOrdersToGroup}
-          onSubmitEditing={handleRetrievePickTasks}
-        />
-
-        <Button
-          mode="contained"
-          style={styles.marginTop}
-          contentStyle={styles.ctaContent}
-          disabled={!deliveryType || !numberOfOrdersToGroup}
-          onPress={handleRetrievePickTasks}
-        >
-          Retrieve Pick Tasks
-        </Button>
-      </View>
+              Retrieve Pick Tasks
+            </Button>
+          </View>
+        </>
+      )}
     </ScrollView>
   );
 }
diff --git a/src/screens/Picking/PickingPickTypeSkeleton.tsx b/src/screens/Picking/PickingPickTypeSkeleton.tsx
new file mode 100644
index 00000000..c18692d8
--- /dev/null
+++ b/src/screens/Picking/PickingPickTypeSkeleton.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { ShimmerBlock } from '../../components/ContentSkeleton';
+import { DeliveryTypeCode } from '../../types/picking';
+import { DELIVERY_TYPES } from './constants';
+import styles from './styles';
+
+export default function PickingPickTypeSkeleton() {
+  return (
+    <>
+      <View style={styles.optionsCard}>
+        {DELIVERY_TYPES.map((item, index) => {
+          const isLast = index === DELIVERY_TYPES.length - 1;
+          const hasPriorityLabel = item.code !== DeliveryTypeCode.DEFAULT;
+
+          return (
+            <View key={item.label} style={[styles.optionRow, isLast && styles.optionRowLast]}>
+              <ShimmerBlock style={styles.radioSkeleton} />
+
+              <View style={styles.optionRowContent}>
+                <View>
+                  <ShimmerBlock style={styles.optionTitleSkeleton} />
+                  {hasPriorityLabel ? <ShimmerBlock style={styles.optionSubtitleSkeleton} /> : null}
+                </View>
+
+                <View style={styles.countWrapper}>
+                  <ShimmerBlock style={styles.countValueSkeleton} />
+                  <ShimmerBlock style={styles.countCaptionSkeleton} />
+                </View>
+              </View>
+            </View>
+          );
+        })}
+      </View>
+
+      <View style={styles.formWrapper}>
+        <ShimmerBlock style={[styles.marginTopSmall, styles.inputSkeleton]} />
+        <ShimmerBlock style={[styles.marginTop, styles.buttonSkeleton]} />
+      </View>
+    </>
+  );
+}
diff --git a/src/screens/Picking/styles.ts b/src/screens/Picking/styles.ts
index a8e566aa..d51bea1f 100644
--- a/src/screens/Picking/styles.ts
+++ b/src/screens/Picking/styles.ts
@@ -93,6 +93,46 @@ export default StyleSheet.create({
   whiteInput: {
     backgroundColor: 'white'
   },
+  radioSkeleton: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    margin: 8
+  },
+  optionTitleSkeleton: {
+    width: 120,
+    height: 14,
+    borderRadius: 4,
+    marginVertical: 3
+  },
+  optionSubtitleSkeleton: {
+    width: 56,
+    height: 12,
+    borderRadius: 4,
+    marginVertical: 2
+  },
+  countValueSkeleton: {
+    width: 20,
+    height: 14,
+    borderRadius: 4,
+    marginVertical: 2
+  },
+  countCaptionSkeleton: {
+    width: 34,
+    height: 9,
+    borderRadius: 4,
+    marginVertical: 2
+  },
+  inputSkeleton: {
+    width: '100%',
+    height: 64,
+    borderRadius: 4
+  },
+  buttonSkeleton: {
+    width: '100%',
+    height: 48,
+    borderRadius: 4
+  },
   ctaContent: {
     height: 48
   },