diff --git a/plugins/devtools/src/alpha/devToolsRouteBlueprint.tsx b/plugins/devtools/src/alpha/devToolsRouteBlueprint.tsx
index fec93854ae..21f25a013a 100644
--- a/plugins/devtools/src/alpha/devToolsRouteBlueprint.tsx
+++ b/plugins/devtools/src/alpha/devToolsRouteBlueprint.tsx
@@ -25,12 +25,12 @@ import { lazy, Suspense, JSX } from 'react';
export interface DevToolsRouteBlueprintParams {
path: string;
title: string;
- loader: () => Promise<{ default: () => JSX.Element }> | (() => JSX.Element);
+ loader: () => Promise<{ default: () => JSX.Element }>;
}
/**
* Extension blueprint for creating DevTools routes
- *
+ *
* @example
* ```tsx
* const myDevToolsRoute = DevToolsRouteBlueprint.make({
@@ -41,7 +41,7 @@ export interface DevToolsRouteBlueprintParams {
* }
* });
* ```
- *
+ *
* @alpha
*/
export const DevToolsRouteBlueprint = createExtensionBlueprint({
@@ -49,23 +49,14 @@ export const DevToolsRouteBlueprint = createExtensionBlueprint({
attachTo: { id: 'page:devtools', input: 'routes' },
output: [devToolsRouteDataRef],
factory(params: DevToolsRouteBlueprintParams) {
- // Handle both sync and async component loading
- const Component = typeof params.loader === 'function'
- ? (() => {
- const result = params.loader();
- if (result instanceof Promise) {
- // Create a lazy component for async loading
- return lazy(() => result);
- }
- // Direct component function
- return result;
-
- })()
- : params.loader;
+ // Create a lazy component for async loading
+ const LazyComponent = lazy(params.loader);
- const children = typeof Component === 'function'
- ? Loading...}>
- : Component;
+ const children = (
+ Loading...}>
+
+
+ );
return [
devToolsRouteDataRef({
@@ -78,4 +69,4 @@ export const DevToolsRouteBlueprint = createExtensionBlueprint({
dataRefs: {
route: devToolsRouteDataRef,
},
-});
\ No newline at end of file
+});