Merge remote-tracking branch 'origin/v3.4' into dev

interface/src/components/loading/ApplicationError.tsx

@@ -0,0 +1,43 @@
+import { FC } from 'react';
+
+import { Box, Paper, Typography } from '@mui/material';
+import WarningIcon from '@mui/icons-material/Warning';
+
+interface ApplicationErrorProps {
+  message?: string;
+}
+
+const ApplicationError: FC<ApplicationErrorProps> = ({ message }) => (
+  <Box display="flex" height="100vh" justifyContent="center" flexDirection="column">
+    <Paper
+      elevation={10}
+      sx={{
+        textAlign: 'center',
+        padding: '280px 0 40px 0',
+        backgroundImage: 'url("/app/icon.png")',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: '50% 40px',
+        backgroundSize: '200px auto',
+        width: '100%',
+        borderRadius: 0
+      }}
+    >
+      <Box display="flex" flexDirection="row" justifyContent="center" alignItems="center" mb={2}>
+        <WarningIcon fontSize="large" color="error" />
+        <Box ml={2}>
+          <Typography variant="h4">Application Error</Typography>
+        </Box>
+      </Box>
+      <Typography variant="subtitle1" gutterBottom>
+        Failed to configure the application, please refresh to try again.
+      </Typography>
+      {message && (
+        <Typography variant="subtitle2" gutterBottom>
+          {message}
+        </Typography>
+      )}
+    </Paper>
+  </Box>
+);
+
+export default ApplicationError;

interface/src/components/loading/FormLoader.tsx

@@ -0,0 +1,38 @@
+import { FC } from 'react';
+
+import { Box, Button, CircularProgress, Typography } from '@mui/material';
+import RefreshIcon from '@mui/icons-material/Refresh';
+
+import { MessageBox } from '..';
+
+interface FormLoaderProps {
+  message?: string;
+  errorMessage?: string;
+  onRetry?: () => void;
+}
+
+const FormLoader: FC<FormLoaderProps> = ({ errorMessage, onRetry, message = 'Loading…' }) => {
+  if (errorMessage) {
+    return (
+      <MessageBox my={2} level="error" message={errorMessage}>
+        {onRetry && (
+          <Button startIcon={<RefreshIcon />} variant="contained" color="error" onClick={onRetry}>
+            Retry
+          </Button>
+        )}
+      </MessageBox>
+    );
+  }
+  return (
+    <Box m={2} py={2} display="flex" alignItems="center" flexDirection="column">
+      <Box py={2}>
+        <CircularProgress size={100} />
+      </Box>
+      <Typography variant="h6" fontWeight={400} textAlign="center">
+        {message}
+      </Typography>
+    </Box>
+  );
+};
+
+export default FormLoader;

interface/src/components/loading/LoadingSpinner.tsx

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+
+import { CircularProgress, Box, Typography, Theme } from '@mui/material';
+
+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>
+);
+
+export default LoadingSpinner;

interface/src/components/loading/index.ts

@@ -0,0 +1,3 @@
+export { default as ApplicationError } from './ApplicationError';
+export { default as LoadingSpinner } from './LoadingSpinner';
+export { default as FormLoader } from './FormLoader';