@etsoo/materialui 1.2.36 → 1.2.38

package/lib/UserAvatarEditor.js

@@ -27,7 +27,6 @@ export function UserAvatarEditor(props) {
     const labels = Labels.UserAvatarEditor;
     // Ref
     const ref = React.createRef();
-    const [AE, setAvatarEditor] = React.useState();
     // Button ref
     const buttonRef = React.createRef();
     // Preview image state
@@ -111,15 +110,15 @@ export function UserAvatarEditor(props) {
             onDone(data, toBlob);
         }
     };
-    React.useEffect(() => {
-        import("react-avatar-editor").then((result) => setAvatarEditor(result.default));
-    }, []);
+    // Load the component
+    const AE = React.lazy(() => import("react-avatar-editor"));
     return (React.createElement(Stack, { direction: "column", spacing: 0.5, width: containerWidth },
         React.createElement(Button, { variant: "outlined", size: "medium", component: "label", startIcon: React.createElement(ComputerIcon, null), fullWidth: true },
             labels.upload,
             React.createElement("input", { id: "fileInput", type: "file", accept: "image/png, image/jpeg", multiple: false, hidden: true, onChange: handleFileChange })),
         React.createElement(Stack, { direction: "row", spacing: 0.5 },
-            AE == null ? (React.createElement(Skeleton, { variant: "rounded", width: width, height: height })) : (React.createElement(AE, { ref: ref, border: border, width: width, height: height, onLoadSuccess: handleLoad, image: previewImage !== null && previewImage !== void 0 ? previewImage : "", scale: editorState.scale, rotate: editorState.rotate })),
+            React.createElement(React.Suspense, { fallback: React.createElement(Skeleton, { variant: "rounded", width: width, height: height }) },
+                React.createElement(AE, { ref: ref, border: border, width: width, height: height, onLoadSuccess: handleLoad, image: previewImage !== null && previewImage !== void 0 ? previewImage : "", scale: editorState.scale, rotate: editorState.rotate })),
             React.createElement(ButtonGroup, { size: "small", orientation: "vertical", disabled: !ready },
                 React.createElement(Button, { onClick: () => handleRotate(90), title: labels.rotateRight },
                     React.createElement(RotateRightIcon, null)),

package/lib/app/ReactApp.js

@@ -145,10 +145,11 @@ export class ReactApp extends CoreApp {
         // Same?
         if (culture.name === this.culture)
             return;
-        // Dispatch action
-        dispatch(culture);
         // Super call
-        this.changeCulture(culture);
+        this.changeCulture(culture).then(() => {
+            // Dispatch action
+            dispatch(culture);
+        });
     }
     /**
      * Get date format props

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.2.36",
+  "version": "1.2.38",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/UserAvatarEditor.tsx

@@ -107,8 +107,6 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
   // Ref
   const ref = React.createRef<AvatarEditor>();
 
-  const [AE, setAvatarEditor] = React.useState<typeof AvatarEditor>();
-
   // Button ref
   const buttonRef = React.createRef<HTMLButtonElement>();
 
@@ -214,11 +212,8 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
     }
   };
 
-  React.useEffect(() => {
-    import("react-avatar-editor").then((result) =>
-      setAvatarEditor(result.default)
-    );
-  }, []);
+  // Load the component
+  const AE = React.lazy(() => import("react-avatar-editor"));
 
   return (
     <Stack direction="column" spacing={0.5} width={containerWidth}>
@@ -240,9 +235,11 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
         />
       </Button>
       <Stack direction="row" spacing={0.5}>
-        {AE == null ? (
-          <Skeleton variant="rounded" width={width} height={height} />
-        ) : (
+        <React.Suspense
+          fallback={
+            <Skeleton variant="rounded" width={width} height={height} />
+          }
+        >
           <AE
             ref={ref}
             border={border}
@@ -253,7 +250,7 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
             scale={editorState.scale}
             rotate={editorState.rotate}
           />
-        )}
+        </React.Suspense>
         <ButtonGroup size="small" orientation="vertical" disabled={!ready}>
           <Button onClick={() => handleRotate(90)} title={labels.rotateRight}>
             <RotateRightIcon />

package/src/app/ReactApp.ts

@@ -355,11 +355,11 @@ export class ReactApp<
     // Same?
     if (culture.name === this.culture) return;
 
-    // Dispatch action
-    dispatch(culture);
-
     // Super call
-    this.changeCulture(culture);
+    this.changeCulture(culture).then(() => {
+      // Dispatch action
+      dispatch(culture);
+    });
   }
 
   /**