feat: 为富文本编辑器表单项添加加载动画。

src/commons/editor/vditor.tsx

@@ -1,10 +1,11 @@
 import { createStyles, FormControl, FormHelperText, FormLabel, makeStyles } from '@material-ui/core';
-import { FieldHookConfig, useField } from 'formik';
+import { Skeleton } from "@material-ui/lab";
-import React, { FC, useEffect, useRef, useState } from 'react';
+import { FieldHookConfig, useField } from "formik";
-import Vditor from 'vditor';
+import React, { FC, useEffect, useRef, useState } from "react";
-import 'vditor/src/assets/scss/index.scss';
+import Vditor from "vditor";
+import "vditor/src/assets/scss/index.scss";
 
-type Props = (FieldHookConfig<string>) & {
+type Props = FieldHookConfig<string> & {
   label?: string;
   className?: string;
 };
@@ -12,13 +13,13 @@ type Props = (FieldHookConfig<string>) & {
 const useStyles = makeStyles((theme) =>
   createStyles({
     formControl: {
-      width: '100%',
+      width: "100%",
     },
   })
 );
 
 export const Editor: FC<Props> = ({ label, className, ...props }) => {
-  const [field, meta, helpers] = useField(props);
+  const [, meta, helpers] = useField(props);
   const editor = useRef<HTMLDivElement>(null);
   const [instance, setInstance] = useState<Vditor | null>(() => null);
   const [containerKey] = useState(() => Math.random().toString(36).slice(2, 8));
@@ -36,10 +37,13 @@ export const Editor: FC<Props> = ({ label, className, ...props }) => {
       value: meta.initialValue,
       input: (val) => helpers.setValue(val),
       blur: () => helpers.setTouched(true),
+      after: () => {
+        setInstance(_instance);
+      },
     });
-    setInstance(_instance);
+
     return () => {
-      instance?.destroy();
+      _instance?.destroy();
     };
   }, []);
 
@@ -49,6 +53,15 @@ export const Editor: FC<Props> = ({ label, className, ...props }) => {
       <FormLabel>{label}</FormLabel>
       <div className={className} ref={editor} key={containerKey}></div>
       {meta.error && <FormHelperText error={true}>{meta.error}</FormHelperText>}
+      {instance ? null : (
+        <Skeleton
+          variant="rect"
+          animation="wave"
+          height="100%"
+          width="100%"
+          style={{ position: "absolute" }}
+        />
+      )}
     </FormControl>
   );
 };