diff --git a/ts/components/ui/Markdown/LoadingSkeleton.tsx b/ts/components/ui/Markdown/LoadingSkeleton.tsx
index 88912d8b6e1..0dcc35fe7a3 100644
--- a/ts/components/ui/Markdown/LoadingSkeleton.tsx
+++ b/ts/components/ui/Markdown/LoadingSkeleton.tsx
@@ -1,7 +1,7 @@
import React from "react";
import { View } from "react-native";
import Placeholder from "rn-placeholder";
-import { VSpacer } from "@pagopa/io-app-design-system";
+import { IOColors, VSpacer } from "@pagopa/io-app-design-system";
import I18n from "../../../i18n";
type LoadingSkeletonProps = {
@@ -19,23 +19,77 @@ export const LoadingSkeleton = ({ testID }: LoadingSkeletonProps) => (
importantForAccessibility="no-hide-descendants"
accessibilityElementsHidden={true}
>
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
);
diff --git a/ts/features/services/components/CardWithMarkdownContent.tsx b/ts/features/services/components/CardWithMarkdownContent.tsx
index c61e48be5da..8fe9adcf272 100644
--- a/ts/features/services/components/CardWithMarkdownContent.tsx
+++ b/ts/features/services/components/CardWithMarkdownContent.tsx
@@ -2,6 +2,7 @@ import React, { memo } from "react";
import { StyleSheet, View } from "react-native";
import { IOColors } from "@pagopa/io-app-design-system";
import { Markdown } from "../../../components/ui/Markdown/Markdown";
+import { LoadingSkeleton } from "../../../components/ui/Markdown/LoadingSkeleton";
const styles = StyleSheet.create({
card: {
@@ -31,4 +32,10 @@ const CardWithMarkdownContent = memo(
)
);
-export { CardWithMarkdownContent };
+const CardWithMarkdownContentSkeleton = () => (
+
+
+
+);
+
+export { CardWithMarkdownContent, CardWithMarkdownContentSkeleton };
diff --git a/ts/features/services/components/ServiceDetailsHeader.tsx b/ts/features/services/components/ServiceDetailsHeader.tsx
index 80c1bd39fc5..66d6675aebf 100644
--- a/ts/features/services/components/ServiceDetailsHeader.tsx
+++ b/ts/features/services/components/ServiceDetailsHeader.tsx
@@ -3,10 +3,14 @@ import { ImageURISource, StyleSheet, View } from "react-native";
import {
Avatar,
H3,
+ IOColors,
IOSpacingScale,
IOStyles,
- LabelSmall
+ IOVisualCostants,
+ LabelSmall,
+ VSpacer
} from "@pagopa/io-app-design-system";
+import Placeholder from "rn-placeholder";
const ITEM_PADDING_VERTICAL: IOSpacingScale = 6;
const AVATAR_MARGIN_RIGHT: IOSpacingScale = 16;
@@ -46,3 +50,42 @@ export const ServiceDetailsHeader = ({
);
+
+export const ServiceDetailsHeaderSkeleton = () => (
+
+
+
+
+
+
+
+
+
+
+
+
+);
diff --git a/ts/features/services/navigation/navigator.tsx b/ts/features/services/navigation/navigator.tsx
index 406fd332431..9bce544b095 100644
--- a/ts/features/services/navigation/navigator.tsx
+++ b/ts/features/services/navigation/navigator.tsx
@@ -1,36 +1,44 @@
import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
+import { myPortalEnabled } from "../../../config";
+import LegacyServiceDetailsScreen from "../../../screens/services/LegacyServiceDetailsScreen";
+import ServicesWebviewScreen from "../../../screens/services/ServicesWebviewScreen";
+import { useIOSelector } from "../../../store/hooks";
+import { isDesignSystemEnabledSelector } from "../../../store/reducers/persistedPreferences";
import { isGestureEnabled } from "../../../utils/navigation";
-import { isNewServicesEnabled, myPortalEnabled } from "../../../config";
import { ServiceDetailsScreen } from "../screens/ServiceDetailsScreen";
-import ServicesWebviewScreen from "../../../screens/services/ServicesWebviewScreen";
-import LegacyServiceDetailsScreen from "../../../screens/services/LegacyServiceDetailsScreen";
import { ServicesParamsList } from "./params";
import { SERVICES_ROUTES } from "./routes";
const Stack = createStackNavigator();
-const ServicesNavigator = () => (
-
-
- {myPortalEnabled && (
+const ServicesNavigator = () => {
+ const isDesignSystemEnabled = useIOSelector(isDesignSystemEnabledSelector);
+
+ return (
+
- )}
-
-);
+ {myPortalEnabled && (
+
+ )}
+
+ );
+};
export default ServicesNavigator;
diff --git a/ts/features/services/screens/ServiceDetailsScreen.tsx b/ts/features/services/screens/ServiceDetailsScreen.tsx
index a94ecc7e470..8ea1f4d4cd2 100644
--- a/ts/features/services/screens/ServiceDetailsScreen.tsx
+++ b/ts/features/services/screens/ServiceDetailsScreen.tsx
@@ -14,9 +14,15 @@ import { IOStackNavigationRouteProps } from "../../../navigation/params/AppParam
import { loadServiceDetail } from "../../../store/actions/services";
import { useIODispatch, useIOSelector } from "../../../store/hooks";
import { logosForService } from "../../../utils/services";
-import { CardWithMarkdownContent } from "../components/CardWithMarkdownContent";
+import {
+ CardWithMarkdownContent,
+ CardWithMarkdownContentSkeleton
+} from "../components/CardWithMarkdownContent";
import { ServiceDetailsFailure } from "../components/ServiceDetailsFailure";
-import { ServiceDetailsHeader } from "../components/ServiceDetailsHeader";
+import {
+ ServiceDetailsHeader,
+ ServiceDetailsHeaderSkeleton
+} from "../components/ServiceDetailsHeader";
import { ServiceDetailsMetadata } from "../components/ServiceDetailsMetadata";
import { ServiceDetailsPreferences } from "../components/ServiceDetailsPreferences";
import {
@@ -116,7 +122,29 @@ export const ServiceDetailsScreen = ({ route }: ServiceDetailsScreenProps) => {
}
if (isFirstRender || isLoadingService) {
- // TODO: add a loading screen
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
}
const handlePressCta = (cta: CTA) => handleCtaAction(cta, linkTo, serviceId);