useDataLoader

function useDataLoader(): {
  loadFile: (file: File) => Promise<HandleArray<Data>>;
  loadFileFromUrl: (url: string) => Promise<HandleArray<Data>>;
  loadFolder: (files: File[]) => Promise<HandleArray<Data>>;
  loadFolderFromUrls: (urls: readonly string[]) => Promise<HandleArray<Data>>;
  loadBuffer: (buffer: ArrayBufferLike, filename: string) => Promise<HandleArray<Data>>;
  isLoading: boolean;
  progress: DataLoaderProgress | null;
  error: Error | null;
  reset: () => void;
};

{
  loadFile: (file: File) => Promise<HandleArray<Data>>;
  loadFileFromUrl: (url: string) => Promise<HandleArray<Data>>;
  loadFolder: (files: File[]) => Promise<HandleArray<Data>>;
  loadFolderFromUrls: (urls: readonly string[]) => Promise<HandleArray<Data>>;
  loadBuffer: (buffer: ArrayBufferLike, filename: string) => Promise<HandleArray<Data>>;
  isLoading: boolean;
  progress: DataLoaderProgress | null;
  error:   | Error
     | null;
  reset: () => void;
}

function LoadButton() {
  const { loadFileFromUrl, isLoading, progress, error } = useDataLoader();
  return (
    <>
      <button onClick={() => loadFileFromUrl('/data/ct.nii.gz')} disabled={isLoading}>
        Load CT
      </button>
      {isLoading && progress && <p>{Math.round((progress.received / (progress.total ?? 1)) * 100)}%</p>}
      {error && <p>Error: {error.message}</p>}
    </>
  );
}