diff --git a/src/components/image-editor/index.tsx b/src/components/image-editor/index.tsx
index 50b8f666..a89e870e 100644
--- a/src/components/image-editor/index.tsx
+++ b/src/components/image-editor/index.tsx
@@ -1,3 +1,4 @@
+import { Spin } from 'antd';
import classNames from 'classnames';
import dayjs from 'dayjs';
import React, {
@@ -9,11 +10,32 @@ import React, {
useRef,
useState
} from 'react';
+import styled from 'styled-components';
import useDrawing from './hooks/use-drawing';
import useZoom from './hooks/use-zoom';
import './index.less';
import { ImageActionsBar, ToolsBar } from './tools-bar';
+const LoadWrapper = styled.div<{ width?: number; height?: number }>`
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ width: ${(props) => `${props.width}px` || '100%'};
+ z-index: 100;
+`;
+const Loading = (props: { width: number; height: number }) => {
+ const { width, height } = props;
+ return (
+
+
+
+ );
+};
+
type Point = { x: number; y: number; lineWidth: number };
type Stroke = Point[];
@@ -58,6 +80,11 @@ const CanvasImageEditor: React.FC = forwardRef(
const negativeMaskRef = useRef(false);
const [invertMask, setInvertMask] = useState(false);
const timer = useRef(null);
+ const [loadingSize, setLoadingSize] = useState({
+ width: 0,
+ height: 0,
+ loading: false
+ });
const {
canvasRef,
@@ -174,7 +201,7 @@ const CanvasImageEditor: React.FC = forwardRef(
console.log('Resetting strokes', currentStroke.current);
}, []);
- const loadMaskPixs = (strokes: Stroke[], isInitial?: boolean) => {
+ const loadMaskPixs = async (strokes: Stroke[], isInitial?: boolean) => {
if (!strokes.length) {
return;
}
@@ -458,7 +485,7 @@ const CanvasImageEditor: React.FC = forwardRef(
useImperativeHandle(ref, () => ({
clearMask: handleDeleteMask,
- loadMaskPixs(strokes: Stroke[]) {
+ loadMaskPixs: async function (strokes: Stroke[]) {
setMaskStrokes(strokes);
setStrokes([]);
setTransform();
@@ -514,6 +541,12 @@ const CanvasImageEditor: React.FC = forwardRef(
flex: 1
}}
>
+ {loadingSize.loading && (
+
+ )}