u

src/routes/artikel/vorlagen.jsx

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import { PureComponent, lazy, Suspense } from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
@@ -18,8 +18,6 @@ import AddIcon from '@mui/icons-material/Add';
 import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
 import EditIcon from '@mui/icons-material/Edit';
 import LabelIcon from '@mui/icons-material/Label';
-import { CanvasEditor } from 'react-canvas-label-editor';
-import 'react-canvas-label-editor/style.css';
 import BackendError from '../../components/BackendError';
 import { PanelTile, PanelTileGrid } from 'dashgui/panels';
 import { backendErrorFrom } from '../../utils/backendError';
@@ -28,6 +26,12 @@ import { setLastArticleSku } from '../../automats';
 import { labeltemplate } from '../../api';
 import { enqueueSnackbar } from 'notistack';
 
+const CanvasEditor = lazy(async () => {
+  await import('react-canvas-label-editor/style.css');
+  const mod = await import('react-canvas-label-editor');
+  return { default: mod.CanvasEditor };
+});
+
 const MIN_HEIGHT_MM = 10;
 const DEFAULT_HEIGHT_MM = 25;
 const DEFAULT_DPI = 203;
@@ -401,19 +405,27 @@ class ArtikelVorlagenPage extends PureComponent {
                 />
               </Box>
 
-              <Box sx={{ overflowX: 'auto' }}>
-                <CanvasEditor
-                  width={editorWidth}
-                  height={editorHeight}
-                  minHeight={minHeightPx}
-                  showWidthUI={false}
-                  showHeightUI={false}
-                  dpi={editorDpi}
-                  objects={editorObjects}
-                  onChange={(objects) => this.setState({ editorObjects: objects })}
-                  clipboard={editorClipboard}
-                  onCopy={(obj) => this.setState({ editorClipboard: obj })}
-                />
+              <Box sx={{ overflowX: 'auto', minHeight: minHeightPx }}>
+                <Suspense
+                  fallback={
+                    <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: editorHeight, minHeight: minHeightPx }}>
+                      <CircularProgress size={32} />
+                    </Box>
+                  }
+                >
+                  <CanvasEditor
+                    width={editorWidth}
+                    height={editorHeight}
+                    minHeight={minHeightPx}
+                    showWidthUI={false}
+                    showHeightUI={false}
+                    dpi={editorDpi}
+                    objects={editorObjects}
+                    onChange={(objects) => this.setState({ editorObjects: objects })}
+                    clipboard={editorClipboard}
+                    onCopy={(obj) => this.setState({ editorClipboard: obj })}
+                  />
+                </Suspense>
               </Box>
             </>
           )}