From 47e40a19a705e89dd0361dd53c3f20bcb33d35ce Mon Sep 17 00:00:00 2001
From: Emanuele Dall'Ara <71103219+LeleDallas@users.noreply.github.com>
Date: Tue, 22 Oct 2024 15:00:06 +0200
Subject: [PATCH] refactor: add skeleton in merchant categories list

---
 .../CgnMerchantCategoriesListScreen.tsx       | 27 ++++++++++++++-----
 .../bonus/cgn/store/reducers/categories.ts    |  2 +-
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/ts/features/bonus/cgn/screens/merchants/CgnMerchantCategoriesListScreen.tsx b/ts/features/bonus/cgn/screens/merchants/CgnMerchantCategoriesListScreen.tsx
index 9e5a70fc5b6..6001e42ba24 100644
--- a/ts/features/bonus/cgn/screens/merchants/CgnMerchantCategoriesListScreen.tsx
+++ b/ts/features/bonus/cgn/screens/merchants/CgnMerchantCategoriesListScreen.tsx
@@ -26,13 +26,14 @@ 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, setIsFirstRender] = React.useState<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(
@@ -66,9 +74,15 @@ export const CgnMerchantCategoriesListScreen = () => {
     if (isError) {
       IOToast.error(I18n.t("global.genericError"));
     }
-    setIsFirstRender(false);
   }, [isError]);
 
+  React.useEffect(() => {
+    if (pot.isSome(potCategories) && !pot.isLoading(potCategories)) {
+      setIsRefreshing(false);
+      setIsPullRefresh(false);
+    }
+  }, [potCategories]);
+
   const renderCategoryElement = (
     category: ProductCategoryWithNewDiscountsCount,
     i: number
@@ -119,7 +133,8 @@ export const CgnMerchantCategoriesListScreen = () => {
     <>
       {bottomSheet}
       <FlatList
-        data={categoriesToArray}
+        ListEmptyComponent={() => <CgnMerchantListSkeleton hasIcons />}
+        data={isRefreshing ? [] : categoriesToArray}
         style={[
           IOStyles.horizontalContentPadding,
           IOStyles.flex,
@@ -129,8 +144,8 @@ export const CgnMerchantCategoriesListScreen = () => {
         renderItem={({ item, index }) => renderCategoryElement(item, index)}
         refreshControl={
           <RefreshControl
-            refreshing={isFirstRender && pot.isLoading(potCategories)}
-            onRefresh={loadCategories}
+            refreshing={isPullRefresh}
+            onRefresh={onPullRefresh}
           />
         }
         ItemSeparatorComponent={() => <Divider />}
diff --git a/ts/features/bonus/cgn/store/reducers/categories.ts b/ts/features/bonus/cgn/store/reducers/categories.ts
index 4ff48d6b9c9..80305e2d577 100644
--- a/ts/features/bonus/cgn/store/reducers/categories.ts
+++ b/ts/features/bonus/cgn/store/reducers/categories.ts
@@ -16,7 +16,7 @@ export type CgnCategoriesState = {
 };
 
 const INITIAL_STATE: CgnCategoriesState = {
-  list: pot.noneLoading
+  list: pot.none
 };
 
 const reducer = (