fix: lazy suspense (#750)

packages/materials/form-materials/src/components/code-editor/index.tsx

@@ -3,9 +3,9 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { lazy } from 'react';
+import { lazySuspense } from '@/shared';
 
-export const CodeEditor = lazy(() =>
+export const CodeEditor = lazySuspense(() =>
   import('./editor').then((module) => ({ default: module.CodeEditor }))
 );
 

packages/materials/form-materials/src/components/json-editor-with-variables/index.tsx

@@ -3,9 +3,9 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { lazy } from 'react';
+import { lazySuspense } from '@/shared';
 
-export const JsonEditorWithVariables = lazy(() =>
+export const JsonEditorWithVariables = lazySuspense(() =>
   import('./editor').then((module) => ({ default: module.JsonEditorWithVariables }))
 );
 

packages/materials/form-materials/src/components/prompt-editor-with-inputs/index.tsx

@@ -3,9 +3,9 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { lazy } from 'react';
+import { lazySuspense } from '@/shared';
 
-export const PromptEditorWithInputs = lazy(() =>
+export const PromptEditorWithInputs = lazySuspense(() =>
   import('./editor').then((module) => ({ default: module.PromptEditorWithInputs }))
 );
 

packages/materials/form-materials/src/components/prompt-editor-with-variables/index.tsx

@@ -3,9 +3,9 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { lazy } from 'react';
+import { lazySuspense } from '@/shared';
 
-export const PromptEditorWithVariables = lazy(() =>
+export const PromptEditorWithVariables = lazySuspense(() =>
   import('./editor').then((module) => ({ default: module.PromptEditorWithVariables }))
 );
 

packages/materials/form-materials/src/components/prompt-editor/index.tsx

@@ -3,9 +3,9 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { lazy } from 'react';
+import { lazySuspense } from '@/shared';
 
-export const PromptEditor = lazy(() =>
+export const PromptEditor = lazySuspense(() =>
   import('./editor').then((module) => ({ default: module.PromptEditor }))
 );
 

packages/materials/form-materials/src/shared/index.ts

@@ -7,3 +7,4 @@ export * from './format-legacy-refs';
 export * from './inject-material';
 export * from './flow-value';
 export * from './polyfill-create-root';
+export * from './lazy-suspense';

packages/materials/form-materials/src/shared/lazy-suspense/index.tsx

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { ComponentType, lazy, Suspense } from 'react';
+
+import { Skeleton } from '@douyinfe/semi-ui';
+
+export function withSuspense<T extends ComponentType<any>>(
+  Component: T,
+  fallback?: React.ReactNode
+): T {
+  const WithSuspenseComponent: T = ((props: any) => (
+    <Suspense fallback={fallback || <Skeleton.Paragraph style={{ width: '100%' }} rows={1} />}>
+      <Component {...props} />
+    </Suspense>
+  )) as any;
+
+  return WithSuspenseComponent;
+}
+
+export function lazySuspense<T extends ComponentType<any>>(
+  params: Parameters<typeof lazy<T>>[0],
+  fallback?: React.ReactNode
+) {
+  return withSuspense(lazy(params), fallback);
+}