Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

PDF scale 3.5 taking longer to load in 4K responsive screen

See original GitHub issue

I would like to zoom (scale 3.5) to a particular coordinate on the click of a button. It works fine on the laptop but it takes really long time in bigger screens like 4k responsive (2560 x 950). It’s taking up a lot of system memory too.

onButtonClick = () => {
    this.setState({ scale: 3.5, pageNumber: 3, pdfLoader: true },
        () => {
            setTimeout(function () {
                var canvasHolder = document.querySelector('.document-holder');
                canvasHolder.style.overflow = 'auto';
                canvasHolder.scroll({
                    top: 600,
                    left: 500,
                    behavior: 'smooth'
                })
            }, 800)
        }
    )

}

renderSuccess = (page) => {
    if (page.pageIndex === this.state.pageNumber - 1) {
        this.setState({
            pdfLoader: false
        })
    }
}
render() {
    var { pageNumber, scale, url } = this.state;
    const override = css` display: block; margin: 0 auto; top:250px;z-index:100; height:0 !important`;
    return (
        <div>
            <button onClick={this.onButtonClick}>test</button>
            <FadeLoader css={override} height={15} width={5} radius={2} margin={2} color={"#4183C5"} loading={this.state.pdfLoader} />
            <div id="doc-holder" className="document-holder" >

                <Document file={url}>
                    <Page key={pageNumber} pageNumber={pageNumber} renderAnnotationLayer={false}
                        renderTextLayer={false}
                        noData='No file found'
                        className="canvas-pdf-page"
                        scale={scale}
                        width={window.innerWidth * 0.9}
                        onRenderSuccess={(page) => this.renderSuccess(page)}
                    />
                </Document>

            </div>
        </div>
    )
}

Environment