feat: migrate nextjs to rr7

packages/ui/primitives/lazy-pdf-viewer.tsx

@@ -1,26 +1,31 @@
-'use client';
+// Todo: Not sure if this actually makes it client-only.
+import { Suspense, lazy } from 'react';
 
-import dynamic from 'next/dynamic';
-
-import { Trans } from '@lingui/macro';
+import { Trans } from '@lingui/react/macro';
 import { Loader } from 'lucide-react';
+import { Await } from 'react-router';
 
-export const LazyPDFViewer = dynamic(async () => import('./pdf-viewer'), {
-  ssr: false,
-  loading: () => (
-    <div className="dark:bg-background flex h-[80vh] max-h-[60rem] flex-col items-center justify-center bg-white/50">
-      <Loader className="text-documenso h-12 w-12 animate-spin" />
+const LoadingComponent = () => (
+  <div className="dark:bg-background flex h-[80vh] max-h-[60rem] flex-col items-center justify-center bg-white/50">
+    <Loader className="text-documenso h-12 w-12 animate-spin" />
+    <p className="text-muted-foreground mt-4">
+      <Trans>Loading document...</Trans>
+    </p>
+  </div>
+);
 
-      <p className="text-muted-foreground mt-4">
-        <Trans>Loading document...</Trans>
-      </p>
-    </div>
-  ),
-});
+export const LazyPDFViewerImport = lazy(async () => import('./pdf-viewer'));
 
-/**
- * LazyPDFViewer variant with no loader.
- */
-export const LazyPDFViewerNoLoader = dynamic(async () => import('./pdf-viewer'), {
-  ssr: false,
-});
+export const LazyPDFViewer = (props: React.ComponentProps<typeof LazyPDFViewerImport>) => (
+  <Suspense fallback={<LoadingComponent />}>
+    <Await resolve={LazyPDFViewerImport}>
+      <LazyPDFViewerImport {...props} />
+    </Await>
+  </Suspense>
+);
+
+export const LazyPDFViewerNoLoader = (props: React.ComponentProps<typeof LazyPDFViewer>) => (
+  <Suspense fallback={null}>
+    <LazyPDFViewerImport {...props} />
+  </Suspense>
+);