@pagopa/io-app-design-system 5.1.3 → 5.2.0

package/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap

@@ -1395,86 +1395,64 @@ exports[`Test List Item Components - Experimental Enabled  ListItemTransaction S
       }
     >
       <View
-        collapsable={false}
         style={
-          {
-            "opacity": 0.5,
-          }
-        }
-      >
-        <View
-          height={44}
-          radius={8}
-          style={
+          [
             {
-              "backgroundColor": "#efefef",
+              "backgroundColor": "#E8EBF1",
+              "borderCurve": "continuous",
               "borderRadius": 8,
               "height": 44,
               "width": 44,
-            }
-          }
-          width={44}
-        />
-      </View>
+            },
+            {
+              "opacity": 0.75,
+            },
+          ]
+        }
+      />
     </View>
     <View
       style={
         {
-          "flex": 1,
+          "display": "flex",
+          "flexDirection": "column",
+          "flexGrow": 1,
+          "gap": 4,
         }
       }
     >
       <View
-        collapsable={false}
         style={
-          {
-            "opacity": 0.5,
-          }
-        }
-      >
-        <View
-          height={16}
-          radius={8}
-          style={
+          [
             {
-              "backgroundColor": "#efefef",
+              "backgroundColor": "#E8EBF1",
+              "borderCurve": "continuous",
               "borderRadius": 8,
               "height": 16,
               "width": 62,
-            }
-          }
-          width={62}
-        />
-      </View>
-      <View
-        style={
-          {
-            "height": 4,
-          }
+            },
+            {
+              "opacity": 0.75,
+            },
+          ]
         }
       />
       <View
-        collapsable={false}
         style={
-          {
-            "opacity": 0.5,
-          }
-        }
-      >
-        <View
-          height={16}
-          radius={8}
-          style={
+          [
             {
-              "backgroundColor": "#efefef",
+              "backgroundColor": "#E8EBF1",
+              "borderCurve": "continuous",
               "borderRadius": 8,
               "height": 16,
               "width": 107,
-            }
-          }
-          width={107}
-        />
-      </View>
+            },
+            {
+              "opacity": 0.75,
+            },
+          ]
+        }
+      />
     </View>
     <View
       style={
@@ -1484,27 +1462,21 @@ exports[`Test List Item Components - Experimental Enabled  ListItemTransaction S
       }
     >
       <View
-        collapsable={false}
         style={
-          {
-            "opacity": 0.5,
-          }
-        }
-      >
-        <View
-          height={24}
-          radius={8}
-          style={
+          [
             {
-              "backgroundColor": "#efefef",
+              "backgroundColor": "#E8EBF1",
+              "borderCurve": "continuous",
               "borderRadius": 8,
               "height": 24,
               "width": 70,
-            }
-          }
-          width={70}
-        />
-      </View>
+            },
+            {
+              "opacity": 0.75,
+            },
+          ]
+        }
+      />
     </View>
   </View>
 </View>
@@ -2978,86 +2950,64 @@ exports[`Test List Item Components ListItemTransaction Snapshot 1`] = `
       }
     >
       <View
-        collapsable={false}
         style={
-          {
-            "opacity": 0.5,
-          }
-        }
-      >
-        <View
-          height={44}
-          radius={8}
-          style={
+          [
             {
-              "backgroundColor": "#efefef",
+              "backgroundColor": "#E8EBF1",
+              "borderCurve": "continuous",
               "borderRadius": 8,
               "height": 44,
               "width": 44,
-            }
-          }
-          width={44}
-        />
-      </View>
+            },
+            {
+              "opacity": 0.75,
+            },
+          ]
+        }
+      />
     </View>
     <View
       style={
         {
-          "flex": 1,
+          "display": "flex",
+          "flexDirection": "column",
+          "flexGrow": 1,
+          "gap": 4,
         }
       }
     >
       <View
-        collapsable={false}
         style={
-          {
-            "opacity": 0.5,
-          }
-        }
-      >
-        <View
-          height={16}
-          radius={8}
-          style={
+          [
             {
-              "backgroundColor": "#efefef",
+              "backgroundColor": "#E8EBF1",
+              "borderCurve": "continuous",
               "borderRadius": 8,
               "height": 16,
               "width": 62,
-            }
-          }
-          width={62}
-        />
-      </View>
-      <View
-        style={
-          {
-            "height": 4,
-          }
+            },
+            {
+              "opacity": 0.75,
+            },
+          ]
         }
       />
       <View
-        collapsable={false}
         style={
-          {
-            "opacity": 0.5,
-          }
-        }
-      >
-        <View
-          height={16}
-          radius={8}
-          style={
+          [
             {
-              "backgroundColor": "#efefef",
+              "backgroundColor": "#E8EBF1",
+              "borderCurve": "continuous",
               "borderRadius": 8,
               "height": 16,
               "width": 107,
-            }
-          }
-          width={107}
-        />
-      </View>
+            },
+            {
+              "opacity": 0.75,
+            },
+          ]
+        }
+      />
     </View>
     <View
       style={
@@ -3067,27 +3017,21 @@ exports[`Test List Item Components ListItemTransaction Snapshot 1`] = `
       }
     >
       <View
-        collapsable={false}
         style={
-          {
-            "opacity": 0.5,
-          }
-        }
-      >
-        <View
-          height={24}
-          radius={8}
-          style={
+          [
             {
-              "backgroundColor": "#efefef",
+              "backgroundColor": "#E8EBF1",
+              "borderCurve": "continuous",
               "borderRadius": 8,
               "height": 24,
               "width": 70,
-            }
-          }
-          width={70}
-        />
-      </View>
+            },
+            {
+              "opacity": 0.75,
+            },
+          ]
+        }
+      />
     </View>
   </View>
 </View>

package/src/components/modules/ModuleAttachment.tsx

@@ -1,11 +1,11 @@
 import React, { useCallback } from "react";
 import { GestureResponderEvent, PressableProps } from "react-native";
-import Placeholder from "rn-placeholder";
 import { IOListItemVisualParams, useIOTheme } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { Icon } from "../icons";
 import { LoadingSpinner } from "../loadingSpinner";
+import { IOSkeleton } from "../skeleton";
 import { HStack, VStack } from "../stack";
 import { Body } from "../typography";
 import { ModuleStatic } from "./ModuleStatic";
@@ -165,8 +165,8 @@ const ModuleAttachmentSkeleton = ({
     accessibilityState={{ busy: true }}
     startBlock={
       <VStack space={4}>
-        <Placeholder.Box animate="fade" radius={8} width={114} height={16} />
-        <Placeholder.Box animate="fade" radius={16} width={42} height={20} />
+        <IOSkeleton shape="rectangle" radius={8} width={114} height={16} />
+        <IOSkeleton shape="rectangle" radius={16} width={42} height={20} />
       </VStack>
     }
   />

package/src/components/modules/ModuleCheckout.tsx

@@ -6,7 +6,6 @@ import {
   StyleSheet,
   View
 } from "react-native";
-import Placeholder from "rn-placeholder";
 import {
   IOSelectionListItemVisualParams,
   IOSpacingScale,
@@ -14,8 +13,9 @@ import {
 } from "../../core";
 import { ButtonLink } from "../buttons";
 import { IOLogoPaymentType, LogoPayment } from "../logos";
+import { IOSkeleton } from "../skeleton";
 import { HStack, VStack } from "../stack";
-import { H6, BodySmall } from "../typography";
+import { BodySmall, H6 } from "../typography";
 import { ModuleStatic } from "./ModuleStatic";
 import { PressableModuleBase } from "./PressableModuleBase";
 
@@ -112,15 +112,15 @@ const ModuleCheckoutSkeleton = ({
     accessibilityState={{ busy: true }}
     startBlock={
       <HStack space={8} style={{ alignItems: "center" }}>
-        <Placeholder.Box animate="fade" radius={8} height={24} width={24} />
+        <IOSkeleton shape="square" size={24} radius={8} />
         <VStack space={8}>
-          <Placeholder.Box animate="fade" radius={8} height={20} width={170} />
-          <Placeholder.Box animate="fade" radius={8} height={16} width={110} />
+          <IOSkeleton shape="rectangle" width={170} height={20} radius={8} />
+          <IOSkeleton shape="rectangle" width={110} height={16} radius={8} />
         </VStack>
       </HStack>
     }
     endBlock={
-      <Placeholder.Box animate="fade" width={64} height={16} radius={8} />
+      <IOSkeleton shape="rectangle" width={64} height={16} radius={8} />
     }
   />
 );

package/src/components/modules/ModuleCredential.tsx

@@ -5,7 +5,6 @@ import {
   ImageURISource,
   StyleSheet
 } from "react-native";
-import Placeholder from "rn-placeholder";
 import {
   IOListItemVisualParams,
   IOSelectionListItemVisualParams,
@@ -18,6 +17,7 @@ import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
 import { LoadingSpinner } from "../loadingSpinner";
+import { IOSkeleton } from "../skeleton";
 import { HStack } from "../stack/Stack";
 import { BodySmall } from "../typography";
 import { ModuleStatic } from "./ModuleStatic";
@@ -159,12 +159,12 @@ const ModuleCredentialSkeleton = ({
         style={{ alignItems: "center" }}
         space={IOVisualCostants.iconMargin as IOSpacer}
       >
-        <Placeholder.Box animate="fade" width={24} height={24} radius={8} />
-        <Placeholder.Box animate="fade" width={96} height={16} radius={8} />
+        <IOSkeleton shape="square" size={24} radius={8} />
+        <IOSkeleton shape="rectangle" width={96} height={16} radius={8} />
       </HStack>
     }
     endBlock={
-      <Placeholder.Box animate="fade" width={64} height={24} radius={16} />
+      <IOSkeleton shape="rectangle" width={64} height={24} radius={16} />
     }
   />
 );

package/src/components/modules/ModuleNavigation.tsx

@@ -6,7 +6,6 @@ import {
   StyleSheet,
   View
 } from "react-native";
-import Placeholder from "rn-placeholder";
 import {
   IOListItemVisualParams,
   IOSelectionListItemVisualParams,
@@ -14,12 +13,13 @@ import {
   IOVisualCostants,
   useIOTheme
 } from "../../core";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
+import { IOSkeleton } from "../skeleton";
 import { HStack, VStack } from "../stack";
-import { LabelMini, BodySmall } from "../typography";
-import { useIOFontDynamicScale } from "../../utils/accessibility";
+import { BodySmall, LabelMini } from "../typography";
 import { ModuleStatic } from "./ModuleStatic";
 import {
   PressableModuleBase,
@@ -128,15 +128,15 @@ const ModuleNavigationSkeleton = ({
         style={{ alignItems: "center" }}
         space={IOVisualCostants.iconMargin as IOSpacer}
       >
-        <Placeholder.Box animate="fade" width={24} height={24} radius={8} />
+        <IOSkeleton shape="square" size={24} radius={8} />
         <VStack space={4}>
-          <Placeholder.Box animate="fade" width={96} height={16} radius={8} />
-          <Placeholder.Box animate="fade" width={160} height={12} radius={8} />
+          <IOSkeleton shape="rectangle" width={96} height={16} radius={8} />
+          <IOSkeleton shape="rectangle" width={160} height={12} radius={8} />
         </VStack>
       </HStack>
     }
     endBlock={
-      <Placeholder.Box animate="fade" width={64} height={24} radius={16} />
+      <IOSkeleton shape="rectangle" width={64} height={24} radius={16} />
     }
   />
 );

package/src/components/modules/ModulePaymentNotice.tsx

@@ -1,12 +1,12 @@
 import * as React from "react";
 import { GestureResponderEvent, StyleSheet, View } from "react-native";
-import Placeholder from "rn-placeholder";
 import { IOListItemVisualParams, IOSpacer, useIOTheme } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { Icon } from "../icons";
+import { IOSkeleton } from "../skeleton";
 import { HStack, VStack } from "../stack";
-import { Body, H6, BodySmall } from "../typography";
+import { Body, BodySmall, H6 } from "../typography";
 import { ModuleStatic } from "./ModuleStatic";
 import { PressableModuleBase } from "./PressableModuleBase";
 
@@ -172,12 +172,12 @@ const ModulePaymentNoticeSkeleton = ({
     accessibilityState={{ busy: true }}
     startBlock={
       <VStack space={4}>
-        <Placeholder.Box animate="fade" radius={8} width={120} height={12} />
-        <Placeholder.Box animate="fade" radius={8} width={180} height={16} />
+        <IOSkeleton shape="rectangle" width={120} height={12} radius={8} />
+        <IOSkeleton shape="rectangle" width={180} height={16} radius={8} />
       </VStack>
     }
     endBlock={
-      <Placeholder.Box animate="fade" radius={16} width={64} height={24} />
+      <IOSkeleton shape="rectangle" width={64} height={24} radius={16} />
     }
   />
 );

package/src/components/skeleton/IOSkeleton.tsx

@@ -0,0 +1,107 @@
+import React, { useEffect, useMemo } from "react";
+import { ColorValue, DimensionValue, ViewStyle } from "react-native";
+import Animated, {
+  cancelAnimation,
+  Easing,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming
+} from "react-native-reanimated";
+import { IOColors, useIOTheme } from "../../core";
+import { WithTestID } from "../../utils/types";
+
+const ANIMATION_DURATION = 1250;
+const [OPACITY_MIN, OPACITY_MAX] = [0.35, 0.75];
+const OPACITY_REDUCED_MOTION = (OPACITY_MAX + OPACITY_MIN) / 2;
+
+type IOSkeletonSquare = {
+  shape: "square";
+  size: number;
+  radius?: number;
+  width?: never;
+  height?: never;
+};
+
+type IOSkeletonRectangle = {
+  shape: "rectangle";
+  width: DimensionValue;
+  height: number;
+  radius?: number;
+  size?: never;
+};
+
+export type IOSkeleton = WithTestID<
+  (IOSkeletonSquare | IOSkeletonRectangle) & {
+    color?: ColorValue;
+  }
+>;
+
+export const IOSkeleton = ({
+  shape,
+  size,
+  width,
+  height,
+  radius: borderRadius,
+  color,
+  testID
+}: IOSkeleton) => {
+  const reduceMotion = useReducedMotion();
+  const theme = useIOTheme();
+
+  const opacity = useSharedValue(
+    reduceMotion ? OPACITY_REDUCED_MOTION : OPACITY_MAX
+  );
+
+  const backgroundColor = color ?? IOColors[theme["skeleton-background"]];
+
+  const baseStyle: ViewStyle = useMemo(
+    () => ({
+      backgroundColor,
+      width: shape === "square" ? size : width,
+      height: shape === "square" ? size : height,
+      borderRadius,
+      borderCurve: "continuous"
+    }),
+    [backgroundColor, shape, size, width, height, borderRadius]
+  );
+
+  useEffect(() => {
+    if (reduceMotion) {
+      // eslint-disable-next-line functional/immutable-data
+      opacity.value = OPACITY_REDUCED_MOTION;
+      return;
+    }
+
+    const animationSequence = withRepeat(
+      withSequence(
+        withTiming(OPACITY_MIN, {
+          duration: ANIMATION_DURATION / 2,
+          easing: Easing.inOut(Easing.sin)
+        }),
+        withTiming(OPACITY_MAX, {
+          duration: ANIMATION_DURATION / 2,
+          easing: Easing.inOut(Easing.sin)
+        })
+      ),
+      -1,
+      true
+    );
+
+    // eslint-disable-next-line functional/immutable-data
+    opacity.value = animationSequence;
+
+    return () => {
+      cancelAnimation(opacity);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [reduceMotion]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value
+  }));
+
+  return <Animated.View testID={testID} style={[baseStyle, animatedStyle]} />;
+};

package/src/components/skeleton/index.tsx

@@ -0,0 +1 @@
+export * from "./IOSkeleton";

package/src/core/IOColors.ts

@@ -244,6 +244,7 @@ const themeKeys = [
   "divider-default",
   "divider-bottomBar",
   "pdfViewer-background",
+  "skeleton-background",
   // Tab Item
   "tab-item-border-default",
   "tab-item-foreground-default",
@@ -313,6 +314,7 @@ export const IOThemeLight: IOTheme = {
   "divider-default": "grey-200",
   "divider-bottomBar": "grey-200",
   "pdfViewer-background": "grey-700",
+  "skeleton-background": "grey-100",
   // Tab Item
   "tab-item-border-default": "grey-300",
   "tab-item-foreground-default": "black",
@@ -381,6 +383,7 @@ export const IOThemeDark: IOTheme = {
   "divider-header": "grey-850",
   "divider-default": "grey-850",
   "divider-bottomBar": "grey-850",
+  "skeleton-background": "grey-850",
   // Status
   errorIcon: "error-400",
   errorText: "error-400",