diff --git a/packages/designer/src/builtin-simulator/create-simulator.ts b/packages/designer/src/builtin-simulator/create-simulator.ts
index 686e61de1..0c74bd0f6 100644
--- a/packages/designer/src/builtin-simulator/create-simulator.ts
+++ b/packages/designer/src/builtin-simulator/create-simulator.ts
@@ -90,19 +90,8 @@ export function createSimulator(
 <html class="engine-design-mode">
   <head><meta charset="utf-8"/>
     ${styleFrags}
-    <style>
-      #engine-skeleton-wrapper {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 90vh;
-      }
-    </style>
   </head>
   <body>
-    <div id="app">
-      <div id="engine-skeleton-wrapper"><img width="154" height="100" src="https://img.alicdn.com/tfs/TB1CmVgayERMeJjy0FcXXc7opXa-308-200.gif" /></div>
-    </div>
     ${scriptFrags}
   </body>
 </html>`);
diff --git a/packages/designer/src/project/project-view.tsx b/packages/designer/src/project/project-view.tsx
index 2152513d9..e3f32f4e2 100644
--- a/packages/designer/src/project/project-view.tsx
+++ b/packages/designer/src/project/project-view.tsx
@@ -4,8 +4,26 @@ import { Designer } from '../designer';
 import { BuiltinSimulatorHostView } from '../builtin-simulator';
 import './project.less';
 
+class Loading extends Component {
+  render() {
+    return (
+      <div id="engine-loading-wrapper">
+        <img width="154" height="100" src="https://img.alicdn.com/tfs/TB1CmVgayERMeJjy0FcXXc7opXa-308-200.gif" />
+      </div>
+    );
+  }
+}
+
 @observer
 export class ProjectView extends Component<{ designer: Designer }> {
+  componentDidMount() {
+    const { designer } = this.props;
+    const { project } = designer;
+
+    project.onRendererReady(() => {
+      this.forceUpdate();
+    });
+  }
   render() {
     const { designer } = this.props;
     const { project } = designer;
@@ -15,6 +33,7 @@ export class ProjectView extends Component<{ designer: Designer }> {
     return (
       <div className="lc-project">
         <div className="lc-simulator-shell">
+          {!project?.simulator?.renderer && <Loading />}
           <Simulator {...simulatorProps} />
         </div>
       </div>
diff --git a/packages/designer/src/project/project.less b/packages/designer/src/project/project.less
index a83e983e2..1959f7ade 100644
--- a/packages/designer/src/project/project.less
+++ b/packages/designer/src/project/project.less
@@ -18,3 +18,10 @@
     height: 100%;
   }
 }
+
+#engine-loading-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 90vh;
+}
diff --git a/packages/designer/src/simulator.ts b/packages/designer/src/simulator.ts
index ee97dca95..36f77b279 100644
--- a/packages/designer/src/simulator.ts
+++ b/packages/designer/src/simulator.ts
@@ -1,6 +1,7 @@
 import { Component as ReactComponent, ComponentType } from 'react';
 import { ComponentMetadata, NodeSchema } from '@ali/lowcode-types';
 import { ISensor, Point, ScrollTarget, IScrollable, LocateEvent, LocationData } from './designer';
+import { BuiltinSimulatorRenderer } from './builtin-simulator/renderer';
 import { Node, ParentalNode } from './document';
 
 export type AutoFit = '100%';
@@ -76,6 +77,7 @@ export interface ISimulatorHost<P = object> extends ISensor {
   readonly viewport: IViewport;
   readonly contentWindow?: Window;
   readonly contentDocument?: Document;
+  readonly renderer?: BuiltinSimulatorRenderer;
 
   // dependsAsset // like react jQuery lodash
   // themesAsset
diff --git a/packages/editor-core/src/config.ts b/packages/editor-core/src/config.ts
index e0b4686ff..7e0734ef8 100644
--- a/packages/editor-core/src/config.ts
+++ b/packages/editor-core/src/config.ts
@@ -46,11 +46,11 @@ export interface EngineOptions {
   /**
    * 禁止默认的设置面板，默认值：false
    */
-  disableDefaultSettingPanel: boolean,
+  disableDefaultSettingPanel: boolean;
   /**
    * 禁止默认的设置器，默认值：false
    */
-  disableDefaultSetters: boolean,
+  disableDefaultSetters: boolean;
   /**
    * Vision-polyfill settings
    */
