diff --git a/web/src/components/card/ExportCard.tsx b/web/src/components/card/ExportCard.tsx index 3510cb39d..8d5d2eef7 100644 --- a/web/src/components/card/ExportCard.tsx +++ b/web/src/components/card/ExportCard.tsx @@ -6,6 +6,7 @@ import { useMemo, useRef, useState } from "react"; import { isDesktop } from "react-device-detect"; import { FaPlay } from "react-icons/fa"; import Chip from "../indicators/Chip"; +import { Skeleton } from "../ui/skeleton"; type ExportProps = { file: { @@ -18,6 +19,7 @@ export default function ExportCard({ file, onDelete }: ExportProps) { const videoRef = useRef(null); const [hovered, setHovered] = useState(false); const [playing, setPlaying] = useState(false); + const [loading, setLoading] = useState(true); const inProgress = useMemo( () => file.name.startsWith("in_progress"), [file.name], @@ -65,10 +67,14 @@ export default function ExportCard({ file, onDelete }: ExportProps) { preload="auto" muted controls={playing} + onLoadedData={() => setLoading(false)} > )} + {loading && ( + + )} {!playing && (
@@ -79,23 +85,3 @@ export default function ExportCard({ file, onDelete }: ExportProps) {
); } - -/** - * - - {file.name.substring(0, file.name.length - 4)} - - - */ diff --git a/web/src/pages/Export.tsx b/web/src/pages/Export.tsx index 188382b0b..206f3911b 100644 --- a/web/src/pages/Export.tsx +++ b/web/src/pages/Export.tsx @@ -172,16 +172,16 @@ function Export() { -
+
- Select A Camera + Select Camera - Select A Playback Factor + Select Playback {events?.map((event) => { + if (event.data.type != "object") { + return; + } + return (