diff --git a/ui/components/ItemDetail/ItemDetail.tsx b/ui/components/ItemDetail/ItemDetail.tsx
index 5aca2b5597..d3bc356afa 100644
--- a/ui/components/ItemDetail/ItemDetail.tsx
+++ b/ui/components/ItemDetail/ItemDetail.tsx
@@ -1,5 +1,5 @@
import { assertUnreachable } from "@/../shared"
-import { Box, Flex, Spinner, Text } from "@chakra-ui/react"
+import { Box, Flex, Text } from "@chakra-ui/react"
import { useContext, useState } from "react"
import { useQuery } from "react-query"
import { LBA_ITEM_TYPE_OLD } from "shared/constants/lbaitem"
@@ -14,6 +14,7 @@ import { SearchResultContext } from "../../context/SearchResultContextProvider"
import { fetchTrainingDetails } from "../../services/fetchTrainingDetails"
import ErrorMessage from "../ErrorMessage"
+import ItemDetailLoading from "./ItemDetailLoading"
import getActualTitle from "./ItemDetailServices/getActualTitle"
import { BuildSwipe, getNavigationButtons } from "./ItemDetailServices/getButtons"
import getTags from "./ItemDetailServices/getTags"
@@ -161,14 +162,11 @@ const ItemDetail = ({ handleClose, handleSelectItem }) => {
-
+
{hasError ? (
) : (
-
- Chargement des informations en cours
-
-
+
)}
diff --git a/ui/components/ItemDetail/ItemDetailLoading.tsx b/ui/components/ItemDetail/ItemDetailLoading.tsx
new file mode 100644
index 0000000000..cd329b62b7
--- /dev/null
+++ b/ui/components/ItemDetail/ItemDetailLoading.tsx
@@ -0,0 +1,96 @@
+import { LBA_ITEM_TYPE_OLD } from "@/../shared/constants/lbaitem"
+import { Box, Image, Progress, SkeletonCircle, SkeletonText, Text } from "@chakra-ui/react"
+import React, { useEffect, useState } from "react"
+
+const ItemDetailLoading = ({ item }) => {
+ const getNextLoadingIllustration = (currentIllustration) => {
+ const currentIndex = loadingIllustrations.findIndex((ill) => ill.src === currentIllustration.src)
+ return loadingIllustrations[(currentIndex + 1) % loadingIllustrations.length]
+ }
+
+ const loadingIllustrations: { src: string; text: string }[] =
+ item.ideaType === LBA_ITEM_TYPE_OLD.FORMATION
+ ? [
+ {
+ src: "/images/loading/training_description.svg",
+ text: "Chargement du descriptif de la formation",
+ },
+ {
+ src: "/images/loading/search_training.svg",
+ text: "Vérification des coordonnées du centre de formation",
+ },
+ {
+ src: "/images/loading/training_help.svg",
+ text: "Lien vers le simulateur d’aides aux alternants",
+ },
+ ]
+ : [
+ {
+ src: "/images/loading/job_description.svg",
+ text: "Chargement du descriptif de l’offre",
+ },
+ {
+ src: "/images/loading/job_contact_info.svg",
+ text: "Vérification des coordonnées de l’entreprise",
+ },
+ {
+ src: "/images/loading/job_help.svg",
+ text: "Lien vers le simulateur d’aides aux alternants",
+ },
+ ]
+
+ const [currentIllustration, setCurrentIllustration] = useState(loadingIllustrations[0])
+
+ useEffect(() => {
+ let interval: NodeJS.Timeout | null = null
+
+ let iterations = 0
+ let current = currentIllustration
+ interval = setInterval(() => {
+ if (iterations < 5) {
+ current = getNextLoadingIllustration(current)
+ setCurrentIllustration(current)
+ } else {
+ setCurrentIllustration({
+ src: "/images/loading/hourglass.svg",
+ text: "Hum... Ce chargement semble plus long que prévu",
+ })
+ clearInterval(interval)
+ }
+ iterations++
+ }, 1000)
+
+ return () => {
+ clearInterval(interval)
+ }
+ }, [item.loadedItemDetail, item.id])
+
+ const resultListProperties = {
+ color: "grey.425",
+ fontWeight: 500,
+ fontSize: "18px",
+ mt: [0, 0, 2],
+ }
+
+ return (
+
+
+
+
+ {currentIllustration.text}
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default ItemDetailLoading
diff --git a/ui/components/ItemDetail/ItemDetailServices/getButtons.tsx b/ui/components/ItemDetail/ItemDetailServices/getButtons.tsx
index 292d91e5b3..cb7fe07c95 100644
--- a/ui/components/ItemDetail/ItemDetailServices/getButtons.tsx
+++ b/ui/components/ItemDetail/ItemDetailServices/getButtons.tsx
@@ -66,14 +66,7 @@ export const BuildSwipe = ({ jobs, trainings, extendedSearch, activeFilters, sel
}
}
-export const getNavigationButtons = ({
- goPrev,
- goNext,
- setSeeInfo = (t) => {
- console.log(t)
- },
- handleClose,
-}) => {
+export const getNavigationButtons = ({ goPrev, goNext, handleClose }) => {
return (
<>
@@ -102,7 +95,6 @@ export const getNavigationButtons = ({