andry/EMS-ESP32
1
0
Fork 0
mirror of https://github.com/emsesp/EMS-ESP32.git synced 2025-12-07 08:19:52 +03:00
Code Issues Packages Projects Releases Wiki Activity

translate network

Browse Source
This commit is contained in:
Proddy
2022-08-28 16:36:04 +02:00
parent 3ea71e1dfb
commit 1ccacdc600
13 changed files with 285 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
interface/src/components/loading/FormLoader.tsx
View File

@@ -5,6 +5,8 @@ import RefreshIcon from '@mui/icons-material/Refresh';
import { MessageBox } from '..';
import { useI18nContext } from '../../i18n/i18n-react';
interface FormLoaderProps {
message?: string;
errorMessage?: string;
@@ -12,12 +14,14 @@ interface FormLoaderProps {
}
const FormLoader: FC<FormLoaderProps> = ({ errorMessage, onRetry, message = 'Loading…' }) => {
const { LL } = useI18nContext();
if (errorMessage) {
return (
<MessageBox my={2} level="error" message={errorMessage}>
{onRetry && (
<Button startIcon={<RefreshIcon />} variant="contained" color="error" onClick={onRetry}>
Retry
{LL.RETRY()}
</Button>
)}
</MessageBox>

34
interface/src/components/loading/LoadingSpinner.tsx
View File

@@ -2,23 +2,29 @@ import { FC } from 'react';
import { CircularProgress, Box, Typography, Theme } from '@mui/material';
import { useI18nContext } from '../../i18n/i18n-react';
interface LoadingSpinnerProps {
height?: number | string;
}
const LoadingSpinner: FC<LoadingSpinnerProps> = ({ height = '100%' }) => (
<Box display="flex" alignItems="center" justifyContent="center" flexDirection="column" padding={2} height={height}>
<CircularProgress
sx={(theme: Theme) => ({
margin: theme.spacing(4),
color: theme.palette.text.secondary
})}
size={100}
/>
<Typography variant="h4" color="textSecondary">
Loading&hellip;
</Typography>
</Box>
);
const LoadingSpinner: FC<LoadingSpinnerProps> = ({ height = '100%' }) => {
const { LL } = useI18nContext();
return (
<Box display="flex" alignItems="center" justifyContent="center" flexDirection="column" padding={2} height={height}>
<CircularProgress
sx={(theme: Theme) => ({
margin: theme.spacing(4),
color: theme.palette.text.secondary
})}
size={100}
/>
<Typography variant="h4" color="textSecondary">
{LL.LOADING()}&hellip;
</Typography>
</Box>
);
};
export default LoadingSpinner;