Skip to content

Lazy-load connector config and connect-form components #1142

@MODSetter

Description

@MODSetter

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

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions