diff --git a/next.config.ts b/next.config.ts
index 1d0afeba7..517c43853 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -42,6 +42,7 @@ const nextConfig: NextConfig = {
   devIndicators: false,
   experimental: {
     cpus: 1,
+    optimizePackageImports: ["lucide-react"],
   },
   poweredByHeader: false,
   turbopack: {
diff --git a/src/app/documents/[id]/loading.tsx b/src/app/documents/[id]/loading.tsx
new file mode 100644
index 000000000..81ca71167
--- /dev/null
+++ b/src/app/documents/[id]/loading.tsx
@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <div className="flex h-screen items-center justify-center bg-[color:var(--background)]">
+      <div className="h-8 w-8 animate-spin rounded-full border-4 border-[color:var(--accent)] border-t-transparent" />
+    </div>
+  );
+}
diff --git a/src/app/documents/[id]/page.tsx b/src/app/documents/[id]/page.tsx
index 0950bc1fb..b6de4af8b 100644
--- a/src/app/documents/[id]/page.tsx
+++ b/src/app/documents/[id]/page.tsx
@@ -1,4 +1,9 @@
-import { DocumentViewer } from "@/components/DocumentViewer";
+import dynamic from "next/dynamic";
+
+const DocumentViewer = dynamic(
+  () => import("@/components/DocumentViewer").then((m) => m.DocumentViewer),
+  { ssr: false },
+);
 
 export default async function DocumentPage({
   params,
diff --git a/src/app/loading.tsx b/src/app/loading.tsx
new file mode 100644
index 000000000..81ca71167
--- /dev/null
+++ b/src/app/loading.tsx
@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <div className="flex h-screen items-center justify-center bg-[color:var(--background)]">
+      <div className="h-8 w-8 animate-spin rounded-full border-4 border-[color:var(--accent)] border-t-transparent" />
+    </div>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 40d4f1a75..73ba71447 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,11 @@
-import { ClinicalDashboard } from "@/components/clinical-dashboard";
+import dynamic from "next/dynamic";
 import { isAppModeId, isAppModeVisible, type AppModeId } from "@/lib/app-modes";
 
+const ClinicalDashboard = dynamic(
+  () => import("@/components/clinical-dashboard").then((m) => m.ClinicalDashboard),
+  { ssr: false },
+);
+
 type HomeProps = {
   searchParams?: Promise<{
     mode?: string | string[];
diff --git a/src/components/ClinicalDashboard.tsx b/src/components/ClinicalDashboard.tsx
index eaee4b8d3..b87bee2de 100644
--- a/src/components/ClinicalDashboard.tsx
+++ b/src/components/ClinicalDashboard.tsx
@@ -53,6 +53,7 @@ import {
 import {
   type CSSProperties,
   FormEvent,
+  memo,
   useCallback,
   useEffect,
   useMemo,
@@ -509,7 +510,7 @@ function subscribeAuthEmail(onStoreChange: () => void) {
   };
 }
 
-function SourceImage({
+const SourceImage = memo(function SourceImage({
   endpoint,
   caption,
   className = "max-h-52",
@@ -609,7 +610,7 @@ function SourceImage({
       className={cn(className, "w-full rounded-lg object-contain")}
     />
   );
-}
+});
 
 function ScopeAndGovernanceNotice({
   scope,