From 6df743b2e61e4696fb3ea4ff6c96981b00aefd2e Mon Sep 17 00:00:00 2001
From: Froidefond Julien <julienfroidefond@gmail.com>
Date: Sat, 21 Mar 2026 13:02:10 +0100
Subject: [PATCH] perf: lazy-load heavy modal components with next/dynamic

Dynamic import EditBookForm, EditSeriesForm, MetadataSearchModal, and
ProwlarrSearchModal so their code is split into separate chunks and
only fetched when the user interacts with them.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/backoffice/app/books/[id]/page.tsx            |  6 +++++-
 .../app/libraries/[id]/series/[name]/page.tsx      | 14 +++++++++++---
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/apps/backoffice/app/books/[id]/page.tsx b/apps/backoffice/app/books/[id]/page.tsx
index 01a8d26..8178142 100644
--- a/apps/backoffice/app/books/[id]/page.tsx
+++ b/apps/backoffice/app/books/[id]/page.tsx
@@ -2,11 +2,15 @@ import { fetchLibraries, getBookCoverUrl, BookDto, apiFetch, ReadingStatus } fro
 import { BookPreview } from "../../components/BookPreview";
 import { ConvertButton } from "../../components/ConvertButton";
 import { MarkBookReadButton } from "../../components/MarkBookReadButton";
-import { EditBookForm } from "../../components/EditBookForm";
+import nextDynamic from "next/dynamic";
 import { SafeHtml } from "../../components/SafeHtml";
 import { getServerTranslations } from "../../../lib/i18n/server";
 import Image from "next/image";
 import Link from "next/link";
+
+const EditBookForm = nextDynamic(
+  () => import("../../components/EditBookForm").then(m => m.EditBookForm)
+);
 import { notFound } from "next/navigation";
 
 export const dynamic = "force-dynamic";
diff --git a/apps/backoffice/app/libraries/[id]/series/[name]/page.tsx b/apps/backoffice/app/libraries/[id]/series/[name]/page.tsx
index dfc5f8d..9e54459 100644
--- a/apps/backoffice/app/libraries/[id]/series/[name]/page.tsx
+++ b/apps/backoffice/app/libraries/[id]/series/[name]/page.tsx
@@ -2,13 +2,21 @@ import { fetchLibraries, fetchBooks, fetchSeriesMetadata, getBookCoverUrl, getMe
 import { BooksGrid, EmptyState } from "../../../../components/BookCard";
 import { MarkSeriesReadButton } from "../../../../components/MarkSeriesReadButton";
 import { MarkBookReadButton } from "../../../../components/MarkBookReadButton";
-import { EditSeriesForm } from "../../../../components/EditSeriesForm";
-import { MetadataSearchModal } from "../../../../components/MetadataSearchModal";
-import { ProwlarrSearchModal } from "../../../../components/ProwlarrSearchModal";
+import nextDynamic from "next/dynamic";
 import { OffsetPagination } from "../../../../components/ui";
 import { SafeHtml } from "../../../../components/SafeHtml";
 import Image from "next/image";
 import Link from "next/link";
+
+const EditSeriesForm = nextDynamic(
+  () => import("../../../../components/EditSeriesForm").then(m => m.EditSeriesForm)
+);
+const MetadataSearchModal = nextDynamic(
+  () => import("../../../../components/MetadataSearchModal").then(m => m.MetadataSearchModal)
+);
+const ProwlarrSearchModal = nextDynamic(
+  () => import("../../../../components/ProwlarrSearchModal").then(m => m.ProwlarrSearchModal)
+);
 import { notFound } from "next/navigation";
 import { getServerTranslations } from "../../../../../lib/i18n/server";