Reusing AdobeDC.View to show multiple PDF files

[LadyDeryik]

I need to show multiple PDF files on a page, one at a time. User clicks Next and Previous buttons to cycle through these PDF files. I'm trying to reuse the AdobeDC.View object and trying to call previewFile() every time user clicks the next or previous buttons. But after the first file is successfully displayed the next call to previewFile() fails with this error message.

[mobx] Invariant failed: Since strict-mode is enabled, changing observed observable values outside actions is not allowed. Please wrap the code in an `action` if this change is intended. Tried to modify: AppStore@1.isHidingBranding

<script>
    let page = 1
    let adobeDCView = undefined

    function next() {
        page += 1

        showPage()
    }
    function prev() {
        page -= 1

        showPage()
    }
    function showPage() {
        const url = "api/view/papers.pdf?page=" + page

        adobeDCView.previewFile({
            content: { location: { url: url } },
            metaData: { fileName: "Legal Papers.pdf" }
        }, {
            defaultViewMode: "FIT_WIDTH", showAnnotationTools: false, showLeftHandPanel: false,
            showPageControls: false
        });
    }
    document.addEventListener("adobe_dc_view_sdk.ready", function () {
        adobeDCView = new AdobeDC.View({ clientId: "2d8a687b88304be2b4dde9cc2bed81c1", divId: "adobe-dc-view" });

        showPage()
    });
</script>

I can certainly recreate the AdobeDC.View object for every file. But it has a very heavy toll as it tries to download numerous script, CSS and other files. Granted, many of these files will eventually be cached by the browser. In any case, I would like to avoid this. Is there any way I can cycle through several files in a more lightweight fashion?

[Joel_Geraci]

I've never been able to find a way to reuse the AdobeDC.View object. However, I have a CodePen here that shows how to swap files. The performance is pretty good since as you noted, the scripts get cached.