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 => {