diff --git a/common/changes/@xarc/react/fix-create-dynamic-fallback_2025-01-02-15-01.json b/common/changes/@xarc/react/fix-create-dynamic-fallback_2025-01-02-15-01.json
new file mode 100644
index 000000000..a6ad53128
--- /dev/null
+++ b/common/changes/@xarc/react/fix-create-dynamic-fallback_2025-01-02-15-01.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@xarc/react",
+      "comment": "use fallback props in create Dynamic component",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@xarc/react"
+}
\ No newline at end of file
diff --git a/packages/xarc-react/src/common/create-component.tsx b/packages/xarc-react/src/common/create-component.tsx
index 1a5345b0f..07428d38d 100644
--- a/packages/xarc-react/src/common/create-component.tsx
+++ b/packages/xarc-react/src/common/create-component.tsx
@@ -45,7 +45,7 @@ export class SubAppComponent extends Component {
     this._options = props.__options;
     this.resolveName = this._options.resolveName || this.subapp.resolveName;
     this.state = this.makeState();
-    this.loading = <div>subapp {this.subapp.name} component loading... </div>;
+    this.loading = this._options.fallback || <div>subapp {this.subapp.name} component loading... </div>;
     this._info = { component: this, subapp: props.__subapp, type: "dynamic" };
     this.subapp._mount(this._info);
   }
diff --git a/samples/subapp2-poc/src/static.tsx b/samples/subapp2-poc/src/static.tsx
index 69547838c..6d7816c1f 100644
--- a/samples/subapp2-poc/src/static.tsx
+++ b/samples/subapp2-poc/src/static.tsx
@@ -4,7 +4,7 @@ import { xarcV2 } from "@xarc/react";
 import { demo1 } from "./home";
 import custom from "./styles/custom.module.css"; // eslint-disable-line no-unused-vars
 
-const Demo1 = createDynamicComponent(demo1, { ssr: true });
+const Demo1 = createDynamicComponent(demo1, { ssr: true, fallback: <div>Loading...</div>});
 
 xarcV2.debug("static.tsx");
 const StaticHome = props => {