mirror of
https://github.com/stackblitz-labs/bolt.diy
synced 2025-06-26 18:26:38 +00:00
4d3222ee96
- Move stores/utils/types to their relative directories (i.e chat stores in chat directory) - Move utility files to shared/utils - Move component files to shared/components - Move type definitions to shared/types - Move stores to shared/stores - Update import paths across the project
33 lines
1.2 KiB
TypeScript
33 lines
1.2 KiB
TypeScript
export const LoadingOverlay = ({
|
|
message = 'Loading...',
|
|
progress,
|
|
progressText,
|
|
}: {
|
|
message?: string;
|
|
progress?: number;
|
|
progressText?: string;
|
|
}) => {
|
|
return (
|
|
<div className="fixed inset-0 flex items-center justify-center bg-black/80 z-50 backdrop-blur-sm">
|
|
<div className="relative flex flex-col items-center gap-4 p-8 rounded-lg bg-bolt-elements-background-depth-2 shadow-lg">
|
|
<div
|
|
className={'i-svg-spinners:90-ring-with-bg text-bolt-elements-loader-progress'}
|
|
style={{ fontSize: '2rem' }}
|
|
></div>
|
|
<p className="text-lg text-bolt-elements-textTertiary">{message}</p>
|
|
{progress !== undefined && (
|
|
<div className="w-64 flex flex-col gap-2">
|
|
<div className="w-full h-2 bg-bolt-elements-background-depth-1 rounded-full overflow-hidden">
|
|
<div
|
|
className="h-full bg-bolt-elements-loader-progress transition-all duration-300 ease-out rounded-full"
|
|
style={{ width: `${Math.min(100, Math.max(0, progress))}%` }}
|
|
/>
|
|
</div>
|
|
{progressText && <p className="text-sm text-bolt-elements-textTertiary text-center">{progressText}</p>}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|