handling loading state and request done with results

src/screens/HomePageWithPaymentOptions.tsx

@@ -59,16 +59,25 @@ const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWith
 								flexWrap={"wrap"}
 								rowGap={"m"}
 							>
-								{paymentTypesWithActiveStatus.map((paymentType) => (
-									<PaymentOptionContainer key={paymentType.id}>
-										<PaymentOption
-											onPress={() =>
-												navigation.navigate("paymentAmountInputScreen")
-											}
-											paymentMethod={paymentType.code}
-										/>
-									</PaymentOptionContainer>
-								))}
+								{isLoading && (
+									<Box flex={1}>
+										<Text textAlign={"center"}>
+											Chargement des méthodes de paiement...
+										</Text>
+									</Box>
+								)}
+								{!isLoading &&
+									!error &&
+									paymentTypesWithActiveStatus.map((paymentType) => (
+										<PaymentOptionContainer key={paymentType.id}>
+											<PaymentOption
+												onPress={() =>
+													navigation.navigate("paymentAmountInputScreen")
+												}
+												paymentMethod={paymentType.code}
+											/>
+										</PaymentOptionContainer>
+									))}
 							</Box>
 						</Box>
 					</Box>