refactor: implement dynamic imports for PlateEditor in multiple components with loading skeletons

This commit is contained in:
JoeMakuta 2026-03-30 19:26:33 +02:00
parent 4d6cf983fd
commit fb72bb2b06
4 changed files with 38 additions and 6 deletions

View file

@ -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: () => <Skeleton className="h-96 w-full" /> }
);
const HitlEditPanelContent = dynamic(
() => import("@/components/hitl-edit-panel/hitl-edit-panel").then((m) => ({ default: m.HitlEditPanelContent })),
{ ssr: false, loading: () => <Skeleton className="h-96 w-full" /> }
);
const ReportPanelContent = dynamic(
() => import("@/components/report-panel/report-panel").then((m) => ({ default: m.ReportPanelContent })),
{ ssr: false, loading: () => <Skeleton className="h-96 w-full" /> }
);
interface RightPanelProps {
documentsPanel?: {
open: boolean;