/// /** * ProcessingStatus - Reusable loading/progress indicator for previewUI * * Shows: * - Nothing when processing is complete (totalCount > 0 && pendingCount === 0) * - Indeterminate spinner with "Loading..." when fetching items (totalCount === 0) * - Progress bar with "X/Y analyzing..." when processing (totalCount > 0 && pendingCount > 0) * * Usage in previewUI: * ```tsx * * ``` */ import { computed, pattern, UI } from "commontools"; interface ProcessingStatusProps { totalCount: number; pendingCount: number; completedCount: number; } export default pattern( ({ totalCount, pendingCount, completedCount }) => { return { [UI]: (
(totalCount || 0) > 0 && (pendingCount || 0) === 0 ? "none" : "flex", ), alignItems: "center", gap: "6px", marginTop: "4px", height: "16px", }} > {/* Indeterminate loading state (fetching) */}
((totalCount || 0) === 0 ? "flex" : "none"), ), alignItems: "center", gap: "6px", }} > Loading...
{/* Progress state (analyzing) */}
(totalCount || 0) > 0 && (pendingCount || 0) > 0 ? "flex" : "none" ), alignItems: "center", gap: "6px", flex: 1, }} > {completedCount}/{totalCount} analyzing...
), }; }, );