feat(IT Wallet): [SIW-560] Generalize loading component

ts/features/it-wallet/components/ItwLoadingSpinner.tsx

@@ -1,36 +1,28 @@
 import React, { useEffect, useRef } from "react";
 import { StyleSheet, View, ColorValue, Animated, Easing } from "react-native";
-import { IOColors, VSpacer } from "@pagopa/io-app-design-system";
+import { IOColors } from "@pagopa/io-app-design-system";
 import { WithTestID } from "../../../types/WithTestID";
-import { H4 } from "../../../components/core/typography/H4";
-import { H2 } from "../../../components/core/typography/H2";
 
 type Props = WithTestID<{
   captionTitle?: string;
   captionSubtitle?: string;
-  color: ColorValue;
+  color?: ColorValue;
   durationMs?: number;
+  size?: IOLodingSpinnerSizeScale;
 }>;
 
-const height = 76;
+/**
+ * Size scale, 76 is kept for backward compatibility with the old design system but 48 is enough for the new one.
+ * It will be removed in the future.
+ */
+export type IOLodingSpinnerSizeScale = 12 | 16 | 20 | 24 | 30 | 32 | 48 | 76;
 
 const styles = StyleSheet.create({
-  container: {
-    width: height,
-    height,
-    justifyContent: "center",
-    alignItems: "center"
-  },
   progress: {
     width: "100%",
     height: "100%",
-    borderRadius: height / 2,
     borderBottomColor: IOColors.white,
-    borderWidth: 4,
     position: "absolute"
-  },
-  textAlignCenter: {
-    textAlign: "center"
   }
 });
 
@@ -49,9 +41,8 @@ const startRotationAnimation = (
 };
 
 const ItwLoadingSpinner = ({
-  captionTitle,
-  captionSubtitle,
-  color,
+  color = IOColors["blueIO-500"],
+  size = 24,
   durationMs = 1000
 }: Props): React.ReactElement => {
   const rotationDegree = useRef(new Animated.Value(0)).current;
@@ -63,7 +54,7 @@ const ItwLoadingSpinner = ({
   return (
     <>
       <View
-        style={styles.container}
+        style={{ width: size, height: size }}
         accessibilityRole="progressbar"
         testID={"LoadingSpinnerTestID"}
       >
@@ -72,6 +63,8 @@ const ItwLoadingSpinner = ({
           style={[
             styles.progress,
             {
+              borderWidth: 3,
+              borderRadius: size / 2,
               borderTopColor: color,
               borderRightColor: color,
               borderLeftColor: color
@@ -89,18 +82,6 @@ const ItwLoadingSpinner = ({
           ]}
         />
       </View>
-      <VSpacer size={48} />
-      <H2 style={styles.textAlignCenter} testID="LoadingSpinnerCaptionTitleID">
-        {captionTitle}
-      </H2>
-      <VSpacer />
-      <H4
-        weight="Regular"
-        style={styles.textAlignCenter}
-        testID="LoadingSpinnerCaptionSubTitleID"
-      >
-        {captionSubtitle}
-      </H4>
     </>
   );
 };

ts/features/it-wallet/components/ItwLoadingSpinnerOverlay.tsx

@@ -1,6 +1,12 @@
 import * as React from "react";
 import { StyleSheet, View } from "react-native";
-import { IOColors, hexToRgba } from "@pagopa/io-app-design-system";
+import {
+  H2,
+  H4,
+  IOColors,
+  VSpacer,
+  hexToRgba
+} from "@pagopa/io-app-design-system";
 import customVariables from "../../../theme/variables";
 import { Overlay } from "../../../components/ui/Overlay";
 import ItwLoadingSpinner from "./ItwLoadingSpinner";
@@ -11,6 +17,9 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: "center",
     justifyContent: "center"
+  },
+  textAlignCenter: {
+    textAlign: "center"
   }
 });
 
@@ -24,7 +33,8 @@ type Props = Readonly<{
 }>;
 
 /**
- * A Component to display and overlay animated spinner conditionally
+ * A Component to display and overlay animated spinner conditionally.
+ * It can be used to display a loading spinner over a view and also renders a caption title and subtitle.
  */
 const ItwLoadingSpinnerOverlay: React.FunctionComponent<Props> = (
   props: Props
@@ -47,7 +57,23 @@ const ItwLoadingSpinnerOverlay: React.FunctionComponent<Props> = (
               color={IOColors.blue}
               captionTitle={captionTitle}
               captionSubtitle={captionSubtitle}
+              size={76}
             />
+            <VSpacer size={48} />
+            <H2
+              style={styles.textAlignCenter}
+              testID="LoadingSpinnerCaptionTitleID"
+            >
+              {captionTitle}
+            </H2>
+            <VSpacer />
+            <H4
+              weight="Regular"
+              style={styles.textAlignCenter}
+              testID="LoadingSpinnerCaptionSubTitleID"
+            >
+              {captionSubtitle}
+            </H4>
           </View>
         )
       }

ts/features/it-wallet/components/__tests__/ItwLoadingSpinner.test.tsx

@@ -29,23 +29,6 @@ describe("Test ItwLoadingSpinner animated indicator", () => {
     ).props;
     expect(style).toHaveProperty("borderTopColor", "#ABC");
   });
-  it("should render a Loading Animation correctly with caption title and subtitle", () => {
-    const props = {
-      color: "#ABC",
-      captionTitle: "Loading",
-      captionSubtitle: "Please wait"
-    };
-
-    const component = renderComponent({ ...props });
-    const captionTitle = component.getByTestId("LoadingSpinnerCaptionTitleID");
-    const captionSubtitle = component.getByTestId(
-      "LoadingSpinnerCaptionSubTitleID"
-    );
-    expect(captionTitle).toBeTruthy();
-    expect(captionSubtitle).toBeTruthy();
-    expect(captionTitle.props.children).toEqual("Loading");
-    expect(captionSubtitle.props.children).toEqual("Please wait");
-  });
 });
 
 const renderComponent = ({ color, captionTitle, captionSubtitle }: Props) =>