fix: optimise pdf viewer rerendering

This commit is contained in:
Mythie
2023-10-21 13:08:29 +11:00
parent 457e73342b
commit 2f2079e020
4 changed files with 32 additions and 7 deletions

View File

@ -1,6 +1,6 @@
'use client';
import React, { useEffect, useRef, useState } from 'react';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { Loader } from 'lucide-react';
import { PDFDocumentProxy } from 'pdfjs-dist';
@ -66,6 +66,11 @@ export const PDFViewer = ({
const [numPages, setNumPages] = useState(0);
const [pdfError, setPdfError] = useState(false);
const memoizedData = useMemo(
() => ({ type: documentData.type, data: documentData.data }),
[documentData.data, documentData.type],
);
const isLoading = isDocumentBytesLoading || !documentBytes;
const onDocumentLoaded = (doc: LoadedPDFDocument) => {
@ -134,7 +139,7 @@ export const PDFViewer = ({
try {
setIsDocumentBytesLoading(true);
const bytes = await getFile(documentData);
const bytes = await getFile(memoizedData);
setDocumentBytes(bytes);
@ -151,7 +156,7 @@ export const PDFViewer = ({
};
void fetchDocumentBytes();
}, [documentData, toast]);
}, [memoizedData, toast]);
return (
<div ref={$el} className={cn('overflow-hidden', className)} {...props}>