optimizations

interface/src/components/loading/FormLoader.tsx

@@ -1,3 +1,5 @@
+import { memo } from 'react';
+
 import RefreshIcon from '@mui/icons-material/Refresh';
 import { Box, Button, CircularProgress } from '@mui/material';
 
@@ -9,7 +11,7 @@ interface FormLoaderProps {
   onRetry?: () => void;
 }
 
-const FormLoader = ({ errorMessage, onRetry }: FormLoaderProps) => {
+const FormLoaderComponent = ({ errorMessage, onRetry }: FormLoaderProps) => {
   const { LL } = useI18nContext();
 
   if (errorMessage) {
@@ -38,4 +40,6 @@ const FormLoader = ({ errorMessage, onRetry }: FormLoaderProps) => {
   );
 };
 
+const FormLoader = memo(FormLoaderComponent);
+
 export default FormLoader;

interface/src/components/loading/LazyLoader.tsx

@@ -1,20 +1,22 @@
 import { memo } from 'react';
 
 import { Box, CircularProgress } from '@mui/material';
+import type { SxProps, Theme } from '@mui/material';
+
+// Extract styles to prevent recreation on every render
+const containerStyles: SxProps<Theme> = {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  minHeight: '200px',
+  backgroundColor: 'background.default',
+  borderRadius: 1,
+  border: '1px solid',
+  borderColor: 'divider'
+};
 
 const LazyLoader = memo(() => (
-  <Box
-    display="flex"
-    justifyContent="center"
-    alignItems="center"
-    minHeight="200px"
-    sx={{
-      backgroundColor: 'background.default',
-      borderRadius: 1,
-      border: '1px solid',
-      borderColor: 'divider'
-    }}
-  >
+  <Box sx={containerStyles}>
     <CircularProgress size={40} />
   </Box>
 ));

interface/src/components/loading/LoadingSpinner.tsx

@@ -1,10 +1,18 @@
+import { memo } from 'react';
+
 import { Box, CircularProgress } from '@mui/material';
-import type { Theme } from '@mui/material';
+import type { SxProps, Theme } from '@mui/material';
 
 interface LoadingSpinnerProps {
   height?: number | string;
 }
 
+// Extract styles to prevent recreation on every render
+const circularProgressStyles: SxProps<Theme> = (theme: Theme) => ({
+  margin: theme.spacing(4),
+  color: theme.palette.text.secondary
+});
+
 const LoadingSpinner = ({ height = '100%' }: LoadingSpinnerProps) => {
   return (
     <Box
@@ -15,15 +23,9 @@ const LoadingSpinner = ({ height = '100%' }: LoadingSpinnerProps) => {
       padding={2}
       height={height}
     >
-      <CircularProgress
-        sx={(theme: Theme) => ({
-          margin: theme.spacing(4),
-          color: theme.palette.text.secondary
-        })}
-        size={100}
-      />
+      <CircularProgress sx={circularProgressStyles} size={100} />
     </Box>
   );
 };
 
-export default LoadingSpinner;
+export default memo(LoadingSpinner);