chore: lint using react-doctor, update translations, dynamic imports

apps/web/src/routes/templates/$.tsx

@@ -1,11 +1,16 @@
-import { PDFViewer } from "@react-pdf/renderer";
 import { createFileRoute } from "@tanstack/react-router";
+import { lazy, Suspense } from "react";
 import { useIsClient } from "usehooks-ts";
 import { sampleResumeData } from "@reactive-resume/schema/resume/sample";
 import { templateSchema } from "@reactive-resume/schema/templates";
 import { useLocalizedResumeDocument } from "@/features/resume/export/pdf-document";
 import { createNoindexFollowMeta } from "@/libs/seo";
 
+const PDFViewer = lazy(async () => {
+	const { PDFViewer } = await import("@react-pdf/renderer");
+	return { default: PDFViewer };
+});
+
 export const Route = createFileRoute("/templates/$")({
 	component: TemplatePdfRoute,
 	errorComponent: () => <div>Template not found</div>,
@@ -25,8 +30,10 @@ function TemplatePdfRoute() {
 	if (!isClient || !resumeDocument) return null;
 
 	return (
-		<PDFViewer showToolbar={false} style={{ height: "100svh", width: "100svw", border: "none" }}>
-			{resumeDocument}
-		</PDFViewer>
+		<Suspense fallback={null}>
+			<PDFViewer showToolbar={false} style={{ height: "100svh", width: "100svw", border: "none" }}>
+				{resumeDocument}
+			</PDFViewer>
+		</Suspense>
 	);
 }