Description
connector-configs/index.tsx statically imports 23 connector config components (Slack, Discord, Jira, Elasticsearch, etc.) even though only one renders at a time based on connector type. The same pattern exists in connect-forms/index.tsx. This significantly bloats the connector popup chunk.
Files to change
surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx (lines 5-27)
surfsense_web/components/assistant-ui/connector-popup/connect-forms/index.tsx (similar pattern)
Current code (excerpt)
import { BaiduSearchApiConfig } from "./components/baidu-search-api-config";
import { BookStackConfig } from "./components/bookstack-config";
import { CirclebackConfig } from "./components/circleback-config";
// ... 20 more static imports
What to do
Replace the switch/mapping with dynamic imports:
import dynamic from "next/dynamic";
import type { FC } from "react";
const configMap: Record<string, () => Promise<{ default: FC<ConnectorConfigProps> }>> = {
SLACK_CONNECTOR: () => import("./components/slack-config").then(m => ({ default: m.SlackConfig })),
DISCORD_CONNECTOR: () => import("./components/discord-config").then(m => ({ default: m.DiscordConfig })),
// ... each connector type
};
export function getConnectorConfigComponent(type: string): FC<ConnectorConfigProps> | null {
const loader = configMap[type];
if (!loader) return null;
return dynamic(loader, { ssr: false });
}
Note: Cache the dynamic() result per type to avoid recreating on every call.
Acceptance criteria
- Only the selected connector's config component is loaded
- Connector configuration still works for all connector types
- Connector popup opens faster
Description
connector-configs/index.tsxstatically imports 23 connector config components (Slack, Discord, Jira, Elasticsearch, etc.) even though only one renders at a time based on connector type. The same pattern exists inconnect-forms/index.tsx. This significantly bloats the connector popup chunk.Files to change
surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx(lines 5-27)surfsense_web/components/assistant-ui/connector-popup/connect-forms/index.tsx(similar pattern)Current code (excerpt)
What to do
Replace the switch/mapping with dynamic imports:
Note: Cache the
dynamic()result per type to avoid recreating on every call.Acceptance criteria