handling loading state and request done with results

src/screens/HomePageWithPaymentOptions.tsx

@@ -59,7 +59,16 @@ const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWith
 								flexWrap={"wrap"}
 								rowGap={"m"}
 							>
-								{paymentTypesWithActiveStatus.map((paymentType) => (
+								{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={() =>