perf: implement dynamic imports for settings dialog tabs (#1141)

- Replace 6 static imports in user-settings-dialog with dynamic imports
- Replace 8 static imports in search-space-settings-dialog with dynamic imports
- Each settings tab loads content only when selected
- Reduces initial settings dialog bundle size
- All tab functionality preserved
This commit is contained in:
SohamBhattacharjee2003 2026-04-08 06:48:51 +05:30
parent d5f46dd7de
commit 15560f297f
2 changed files with 60 additions and 14 deletions

View file

@ -1,19 +1,45 @@
"use client";
import dynamic from "next/dynamic";
import { useAtom } from "jotai";
import { Bot, Brain, Eye, FileText, Globe, ImageIcon, MessageSquare, Shield } from "lucide-react";
import { useTranslations } from "next-intl";
import type React from "react";
import { searchSpaceSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
import { PublicChatSnapshotsManager } from "@/components/public-chat-snapshots/public-chat-snapshots-manager";
import { GeneralSettingsManager } from "@/components/settings/general-settings-manager";
import { ImageModelManager } from "@/components/settings/image-model-manager";
import { LLMRoleManager } from "@/components/settings/llm-role-manager";
import { ModelConfigManager } from "@/components/settings/model-config-manager";
import { PromptConfigManager } from "@/components/settings/prompt-config-manager";
import { RolesManager } from "@/components/settings/roles-manager";
import { SettingsDialog } from "@/components/settings/settings-dialog";
import { VisionModelManager } from "@/components/settings/vision-model-manager";
const GeneralSettingsManager = dynamic(
() => import("@/components/settings/general-settings-manager").then(m => ({ default: m.GeneralSettingsManager })),
{ ssr: false }
);
const ModelConfigManager = dynamic(
() => import("@/components/settings/model-config-manager").then(m => ({ default: m.ModelConfigManager })),
{ ssr: false }
);
const LLMRoleManager = dynamic(
() => import("@/components/settings/llm-role-manager").then(m => ({ default: m.LLMRoleManager })),
{ ssr: false }
);
const ImageModelManager = dynamic(
() => import("@/components/settings/image-model-manager").then(m => ({ default: m.ImageModelManager })),
{ ssr: false }
);
const VisionModelManager = dynamic(
() => import("@/components/settings/vision-model-manager").then(m => ({ default: m.VisionModelManager })),
{ ssr: false }
);
const RolesManager = dynamic(
() => import("@/components/settings/roles-manager").then(m => ({ default: m.RolesManager })),
{ ssr: false }
);
const PromptConfigManager = dynamic(
() => import("@/components/settings/prompt-config-manager").then(m => ({ default: m.PromptConfigManager })),
{ ssr: false }
);
const PublicChatSnapshotsManager = dynamic(
() => import("@/components/public-chat-snapshots/public-chat-snapshots-manager").then(m => ({ default: m.PublicChatSnapshotsManager })),
{ ssr: false }
);
interface SearchSpaceSettingsDialogProps {
searchSpaceId: number;

View file

@ -1,19 +1,39 @@
"use client";
import dynamic from "next/dynamic";
import { useAtom } from "jotai";
import { Globe, KeyRound, Monitor, Receipt, Sparkles, User } from "lucide-react";
import { useTranslations } from "next-intl";
import { useMemo } from "react";
import { ApiKeyContent } from "@/app/dashboard/[search_space_id]/user-settings/components/ApiKeyContent";
import { CommunityPromptsContent } from "@/app/dashboard/[search_space_id]/user-settings/components/CommunityPromptsContent";
import { DesktopContent } from "@/app/dashboard/[search_space_id]/user-settings/components/DesktopContent";
import { ProfileContent } from "@/app/dashboard/[search_space_id]/user-settings/components/ProfileContent";
import { PromptsContent } from "@/app/dashboard/[search_space_id]/user-settings/components/PromptsContent";
import { PurchaseHistoryContent } from "@/app/dashboard/[search_space_id]/user-settings/components/PurchaseHistoryContent";
import { userSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
import { SettingsDialog } from "@/components/settings/settings-dialog";
import { usePlatform } from "@/hooks/use-platform";
const ProfileContent = dynamic(
() => import("@/app/dashboard/[search_space_id]/user-settings/components/ProfileContent").then(m => ({ default: m.ProfileContent })),
{ ssr: false }
);
const ApiKeyContent = dynamic(
() => import("@/app/dashboard/[search_space_id]/user-settings/components/ApiKeyContent").then(m => ({ default: m.ApiKeyContent })),
{ ssr: false }
);
const PromptsContent = dynamic(
() => import("@/app/dashboard/[search_space_id]/user-settings/components/PromptsContent").then(m => ({ default: m.PromptsContent })),
{ ssr: false }
);
const CommunityPromptsContent = dynamic(
() => import("@/app/dashboard/[search_space_id]/user-settings/components/CommunityPromptsContent").then(m => ({ default: m.CommunityPromptsContent })),
{ ssr: false }
);
const PurchaseHistoryContent = dynamic(
() => import("@/app/dashboard/[search_space_id]/user-settings/components/PurchaseHistoryContent").then(m => ({ default: m.PurchaseHistoryContent })),
{ ssr: false }
);
const DesktopContent = dynamic(
() => import("@/app/dashboard/[search_space_id]/user-settings/components/DesktopContent").then(m => ({ default: m.DesktopContent })),
{ ssr: false }
);
export function UserSettingsDialog() {
const t = useTranslations("userSettings");
const [state, setState] = useAtom(userSettingsDialogAtom);