Smooth scrolling down after component with pdf is displayed in reactjs - reactjs

Question

I would need smooth scrolling down to component with generated pdf. But it looks like that first is scrolled to view and then
component is mounted. How can I set waiting to component is displayed and then scroll to view this component?
When I click to button, the pdf will start to generate. After generating this pdf, I would like scroll to view this PDFViewer.
My solution does not work. 'await' has no effect on the type of this expression. OR Object is possibly 'null'.
I use reactjs 17.0.2, react-pdf/renderer 3.0.1, typescript.
Code:
import { PDFViewer } from "#react-pdf/renderer";
export const Print: NextPage = () => {
const [pdfGenerationEnabled, setPdfGenerationEnabled] = useState<boolean>(false);
const generatePDFAndView = async () => {
setPdfGenerationEnabled(true);
await document.getElementById("generated-pdf-view")?.scrollIntoView({ behavior: "smooth" });
}
return (
<DownloadAndPrint>
<h2>Generating PDF</h2>
<p>
Some long text
Some long text
Some long text
.
.
.
</p>
<Button
className="btn-generate-pdf"
onClick={() => { generatePDFAndView() }}
>
Vygenerovať pdf súbory
</Button>
{pdfGenerationEnabled
?
<>
<div id="generated-pdf-view" className="viewer-styled">
<PDFViewer showToolbar={true} style={{ height: "45vh", width: "100%" }}>
<ComponentPrint
data={data}
/>
</PDFViewer>
</div>
</>
: ""
}
</DownloadAndPrint>
);
};
EDITED: After added delay, it's works. After 3 seconds smooth scrolled to the pdf viewer. But I don't know how many seconds it should waiting? Sometimes generated pdf has 3 pages, sometimes 300 pages. According to the data.
const delay = (n) => new Promise(r => setTimeout(r, n*1000));
const generatePDFAndView = async () => {
setPdfGenerationEnabled(true);
await delay(3.0); // waiting 3s
document.getElementById("generated-pdf-view")?.scrollIntoView({ behavior: "smooth" });
}

Answer 1

My solution with delay and calculation time to wait according to the data. Maybe somebody it helps.
import { PDFViewer } from "#react-pdf/renderer";
export const Print: NextPage = () => {
const [pdfGenerationEnabled, setPdfGenerationEnabled] = useState<boolean>(false);
const itemsPerPage = 5;
const calculateTimeToDisplayPdfViewer = () => {
const numberOfItems = data?.items?.length;
if (numberOfItems > 0 && itemsPerPage > 0) {
let time = (numberOfItems / itemsPerPage) / 5; // 1 page = 1/5s = 0.20s
time = parseFloat(time.toFixed(2));
console.log("Waiting " + time + "s.");
return time;
} else {
return 2.0;
}
}
const delay = (n) => new Promise( r => setTimeout(r, n*1000)); // waiting in seconds
const generatePDFAndView = async () => {
setPdfGenerationEnabled(true);
await delay(calculateTimeToDisplayPdfViewer());
document.getElementById("generated-pdf-view")?.scrollIntoView({ behavior: "smooth" });
}
return (
<DownloadAndPrint>
<h2>Generating PDF</h2>
<p>
Some long text
Some long text
Some long text
.
.
.
</p>
<Button
className="btn-generate-pdf"
onClick={() => { generatePDFAndView() }}
>
Vygenerovať pdf súbory
</Button>
{pdfGenerationEnabled
?
<>
<div id="generated-pdf-view" className="viewer-styled">
<PDFViewer showToolbar={true} style={{ height: "45vh", width: "100%" }}>
<ComponentPrint
data={data}
/>
</PDFViewer>
</div>
</>
: ""
}
</DownloadAndPrint>
);
};