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 = ({