Move connect-agent above sources and preload plugin chunks (#494)

- Sources page: render McpInstallCard above the connected sources list so agent-pairing is the primary affordance on an empty workspace. - Add optional `preload` to SourcePlugin and call it from ExecutorPluginsProvider on mount, so navigating into a plugin's add/edit page no longer trips Suspense waiting on the lazy chunk. - Drop the visible "Loading…" Suspense fallback in sources-add — the preload now covers warm sessions, and a flash of nothing is better than a layout-shifting label on cold ones.

Rhys Sullivan committed 6 months ago

Commit b849f921 parent c627c487 files · +71 −21Browse files

Unified · Split

7 files

packages/core/sdk/src/client.ts +10 −0
packages/plugins/google-discovery/src/react/source-plugin.ts +15 −4
packages/plugins/graphql/src/react/source-plugin.ts +15 −4
packages/plugins/mcp/src/react/source-plugin.tsx +12 −3
packages/plugins/openapi/src/react/source-plugin.ts +12 −3
packages/react/src/pages/sources-add.tsx +1 −1
packages/react/src/pages/sources.tsx +6 −6

packages/core/sdk/src/client.ts+10−0

   createContext,
   createElement,
   useContext,
+  useEffect,
   useMemo,
   type ComponentType,
   type ReactNode,
     readonly sourceId: string;
   }>;
   readonly presets?: readonly SourcePreset[];
+  /** Trigger early download of the plugin's lazy component chunks (add/edit/etc.).
+   *  Call from the host on intent (hover/focus) so the chunks land before the
+   *  user navigates into the add page. Idempotent. */
+  readonly preload?: () => void;
 }
 // ---------------------------------------------------------------------------
     }),
     [plugins],
   );
+  // Kick off lazy chunk downloads for every source plugin once the host
+  // mounts, so navigating into an add/edit page doesn't suspend.
+  useEffect(() => {
+    for (const sp of value.sourcePlugins) sp.preload?.();
+  }, [value.sourcePlugins]);
   return createElement(ExecutorPluginsContext.Provider, { value }, children);
 }

packages/plugins/google-discovery/src/react/source-plugin.ts+15−4

 import type { SourcePlugin } from "@executor-js/sdk/client";
 import { googleDiscoveryPresets } from "../sdk/presets";
+const importAdd = () => import("./AddGoogleDiscoverySource");
+const importEdit = () => import("./EditGoogleDiscoverySource");
+const importSummary = () => import("./GoogleDiscoverySourceSummary");
+const importSignIn = () => import("./GoogleDiscoverySignInButton");
 export const googleDiscoverySourcePlugin: SourcePlugin = {
   key: "googleDiscovery",
   label: "Google Discovery",
-  add: lazy(() => import("./AddGoogleDiscoverySource")),
+  add: lazy(importAdd),
-  edit: lazy(() => import("./EditGoogleDiscoverySource")),
+  edit: lazy(importEdit),
-  summary: lazy(() => import("./GoogleDiscoverySourceSummary")),
+  summary: lazy(importSummary),
-  signIn: lazy(() => import("./GoogleDiscoverySignInButton")),
+  signIn: lazy(importSignIn),
   presets: googleDiscoveryPresets,
+  preload: () => {
+    void importAdd();
+    void importEdit();
+    void importSummary();
+    void importSignIn();
+  },
 };

packages/plugins/graphql/src/react/source-plugin.ts+15−4

 import type { SourcePlugin } from "@executor-js/sdk/client";
 import { graphqlPresets } from "../sdk/presets";
+const importAdd = () => import("./AddGraphqlSource");
+const importEdit = () => import("./EditGraphqlSource");
+const importSummary = () => import("./GraphqlSourceSummary");
+const importSignIn = () => import("./GraphqlSignInButton");
 export const graphqlSourcePlugin: SourcePlugin = {
   key: "graphql",
   label: "GraphQL",
-  add: lazy(() => import("./AddGraphqlSource")),
+  add: lazy(importAdd),
-  edit: lazy(() => import("./EditGraphqlSource")),
+  edit: lazy(importEdit),
-  summary: lazy(() => import("./GraphqlSourceSummary")),
+  summary: lazy(importSummary),
-  signIn: lazy(() => import("./GraphqlSignInButton")),
+  signIn: lazy(importSignIn),
   presets: graphqlPresets,
+  preload: () => {
+    void importAdd();
+    void importEdit();
+    void importSummary();
+    void importSignIn();
+  },
 };

packages/plugins/mcp/src/react/source-plugin.tsx+12−3

 import type { SourcePlugin } from "@executor-js/sdk/client";
 import { mcpPresets } from "../sdk/presets";
-const LazyAddMcpSource = lazy(() => import("./AddMcpSource"));
+const importAdd = () => import("./AddMcpSource");
-const LazyEditMcpSource = lazy(() => import("./EditMcpSource"));
+const importEdit = () => import("./EditMcpSource");
-const LazyMcpSignInButton = lazy(() => import("./McpSignInButton"));
+const importSignIn = () => import("./McpSignInButton");
+const LazyAddMcpSource = lazy(importAdd);
+const LazyEditMcpSource = lazy(importEdit);
+const LazyMcpSignInButton = lazy(importSignIn);
 type AddProps = ComponentProps<SourcePlugin["add"]>;
     edit: LazyEditMcpSource,
     signIn: LazyMcpSignInButton,
     presets,
+    preload: () => {
+      void importAdd();
+      void importEdit();
+      void importSignIn();
+    },
   };
 };

packages/plugins/openapi/src/react/source-plugin.ts+12−3

 import type { SourcePlugin } from "@executor-js/sdk/client";
 import { openApiPresets } from "../sdk/presets";
+const importAdd = () => import("./AddOpenApiSource");
+const importEdit = () => import("./EditOpenApiSource");
+const importSummary = () => import("./OpenApiSourceSummary");
 export const openApiSourcePlugin: SourcePlugin = {
   key: "openapi",
   label: "OpenAPI",
-  add: lazy(() => import("./AddOpenApiSource")),
+  add: lazy(importAdd),
-  edit: lazy(() => import("./EditOpenApiSource")),
+  edit: lazy(importEdit),
-  summary: lazy(() => import("./OpenApiSourceSummary")),
+  summary: lazy(importSummary),
   presets: openApiPresets,
+  preload: () => {
+    void importAdd();
+    void importEdit();
+    void importSummary();
+  },
 };

packages/react/src/pages/sources-add.tsx+1−1

@@ -46,7 +46,7 @@ export function SourcesAddPage(props: { · 45 unmodified lines
46	return (	46	return (
47	<div className="relative min-h-0 flex-1 overflow-y-auto">	47	<div className="relative min-h-0 flex-1 overflow-y-auto">
48	<div className="mx-auto flex min-h-full max-w-4xl flex-col px-6 py-10 lg:px-10 lg:py-14">	48	<div className="mx-auto flex min-h-full max-w-4xl flex-col px-6 py-10 lg:px-10 lg:py-14">
49	<Suspense fallback={<p className="text-sm text-muted-foreground">Loading…</p>}>	49	<Suspense fallback={null}>
50	<AddComponent	50	<AddComponent
51	initialUrl={url}	51	initialUrl={url}
52	initialPreset={preset}	52	initialPreset={preset}

packages/react/src/pages/sources.tsx+6−6

           </Button>
         </div>
+        <div className="mb-8">
+          <McpInstallCard />
+        </div>
+        <div className="mb-8 border-t border-border/50" />
         {AsyncResult.match(sources, {
           onInitial: () => <SourcesGridSkeleton />,
           onFailure: () => <p className="text-sm text-destructive">Failed to load sources</p>,
             );
           },
         })}
-        <div className="mb-8 border-t border-border/50" />
-        <div className="mb-8">
-          <McpInstallCard />
-        </div>
       </div>
       <ConnectDialog open={connectOpen} onOpenChange={setConnectOpen} />