aimond/sapiens-web3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve slide loading performance by optimizing PDF rendering

Browse Source 
Implement a loading state with a spinner and progress indicator, and optimize PDF rendering options in Report.tsx to reduce slide loading times.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9a264234-c5d7-4dcc-adf3-a954b149b30d
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/9a264234-c5d7-4dcc-adf3-a954b149b30d/VGhYqEL
This commit is contained in:
kimjaehyeon0101
2025-10-14 07:07:27 +00:00
parent 788a55c3ae
commit ae7b527e08
1 changed files with 15 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
client/src/pages/Report.tsx
View File

@ -34,10 +34,12 @@ const reportContent: Record<string, { htmlPath: string; pdfPath?: string; pptPat
function MohamedSalahSlides() { function MohamedSalahSlides() {
const [currentSlide, setCurrentSlide] = useState(1); const [currentSlide, setCurrentSlide] = useState(1);
const [numPages, setNumPages] = useState(0); const [numPages, setNumPages] = useState(0);
const [isLoading, setIsLoading] = useState(true);
const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => { const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => {
setNumPages(numPages); setNumPages(numPages);
setCurrentSlide(1); // Reset to first slide after load setCurrentSlide(1); // Reset to first slide after load
setIsLoading(false);
}; };
return ( return (
@ -45,14 +47,25 @@ function MohamedSalahSlides() {
<div className="w-full relative overflow-hidden" style={{ paddingTop: '56.25%' }} data-testid="slide-container-16-9"> <div className="w-full relative overflow-hidden" style={{ paddingTop: '56.25%' }} data-testid="slide-container-16-9">
<Card className="absolute inset-0 bg-white"> <Card className="absolute inset-0 bg-white">
<CardContent className="p-0 h-full w-full flex items-center justify-center"> <CardContent className="p-0 h-full w-full flex items-center justify-center">
{isLoading && (
<div className="absolute inset-0 flex items-center justify-center bg-white z-10">
<div className="text-center">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
<p className="text-gray-600" data-testid="text-loading-slides">Loading slides...</p>
</div>
</div>
)}
<Document <Document
file="/attached_assets/mohamed_salah_pdf_en_1760419721874.pdf" file="/attached_assets/mohamed_salah_pdf_en_1760419721874.pdf"
onLoadSuccess={onDocumentLoadSuccess} onLoadSuccess={onDocumentLoadSuccess}
loading={<p data-testid="text-loading-slides">Loading slides...</p>} options={{
cMapUrl: 'https://unpkg.com/pdfjs-dist@3.11.174/cmaps/',
cMapPacked: true,
}}
> >
<Page <Page
pageNumber={currentSlide} pageNumber={currentSlide}
width={1200} width={1000}
renderTextLayer={false} renderTextLayer={false}
renderAnnotationLayer={false} renderAnnotationLayer={false}
data-testid="canvas-pdf-slide" data-testid="canvas-pdf-slide"