lazy load ReactPlayer + ReactMarkdown

Author: raheeliftikhar5

client/packages/lowcoder-design/src/components/audio.tsx

@@ -1,8 +1,10 @@
 import { CSSProperties } from "react";
-import { Ref } from "react";
-import ReactPlayer from "react-player";
+import { lazy, Ref } from "react";
+import type {default as ReactPlayerType} from "react-player";
 import styled from "styled-components";
 
+const ReactPlayer = lazy(() => import("react-player"));
+
 const Audio = styled(ReactPlayer)`
   height: 32px !important;
 `;
@@ -14,7 +16,7 @@ export function TacoAudio(props: {
   onEnded?: () => void;
   className?: string;
   style?: CSSProperties;
-  audioRef?: Ref<ReactPlayer>;
+  audioRef?: Ref<ReactPlayerType>;
   autoPlay?: boolean;
   loop?: boolean;
 }) {

client/packages/lowcoder-design/src/components/markdown.tsx

@@ -1,9 +1,12 @@
 import { css } from "styled-components";
-import ReactMarkdown from "react-markdown";
+import { lazy } from "react";
+// import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
 import remarkGfm from "remark-gfm";
-import { ReactMarkdownOptions } from "react-markdown/lib/react-markdown";
+import type { ReactMarkdownOptions } from "react-markdown/lib/react-markdown";
+
+const ReactMarkdown = lazy(() => import('react-markdown'));
 
 export const markdownCompCss = css`
   .markdown-body {

client/packages/lowcoder-design/src/components/video.tsx

@@ -1,7 +1,10 @@
-import ReactPlayer from "react-player";
+// import ReactPlayer from "react-player";
+import { lazy } from 'react';
 import styled from "styled-components";
 import { videoPlayTriangle } from "icons";
 
+const ReactPlayer = lazy(() => import("react-player"));
+
 export const Video = styled(ReactPlayer)`
   height: 100% !important;
   width: 100% !important;