fix: unbreak pdf viewer

This commit is contained in:
Mythie
2023-10-20 20:14:10 +11:00
parent 594f3ec16a
commit 091960f269
4 changed files with 12 additions and 6 deletions

View File

@ -153,7 +153,7 @@ export const EditDocumentForm = ({
gradient gradient
> >
<CardContent className="p-2"> <CardContent className="p-2">
<LazyPDFViewer documentData={documentData} /> <LazyPDFViewer key={documentData.id} documentData={documentData} />
</CardContent> </CardContent>
</Card> </Card>

View File

@ -91,7 +91,7 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
{document.status === InternalDocumentStatus.COMPLETED && ( {document.status === InternalDocumentStatus.COMPLETED && (
<div className="mx-auto mt-12 max-w-2xl"> <div className="mx-auto mt-12 max-w-2xl">
<LazyPDFViewer documentData={documentData} /> <LazyPDFViewer key={documentData.id} documentData={documentData} />
</div> </div>
)} )}
</div> </div>

View File

@ -74,7 +74,7 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
gradient gradient
> >
<CardContent className="p-2"> <CardContent className="p-2">
<LazyPDFViewer documentData={documentData} /> <LazyPDFViewer key={documentData.id} documentData={documentData} />
</CardContent> </CardContent>
</Card> </Card>

View File

@ -66,6 +66,8 @@ export const PDFViewer = ({
const [numPages, setNumPages] = useState(0); const [numPages, setNumPages] = useState(0);
const [pdfError, setPdfError] = useState(false); const [pdfError, setPdfError] = useState(false);
const isLoading = isDocumentBytesLoading || !documentBytes;
const onDocumentLoaded = (doc: LoadedPDFDocument) => { const onDocumentLoaded = (doc: LoadedPDFDocument) => {
setNumPages(doc.numPages); setNumPages(doc.numPages);
onDocumentLoad?.(doc); onDocumentLoad?.(doc);
@ -153,13 +155,17 @@ export const PDFViewer = ({
return ( return (
<div ref={$el} className={cn('overflow-hidden', className)} {...props}> <div ref={$el} className={cn('overflow-hidden', className)} {...props}>
{isDocumentBytesLoading ? ( {isLoading ? (
<div className={cn('h-[80vh] max-h-[60rem] w-full overflow-hidden rounded')}> <div
className={cn(
'flex h-[80vh] max-h-[60rem] w-full flex-col items-center justify-center overflow-hidden rounded',
)}
>
<PDFLoader /> <PDFLoader />
</div> </div>
) : ( ) : (
<PDFDocument <PDFDocument
file={documentBytes} file={documentBytes.buffer}
className={cn('w-full overflow-hidden rounded', { className={cn('w-full overflow-hidden rounded', {
'h-[80vh] max-h-[60rem]': numPages === 0, 'h-[80vh] max-h-[60rem]': numPages === 0,
})} })}