Merge branch 'master' into SIW-980-add-identification-spid-provider-l…

…ist-screen

ts/features/services/institution/components/ServiceListSkeleton.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { View } from "react-native";
+import {
+  Divider,
+  IOListItemStyles,
+  IOStyles
+} from "@pagopa/io-app-design-system";
+import Placeholder from "rn-placeholder";
+
+const ServiceListItemSkeleton = () => (
+  <View style={IOListItemStyles.listItem} accessible={false}>
+    <View style={IOListItemStyles.listItemInner}>
+      <View style={IOStyles.flex}>
+        <Placeholder.Box animate="fade" radius={8} width={"60%"} height={16} />
+      </View>
+    </View>
+  </View>
+);
+
+type ServiceListSkeletonProps = {
+  size?: number;
+};
+
+export const ServiceListSkeleton = ({ size = 3 }: ServiceListSkeletonProps) => (
+  <View testID="intitution-services-list-skeleton">
+    {Array.from({ length: size }).map((_, index) => (
+      <React.Fragment key={index}>
+        <ServiceListItemSkeleton />
+        {index < size - 1 ? <Divider /> : undefined}
+      </React.Fragment>
+    ))}
+  </View>
+);

ts/features/services/institution/hooks/useServicesFetcher.tsx

@@ -1,3 +1,4 @@
+import { useCallback, useEffect, useState } from "react";
 import { useIODispatch, useIOSelector } from "../../../../store/hooks";
 import { paginatedServicesGet } from "../store/actions";
 import {
@@ -9,7 +10,7 @@ import {
   paginatedServicesSelector
 } from "../store/reducers";
 
-const LIMIT: number = 10;
+const LIMIT: number = 20;
 
 export const useServicesFetcher = (institutionId: string) => {
   const dispatch = useIODispatch();
@@ -21,34 +22,52 @@ export const useServicesFetcher = (institutionId: string) => {
   const isUpdating = useIOSelector(isUpdatingPaginatedServicesSelector);
   const isError = useIOSelector(isErrorPaginatedServicesSelector);
 
-  const fetchPage = (page: number) => {
-    if (!isLoading && !isUpdating) {
-      dispatch(
-        paginatedServicesGet.request({
-          institutionId,
-          offset: page * LIMIT,
-          limit: LIMIT
-        })
-      );
-    }
-  };
+  const [isRefreshing, setIsRefreshing] = useState<boolean>(false);
 
-  const fetchServices = (page: number) => {
-    if (isLastPage) {
-      return;
+  useEffect(() => {
+    if (isRefreshing && !isUpdating) {
+      setIsRefreshing(false);
     }
+  }, [isRefreshing, isUpdating]);
 
-    fetchPage(page);
-  };
+  const fetchPage = useCallback(
+    (page: number) => {
+      if (!isLoading && !isUpdating) {
+        dispatch(
+          paginatedServicesGet.request({
+            institutionId,
+            offset: page * LIMIT,
+            limit: LIMIT
+          })
+        );
+      }
+    },
+    [dispatch, institutionId, isLoading, isUpdating]
+  );
+
+  const fetchServices = useCallback(
+    (page: number) => {
+      if (isLastPage) {
+        return;
+      }
+
+      fetchPage(page);
+    },
+    [isLastPage, fetchPage]
+  );
 
-  const refreshServices = () => fetchPage(0);
+  const refreshServices = useCallback(() => {
+    setIsRefreshing(true);
+    fetchPage(0);
+  }, [fetchPage]);
 
   return {
     currentPage,
     data: paginatedServices,
     isError,
     isLoading,
     isUpdating,
+    isRefreshing,
     fetchServices,
     refreshServices
   };