fix: [PE-725] CGN merchant categories list details transition header

ts/features/bonus/cgn/components/merchants/CgnMerchantListSkeleton.tsx

@@ -3,14 +3,22 @@ import { Divider, IOVisualCostants } from "@pagopa/io-app-design-system";
 import { View } from "react-native";
 import Placeholder from "rn-placeholder";
 
-export function CgnMerchantListSkeleton() {
+type Props = {
+  hasIcons?: boolean;
+};
+
+export function CgnMerchantListSkeleton(props: Props) {
+  const { hasIcons = false } = props;
+
   return (
-    <View>
+    <View testID="CgnMerchantListSkeleton">
       {new Array(6).fill(null).map((_, index) => (
-        <View key={index}>
+        <View key={index} testID={`CgnMerchantListSkeleton-Item-${index}`}>
           <View
             style={{
-              paddingHorizontal: IOVisualCostants.appMarginDefault
+              paddingHorizontal: hasIcons
+                ? 0
+                : IOVisualCostants.appMarginDefault
             }}
           >
             <Placeholder.Box
@@ -21,6 +29,7 @@ export function CgnMerchantListSkeleton() {
               style={{
                 marginVertical: 13
               }}
+              testID={`CgnMerchantListSkeleton-Placeholder-${index}`}
             />
           </View>
           <Divider />

ts/features/bonus/cgn/screens/merchants/CgnMerchantCategoriesListScreen.tsx

@@ -1,4 +1,3 @@
-import * as pot from "@pagopa/ts-commons/lib/pot";
 import {
   Badge,
   Body,
@@ -9,30 +8,32 @@ import {
   ListItemAction,
   ListItemNav
 } from "@pagopa/io-app-design-system";
-import * as React from "react";
-import { FlatList, RefreshControl, View } from "react-native";
+import * as pot from "@pagopa/ts-commons/lib/pot";
+import { useNavigation } from "@react-navigation/native";
 import { pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
-import { useNavigation } from "@react-navigation/native";
+import * as React from "react";
+import { FlatList, RefreshControl, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ProductCategoryWithNewDiscountsCount } from "../../../../../../definitions/cgn/merchants/ProductCategoryWithNewDiscountsCount";
-import { getCategorySpecs } from "../../utils/filters";
 import I18n from "../../../../../i18n";
 import { IOStackNavigationProp } from "../../../../../navigation/params/AppParamsList";
-import { CgnDetailsParamsList } from "../../navigation/params";
 import { useIODispatch, useIOSelector } from "../../../../../store/hooks";
-import { cgnCategoriesListSelector } from "../../store/reducers/categories";
-import { cgnCategories } from "../../store/actions/categories";
-import CGN_ROUTES from "../../navigation/routes";
-import { useIOBottomSheetAutoresizableModal } from "../../../../../utils/hooks/bottomSheet";
 import { isDesignSystemEnabledSelector } from "../../../../../store/reducers/persistedPreferences";
+import { useIOBottomSheetAutoresizableModal } from "../../../../../utils/hooks/bottomSheet";
+import { CgnDetailsParamsList } from "../../navigation/params";
+import CGN_ROUTES from "../../navigation/routes";
+import { cgnCategories } from "../../store/actions/categories";
+import { cgnCategoriesListSelector } from "../../store/reducers/categories";
+import { getCategorySpecs } from "../../utils/filters";
+import { CgnMerchantListSkeleton } from "../../components/merchants/CgnMerchantListSkeleton";
 
 export const CgnMerchantCategoriesListScreen = () => {
   const insets = useSafeAreaInsets();
-  const isFirstRender = React.useRef<boolean>(true);
   const dispatch = useIODispatch();
+  const [isRefreshing, setIsRefreshing] = React.useState(false);
+  const [isPullRefresh, setIsPullRefresh] = React.useState(false);
   const potCategories = useIOSelector(cgnCategoriesListSelector);
-
   const isDesignSystemEnabled = useIOSelector(isDesignSystemEnabledSelector);
 
   const navigation =
@@ -53,8 +54,15 @@ export const CgnMerchantCategoriesListScreen = () => {
   });
 
   const loadCategories = () => {
+    setIsRefreshing(true);
     dispatch(cgnCategories.request());
   };
+
+  const onPullRefresh = () => {
+    setIsPullRefresh(true);
+    dispatch(cgnCategories.request());
+  };
+
   React.useEffect(loadCategories, [dispatch]);
 
   const isError = React.useMemo(
@@ -63,13 +71,18 @@ export const CgnMerchantCategoriesListScreen = () => {
   );
 
   React.useEffect(() => {
-    if (!isFirstRender.current && isError) {
+    if (isError) {
       IOToast.error(I18n.t("global.genericError"));
     }
-    // eslint-disable-next-line functional/immutable-data
-    isFirstRender.current = false;
   }, [isError]);
 
+  React.useEffect(() => {
+    if (pot.isSome(potCategories) && !pot.isLoading(potCategories)) {
+      setIsRefreshing(false);
+      setIsPullRefresh(false);
+    }
+  }, [potCategories]);
+
   const renderCategoryElement = (
     category: ProductCategoryWithNewDiscountsCount,
     i: number
@@ -120,7 +133,8 @@ export const CgnMerchantCategoriesListScreen = () => {
     <>
       {bottomSheet}
       <FlatList
-        data={categoriesToArray}
+        ListEmptyComponent={() => <CgnMerchantListSkeleton hasIcons />}
+        data={isRefreshing ? [] : categoriesToArray}
         style={[
           IOStyles.horizontalContentPadding,
           IOStyles.flex,
@@ -130,8 +144,8 @@ export const CgnMerchantCategoriesListScreen = () => {
         renderItem={({ item, index }) => renderCategoryElement(item, index)}
         refreshControl={
           <RefreshControl
-            refreshing={pot.isLoading(potCategories)}
-            onRefresh={loadCategories}
+            refreshing={isPullRefresh}
+            onRefresh={onPullRefresh}
           />
         }
         ItemSeparatorComponent={() => <Divider />}