diff --git a/skyvern-frontend/src/routes/tasks/detail/HTMLArtifact.tsx b/skyvern-frontend/src/routes/tasks/detail/HTMLArtifact.tsx index ce7d281d..a28a18e4 100644 --- a/skyvern-frontend/src/routes/tasks/detail/HTMLArtifact.tsx +++ b/skyvern-frontend/src/routes/tasks/detail/HTMLArtifact.tsx @@ -2,7 +2,7 @@ import { artifactApiClient } from "@/api/AxiosClient"; import { ArtifactApiResponse } from "@/api/types"; import { Skeleton } from "@/components/ui/skeleton"; import { Textarea } from "@/components/ui/textarea"; -import { useQuery } from "@tanstack/react-query"; +import { useQueries } from "@tanstack/react-query"; import axios from "axios"; // https://stackoverflow.com/a/60338028 @@ -27,29 +27,36 @@ function format(html: string) { } type Props = { - artifact: ArtifactApiResponse; + artifacts: Array; }; -function HTMLArtifact({ artifact }: Props) { - const { data, isFetching, isError, error } = useQuery({ - queryKey: ["artifact", artifact.artifact_id], - queryFn: async () => { - if (artifact.uri.startsWith("file://")) { - return artifactApiClient - .get(`/artifact/text`, { - params: { - path: artifact.uri.slice(7), - }, - }) - .then((response) => response.data); - } - if (artifact.uri.startsWith("s3://") && artifact.signed_url) { - return axios.get(artifact.signed_url).then((response) => response.data); - } - }, +function HTMLArtifact({ artifacts }: Props) { + function fetchArtifact(artifact: ArtifactApiResponse) { + if (artifact.uri.startsWith("file://")) { + return artifactApiClient + .get(`/artifact/text`, { + params: { + path: artifact.uri.slice(7), + }, + }) + .then((response) => response.data); + } + if (artifact.uri.startsWith("s3://") && artifact.signed_url) { + return axios.get(artifact.signed_url).then((response) => response.data); + } + } + + const results = useQueries({ + queries: + artifacts?.map((artifact) => { + return { + queryKey: ["artifact", artifact.artifact_id], + queryFn: () => fetchArtifact(artifact), + }; + }) ?? [], }); - if (isFetching) { + if (results.some((result) => result.isLoading)) { return ; } @@ -57,7 +64,11 @@ function HTMLArtifact({ artifact }: Props) {