59 lines
1.4 KiB
TypeScript
59 lines
1.4 KiB
TypeScript
'use client';
|
||
|
||
import { useEffect, useState } from 'react';
|
||
import { loadComponent } from '@/lib/material-components';
|
||
|
||
const sizeMap = {
|
||
small: '24px',
|
||
medium: '48px',
|
||
large: '64px',
|
||
} as const;
|
||
|
||
export function LoadingSpinner({
|
||
size = 'medium',
|
||
inline = false,
|
||
}: { size?: 'small' | 'medium' | 'large'; inline?: boolean }) {
|
||
const [mounted, setMounted] = useState(false);
|
||
const [componentsLoaded, setComponentsLoaded] = useState(false);
|
||
|
||
useEffect(() => {
|
||
setMounted(true);
|
||
loadComponent('circular-progress').then(() => {
|
||
setComponentsLoaded(true);
|
||
});
|
||
}, []);
|
||
|
||
if (!mounted || !componentsLoaded) {
|
||
if (inline) {
|
||
return (
|
||
<span
|
||
className="material-symbols-outlined"
|
||
style={{ fontSize: sizeMap[size], animation: 'lk-spin 1s linear infinite' }}
|
||
>
|
||
progress_activity
|
||
</span>
|
||
);
|
||
}
|
||
return <div>Загрузка...</div>;
|
||
}
|
||
|
||
return (
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
...(inline ? { padding: 0, width: sizeMap[size], height: sizeMap[size] } : { padding: '20px' }),
|
||
}}
|
||
>
|
||
<md-circular-progress
|
||
indeterminate
|
||
style={{
|
||
width: sizeMap[size],
|
||
height: sizeMap[size],
|
||
}}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|