glam/frontend/src/hooks/useSchemaLoadingProgress.ts
2025-12-10 13:01:13 +01:00

55 lines
1.4 KiB
TypeScript

/**
* Hook for tracking LinkML schema loading progress
*/
import { useState, useEffect } from 'react';
import { linkmlSchemaService, type SchemaLoadingProgress } from '../lib/linkml/linkml-schema-service';
export interface UseSchemaLoadingProgressResult {
progress: SchemaLoadingProgress | null;
isLoading: boolean;
isComplete: boolean;
}
/**
* Hook that subscribes to LinkML schema loading progress
*
* @returns Object containing progress state, loading status, and completion status
*
* @example
* ```tsx
* const { progress, isLoading, isComplete } = useSchemaLoadingProgress();
*
* if (isLoading && progress) {
* return (
* <div>
* <p>{progress.message}</p>
* <progress value={progress.percent} max={100} />
* </div>
* );
* }
* ```
*/
export function useSchemaLoadingProgress(): UseSchemaLoadingProgressResult {
const [progress, setProgress] = useState<SchemaLoadingProgress | null>(null);
useEffect(() => {
// Subscribe to progress updates
const unsubscribe = linkmlSchemaService.onProgress((newProgress) => {
setProgress(newProgress);
});
// Trigger initialization if not already loading
linkmlSchemaService.initialize().catch(console.error);
return unsubscribe;
}, []);
return {
progress,
isLoading: progress !== null && progress.phase !== 'complete',
isComplete: progress?.phase === 'complete',
};
}
export default useSchemaLoadingProgress;