diff --git a/surfsense_web/components/editor-panel/editor-panel.tsx b/surfsense_web/components/editor-panel/editor-panel.tsx index f2f66eb48..93b3ecbc1 100644 --- a/surfsense_web/components/editor-panel/editor-panel.tsx +++ b/surfsense_web/components/editor-panel/editor-panel.tsx @@ -1,16 +1,22 @@ "use client"; +import dynamic from "next/dynamic"; import { useAtomValue, useSetAtom } from "jotai"; import { AlertCircle, XIcon } from "lucide-react"; import { useCallback, useEffect, useRef, useState } from "react"; import { toast } from "sonner"; import { closeEditorPanelAtom, editorPanelAtom } from "@/atoms/editor/editor-panel.atom"; -import { PlateEditor } from "@/components/editor/plate-editor"; import { Button } from "@/components/ui/button"; import { Drawer, DrawerContent, DrawerHandle, DrawerTitle } from "@/components/ui/drawer"; +import { Skeleton } from "@/components/ui/skeleton"; import { useMediaQuery } from "@/hooks/use-media-query"; import { authenticatedFetch, getBearerToken, redirectToLogin } from "@/lib/auth-utils"; +const PlateEditor = dynamic( + () => import("@/components/editor/plate-editor").then((m) => ({ default: m.PlateEditor })), + { ssr: false, loading: () => } +); + interface EditorContent { document_id: number; title: string; diff --git a/surfsense_web/components/hitl-edit-panel/hitl-edit-panel.tsx b/surfsense_web/components/hitl-edit-panel/hitl-edit-panel.tsx index a75752217..99f17f976 100644 --- a/surfsense_web/components/hitl-edit-panel/hitl-edit-panel.tsx +++ b/surfsense_web/components/hitl-edit-panel/hitl-edit-panel.tsx @@ -1,5 +1,6 @@ "use client"; +import dynamic from "next/dynamic"; import { format } from "date-fns"; import { TagInput, type Tag as TagType } from "emblor"; import { useAtomValue, useSetAtom } from "jotai"; @@ -7,16 +8,21 @@ import { CalendarIcon, XIcon } from "lucide-react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import type { ExtraField } from "@/atoms/chat/hitl-edit-panel.atom"; import { closeHitlEditPanelAtom, hitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom"; -import { PlateEditor } from "@/components/editor/plate-editor"; import { Button } from "@/components/ui/button"; import { Calendar } from "@/components/ui/calendar"; import { Drawer, DrawerContent, DrawerHandle, DrawerTitle } from "@/components/ui/drawer"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; +import { Skeleton } from "@/components/ui/skeleton"; import { Textarea } from "@/components/ui/textarea"; import { useMediaQuery } from "@/hooks/use-media-query"; +const PlateEditor = dynamic( + () => import("@/components/editor/plate-editor").then((m) => ({ default: m.PlateEditor })), + { ssr: false, loading: () => } +); + function parseEmailsToTags(value: string): TagType[] { if (!value.trim()) return []; return value diff --git a/surfsense_web/components/layout/ui/right-panel/RightPanel.tsx b/surfsense_web/components/layout/ui/right-panel/RightPanel.tsx index 90cdde127..4872bb314 100644 --- a/surfsense_web/components/layout/ui/right-panel/RightPanel.tsx +++ b/surfsense_web/components/layout/ui/right-panel/RightPanel.tsx @@ -1,5 +1,6 @@ "use client"; +import dynamic from "next/dynamic"; import { useAtom, useAtomValue, useSetAtom } from "jotai"; import { PanelRight, PanelRightClose } from "lucide-react"; import { startTransition, useEffect } from "react"; @@ -8,13 +9,26 @@ import { closeReportPanelAtom, reportPanelAtom } from "@/atoms/chat/report-panel import { documentsSidebarOpenAtom } from "@/atoms/documents/ui.atoms"; import { closeEditorPanelAtom, editorPanelAtom } from "@/atoms/editor/editor-panel.atom"; import { rightPanelCollapsedAtom, rightPanelTabAtom } from "@/atoms/layout/right-panel.atom"; -import { EditorPanelContent } from "@/components/editor-panel/editor-panel"; -import { HitlEditPanelContent } from "@/components/hitl-edit-panel/hitl-edit-panel"; -import { ReportPanelContent } from "@/components/report-panel/report-panel"; import { Button } from "@/components/ui/button"; +import { Skeleton } from "@/components/ui/skeleton"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { DocumentsSidebar } from "../sidebar"; +const EditorPanelContent = dynamic( + () => import("@/components/editor-panel/editor-panel").then((m) => ({ default: m.EditorPanelContent })), + { ssr: false, loading: () => } +); + +const HitlEditPanelContent = dynamic( + () => import("@/components/hitl-edit-panel/hitl-edit-panel").then((m) => ({ default: m.HitlEditPanelContent })), + { ssr: false, loading: () => } +); + +const ReportPanelContent = dynamic( + () => import("@/components/report-panel/report-panel").then((m) => ({ default: m.ReportPanelContent })), + { ssr: false, loading: () => } +); + interface RightPanelProps { documentsPanel?: { open: boolean; diff --git a/surfsense_web/components/report-panel/report-panel.tsx b/surfsense_web/components/report-panel/report-panel.tsx index dd117e7de..1a62fb41a 100644 --- a/surfsense_web/components/report-panel/report-panel.tsx +++ b/surfsense_web/components/report-panel/report-panel.tsx @@ -1,5 +1,6 @@ "use client"; +import dynamic from "next/dynamic"; import { useAtomValue, useSetAtom } from "jotai"; import { ChevronDownIcon, XIcon } from "lucide-react"; import { useCallback, useEffect, useRef, useState } from "react"; @@ -7,11 +8,11 @@ import { toast } from "sonner"; import { z } from "zod"; import { currentThreadAtom } from "@/atoms/chat/current-thread.atom"; import { closeReportPanelAtom, reportPanelAtom } from "@/atoms/chat/report-panel.atom"; -import { PlateEditor } from "@/components/editor/plate-editor"; import { MarkdownViewer } from "@/components/markdown-viewer"; import { EXPORT_FILE_EXTENSIONS, ExportDropdownItems } from "@/components/shared/ExportMenuItems"; import { Button } from "@/components/ui/button"; import { Drawer, DrawerContent, DrawerHandle, DrawerTitle } from "@/components/ui/drawer"; +import { Skeleton } from "@/components/ui/skeleton"; import { DropdownMenu, DropdownMenuContent, @@ -22,6 +23,11 @@ import { useMediaQuery } from "@/hooks/use-media-query"; import { baseApiService } from "@/lib/apis/base-api.service"; import { authenticatedFetch } from "@/lib/auth-utils"; +const PlateEditor = dynamic( + () => import("@/components/editor/plate-editor").then((m) => ({ default: m.PlateEditor })), + { ssr: false, loading: () => } +); + /** * Zod schema for a single version entry */