Improve loading speed of slide content by optimizing PDF rendering
Introduce `useMemo` to memoize PDF rendering options, reducing redundant computations and improving the initial load time of the PDF viewer component in the Report page. 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:
@ -7,7 +7,7 @@ import { Input } from "@/components/ui/input";
|
|||||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
|
||||||
import { useQuery } from "@tanstack/react-query";
|
import { useQuery } from "@tanstack/react-query";
|
||||||
import { useAuth } from "@/hooks/useAuth";
|
import { useAuth } from "@/hooks/useAuth";
|
||||||
import { useState, useEffect, useRef } from "react";
|
import { useState, useEffect, useRef, useMemo } from "react";
|
||||||
import type { MediaOutlet } from "@shared/schema";
|
import type { MediaOutlet } from "@shared/schema";
|
||||||
import Footer from "@/components/Footer";
|
import Footer from "@/components/Footer";
|
||||||
import SearchModal from "@/components/SearchModal";
|
import SearchModal from "@/components/SearchModal";
|
||||||
@ -42,6 +42,11 @@ function MohamedSalahSlides() {
|
|||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const pdfOptions = useMemo(() => ({
|
||||||
|
cMapUrl: 'https://unpkg.com/pdfjs-dist@3.11.174/cmaps/',
|
||||||
|
cMapPacked: true,
|
||||||
|
}), []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
<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">
|
||||||
@ -58,10 +63,7 @@ function MohamedSalahSlides() {
|
|||||||
<Document
|
<Document
|
||||||
file="/attached_assets/mohamed_salah_pdf_en_1760419721874.pdf"
|
file="/attached_assets/mohamed_salah_pdf_en_1760419721874.pdf"
|
||||||
onLoadSuccess={onDocumentLoadSuccess}
|
onLoadSuccess={onDocumentLoadSuccess}
|
||||||
options={{
|
options={pdfOptions}
|
||||||
cMapUrl: 'https://unpkg.com/pdfjs-dist@3.11.174/cmaps/',
|
|
||||||
cMapPacked: true,
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<Page
|
<Page
|
||||||
pageNumber={currentSlide}
|
pageNumber={currentSlide}
|
||||||
|
|||||||
Reference in New Issue
Block a user