From 574097126f9dfd2b7024c47f9acf278d314b05d8 Mon Sep 17 00:00:00 2001
From: JoeMakuta <makutajosue@gmail.com>
Date: Mon, 30 Mar 2026 18:39:03 +0200
Subject: [PATCH 1/3] fix: prevent renaming chat to the same name by updating
 button disabled condition

---
 .../components/layout/providers/LayoutDataProvider.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/surfsense_web/components/layout/providers/LayoutDataProvider.tsx b/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
index ef9ed1402..70b3ece80 100644
--- a/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
+++ b/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
@@ -834,7 +834,7 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 						</Button>
 						<Button
 							onClick={confirmRenameChat}
-							disabled={isRenamingChat || !newChatTitle.trim()}
+							disabled={isRenamingChat || !newChatTitle.trim() || newChatTitle.trim() === chatToRename?.name}
 							className="gap-2"
 						>
 							{isRenamingChat ? (

From 4d6cf983fd445faa57c896417194a00ac881f197 Mon Sep 17 00:00:00 2001
From: JoeMakuta <makutajosue@gmail.com>
Date: Mon, 30 Mar 2026 19:06:25 +0200
Subject: [PATCH 2/3] refactor: remove pending new chat state and streamline
 router synchronization in LayoutDataProvider

---
 .../layout/providers/LayoutDataProvider.tsx   | 23 +++++--------------
 1 file changed, 6 insertions(+), 17 deletions(-)

diff --git a/surfsense_web/components/layout/providers/LayoutDataProvider.tsx b/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
index 70b3ece80..f3940fd86 100644
--- a/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
+++ b/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
@@ -104,9 +104,6 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 	const syncChatTab = useSetAtom(syncChatTabAtom);
 	const resetTabs = useSetAtom(resetTabsAtom);
 
-	// State for handling new chat navigation when router is out of sync
-	const [pendingNewChat, setPendingNewChat] = useState(false);
-
 	// Key used to force-remount the page component (e.g. after deleting the active chat
 	// when the router is out of sync due to replaceState)
 	const [chatResetKey, setChatResetKey] = useState(0);
@@ -256,17 +253,6 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 	const [isDeletingSearchSpace, setIsDeletingSearchSpace] = useState(false);
 	const [isLeavingSearchSpace, setIsLeavingSearchSpace] = useState(false);
 
-	// Effect to complete new chat navigation after router syncs
-	// This runs when handleNewChat detected an out-of-sync state and triggered a sync
-	useEffect(() => {
-		if (pendingNewChat && params?.chat_id) {
-			// Router is now synced (chat_id is in params), complete navigation to new-chat
-			resetCurrentThread();
-			router.push(`/dashboard/${searchSpaceId}/new-chat`);
-			setPendingNewChat(false);
-		}
-	}, [pendingNewChat, params?.chat_id, router, searchSpaceId, resetCurrentThread]);
-
 	// Reset transient slide-out panels and tabs when switching search spaces.
 	// Use a ref to skip the initial mount — only reset when the space actually changes.
 	const prevSearchSpaceIdRef = useRef(searchSpaceId);
@@ -548,14 +534,17 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 		if (isOutOfSync) {
 			// First sync Next.js router by navigating to the current chat's actual URL
 			// This updates the router's internal state to match the browser URL
+			resetCurrentThread();
 			router.replace(`/dashboard/${searchSpaceId}/new-chat/${currentThreadState.id}`);
-			// Set flag to trigger navigation to new-chat after params update
-			setPendingNewChat(true);
+			// Allow router to sync, then navigate to fresh new-chat
+			setTimeout(() => {
+				router.push(`/dashboard/${searchSpaceId}/new-chat`);
+			}, 0);
 		} else {
 			// Normal navigation - router is in sync
 			router.push(`/dashboard/${searchSpaceId}/new-chat`);
 		}
-	}, [router, searchSpaceId, currentThreadState.id, params?.chat_id]);
+	}, [router, searchSpaceId, currentThreadState.id, params?.chat_id, resetCurrentThread]);
 
 	const handleChatSelect = useCallback(
 		(chat: ChatItem) => {

From fb72bb2b06740b05a4ed0f9cfcf4ae12d02a2e6d Mon Sep 17 00:00:00 2001
From: JoeMakuta <makutajosue@gmail.com>
Date: Mon, 30 Mar 2026 19:26:33 +0200
Subject: [PATCH 3/3] refactor: implement dynamic imports for PlateEditor in
 multiple components with loading skeletons

---
 .../components/editor-panel/editor-panel.tsx  |  8 +++++++-
 .../hitl-edit-panel/hitl-edit-panel.tsx       |  8 +++++++-
 .../layout/ui/right-panel/RightPanel.tsx      | 20 ++++++++++++++++---
 .../components/report-panel/report-panel.tsx  |  8 +++++++-
 4 files changed, 38 insertions(+), 6 deletions(-)

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: () => <Skeleton className="h-64 w-full" /> }
+);
+
 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: () => <Skeleton className="h-64 w-full" /> }
+);
+
 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: () => <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;
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: () => <Skeleton className="h-64 w-full" /> }
+);
+
 /**
  * Zod schema for a single version entry
  */