@playcanvas/blocks
Version:
High level abstract 3D primitives for React
33 lines • 1.34 kB
JavaScript
"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useRef, useState } from "react";
import { useAssetViewer } from "./splat-viewer-context";
import { cn } from "../lib/utils";
export function Progress({ variant = "top", className, style }) {
const { subscribe } = useAssetViewer();
const ref = useRef(null);
const [visible, setVisible] = useState(true);
const timeoutRef = useRef(null);
useEffect(() => {
const unsubscribe = subscribe((progress) => {
if (!ref.current)
return;
ref.current.style.width = `${progress * 100}%`;
if (progress >= 1) {
timeoutRef.current = setTimeout(() => setVisible(false), 500);
}
else {
setVisible(true);
}
});
return () => {
unsubscribe();
if (timeoutRef.current)
clearTimeout(timeoutRef.current);
};
}, [subscribe]);
if (!visible)
return null;
return (_jsx("div", { ref: ref, className: cn("absolute left-0 w-full h-1 bg-accent transition-[width] duration-300 will-change-[width]", variant === "top" && "top-0", variant === "bottom" && "bottom-0", className), style: { width: "0%", ...style } }));
}
//# sourceMappingURL=progress-indicator.js.map