@atlaskit/media-document-viewer 0.6.10 → 0.7.0

package/dist/es2019/documentViewer.js

@@ -2,7 +2,8 @@
 import "./documentViewer.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useCallback, useLayoutEffect, useRef } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { getDocument } from '@atlaskit/browser-apis';
 import { useStaticCallback } from '@atlaskit/media-common';
 import { Page } from './page';
 import { usePageContent } from './usePageContent';
@@ -10,22 +11,171 @@ import { getScrollElement } from './utils/getDocumentRoot';
 import { useCachedGetImage } from './utils/useCachedGetImage';
 const documentViewerStyles = null;
 const DEFAULT_PAGINATION_SIZE = 50;
-const DEFAULT_MAX_PAGE_IMAGE_ZOOM = 6;
+const INITIAL_PAGE_COUNT = 50;
+const APPEND_STEP = 50;
+
+/**
+ * TAIL-APPEND PATTERN FOR LAZY LOADING:
+ *
+ * The <Page> component has an `onVisible: () => void` prop that is called when the page
+ * enters the viewport (via useIntersectionObserver with a 300% rootMargin). This callback
+ * is currently used to load page content via `loadPageContent(i)`.
+ *
+ * For the LazyAppendPages feature (T2.3), the parent component can leverage this same
+ * mechanism by:
+ * 1. Rendering only a subset of pages (lazyPageCount instead of all documentMetadata.pageCount)
+ * 2. Passing onVisible={handleAppend} ONLY to the last rendered page (i === lazyPageCount - 1)
+ * 3. For all other pages, passing onVisible={() => loadPageContent(i)} as usual
+ *
+ * When the last page enters the viewport, handleAppend will be triggered, which can:
+ * - Fetch the next batch of pages
+ * - Append them to the rendered page list
+ * - This effectively creates a tail-append/infinite-scroll behavior without any changes to <Page>
+ *
+ * No changes to the <Page> signature are required. The onVisible callback is already
+ * properly wired and can be overridden by parent components for different behaviors.
+ */
+
+const LegacyPages = ({
+  documentMetadata,
+  getPageContent,
+  loadPageContent,
+  getImageUrl,
+  zoom,
+  onSuccess,
+  style,
+  onTouchStart,
+  onTouchMove,
+  onTouchEnd
+}) => {
+  var _documentMetadata$pag;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "document-viewer",
+    style: style,
+    onTouchStart: onTouchStart,
+    onTouchMove: onTouchMove,
+    onTouchEnd: onTouchEnd,
+    className: ax(["_zulputpp _1reo1wug _18m91wug _19pkxncg _1ul91osq _1e0c1txw _2lx21bp4 _1bsb1ris"])
+  }, [...Array((_documentMetadata$pag = documentMetadata.pageCount) !== null && _documentMetadata$pag !== void 0 ? _documentMetadata$pag : 4)].map((_, i) => {
+    const {
+      page,
+      fonts
+    } = getPageContent(i);
+    return /*#__PURE__*/React.createElement(Page, {
+      key: i,
+      getPageSrc: getImageUrl,
+      pageIndex: i,
+      zoom: zoom,
+      defaultDimensions: documentMetadata.defaultDimensions,
+      onVisible: loadPageContent,
+      onLoad: i === 0 ? onSuccess : undefined,
+      fonts: fonts,
+      content: page
+    });
+  }));
+};
+const LazyAppendPages = ({
+  documentMetadata,
+  getPageContent,
+  loadPageContent,
+  getImageUrl,
+  zoom,
+  onSuccess,
+  style,
+  onTouchStart,
+  onTouchMove,
+  onTouchEnd
+}) => {
+  var _documentMetadata$pag2;
+  const totalPages = (_documentMetadata$pag2 = documentMetadata.pageCount) !== null && _documentMetadata$pag2 !== void 0 ? _documentMetadata$pag2 : 4;
+  const [lazyPageCount, setLazyPageCount] = useState(() => Math.min(INITIAL_PAGE_COUNT, totalPages));
+
+  // lastAppendTriggerIndex deduplicates: only append when a strictly-larger
+  // tail page fires onVisible. This prevents double-append on scroll-up-then-down.
+  const lastAppendTriggerIndex = useRef(-1);
+
+  // Handle #page-N URL hash on first load: fast-forward lazyPageCount to include the target page.
+  // Capture totalPages in a ref so the one-shot effect can read it without being re-run when
+  // totalPages changes (the effect must only fire once, on mount).
+  const totalPagesRef = useRef(totalPages);
+  useEffect(() => {
+    const total = totalPagesRef.current;
+    const hash = window.location.hash;
+    const match = hash.match(/^#page-(\d+)$/);
+    if (match) {
+      const targetPage = parseInt(match[1], 10);
+      if (targetPage >= 1 && targetPage <= total) {
+        // Update dedup ref BEFORE setLazyPageCount so handleAppend does not
+        // cascade when the new tail page enters the viewport via IntersectionObserver.
+        lastAppendTriggerIndex.current = targetPage - 1;
+        // Fast-forward lazyPageCount to include the target page
+        setLazyPageCount(prev => Math.max(prev, targetPage));
+        // After the pages are mounted (next animation frame), scroll to the target
+        requestAnimationFrame(() => {
+          var _getDocument;
+          const el = (_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.getElementById(`page-${targetPage}`);
+          if (el) {
+            el.scrollIntoView();
+          }
+        });
+      }
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps -- intentionally one-shot; totalPages read via ref
+
+  const handleAppendAndLoadPageContent = useCallback(pageIndex => {
+    if (pageIndex > lastAppendTriggerIndex.current) {
+      lastAppendTriggerIndex.current = pageIndex;
+      setLazyPageCount(c => Math.min(c + APPEND_STEP, totalPages));
+    }
+    loadPageContent(pageIndex);
+  }, [totalPages, loadPageContent]);
+  const appendUpTo = useCallback(targetPage => {
+    const clamped = Math.min(Math.max(targetPage, 0), totalPages);
+    if (clamped > lastAppendTriggerIndex.current) {
+      lastAppendTriggerIndex.current = clamped - 1;
+      setLazyPageCount(prev => Math.max(prev, clamped));
+    }
+  }, [totalPages]);
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "document-viewer",
+    style: style,
+    onTouchStart: onTouchStart,
+    onTouchMove: onTouchMove,
+    onTouchEnd: onTouchEnd,
+    className: ax(["_zulputpp _1reo1wug _18m91wug _19pkxncg _1ul91osq _1e0c1txw _2lx21bp4 _1bsb1ris"])
+  }, [...Array(lazyPageCount)].map((_, i) => {
+    const {
+      page,
+      fonts
+    } = getPageContent(i);
+    return /*#__PURE__*/React.createElement(Page, {
+      key: i,
+      getPageSrc: getImageUrl,
+      pageIndex: i,
+      zoom: zoom,
+      defaultDimensions: documentMetadata.defaultDimensions,
+      onVisible: i === lazyPageCount - 1 ? handleAppendAndLoadPageContent : loadPageContent,
+      onLoad: i === 0 ? onSuccess : undefined,
+      fonts: fonts,
+      content: page,
+      appendUpTo: appendUpTo
+    });
+  }));
+};
 export const DocumentViewer = ({
   onSuccess,
   getContent,
   getPageImageUrl,
   paginationSize = DEFAULT_PAGINATION_SIZE,
-  maxPageImageZoom = DEFAULT_MAX_PAGE_IMAGE_ZOOM,
-  zoom
+  zoom,
+  enableLazyPageRendering = false
 }) => {
-  var _documentMetadata$pag;
   const {
     getPageContent,
     loadPageContent,
     documentMetadata
   } = usePageContent(getContent, paginationSize);
-  const getImageUrl = useCachedGetImage(getPageImageUrl, maxPageImageZoom);
+  const getImageUrl = useCachedGetImage(getPageImageUrl);
   const style = {
     '--document-viewer-zoom': zoom
   };
@@ -95,29 +245,17 @@ export const DocumentViewer = ({
   const onTouchEnd = useCallback(() => {
     touchStartRef.current = null;
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    "data-testid": "document-viewer",
-    style: style,
-    onTouchStart: onTouchStart,
-    onTouchMove: onTouchMove,
-    onTouchEnd: onTouchEnd,
-    className: ax(["_zulputpp _1reo1wug _18m91wug _19pkxncg _1ul91osq _1e0c1txw _2lx21bp4 _1bsb1ris"])
-  }, [...Array((_documentMetadata$pag = documentMetadata.pageCount) !== null && _documentMetadata$pag !== void 0 ? _documentMetadata$pag : 4)].map((_, i) => {
-    const {
-      page,
-      fonts
-    } = getPageContent(i);
-    return /*#__PURE__*/React.createElement(Page, {
-      key: i,
-      getPageSrc: getImageUrl,
-      maxPageImageZoom: maxPageImageZoom,
-      pageIndex: i,
-      zoom: zoom,
-      defaultDimensions: documentMetadata.defaultDimensions,
-      onVisible: () => loadPageContent(i),
-      onLoad: i === 0 ? onSuccess : undefined,
-      fonts: fonts,
-      content: page
-    });
-  }));
+  const sharedProps = {
+    documentMetadata,
+    getPageContent,
+    loadPageContent,
+    getImageUrl,
+    zoom,
+    onSuccess,
+    style,
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd
+  };
+  return enableLazyPageRendering ? /*#__PURE__*/React.createElement(LazyAppendPages, sharedProps) : /*#__PURE__*/React.createElement(LegacyPages, sharedProps);
 };

package/dist/es2019/page.js

@@ -4,12 +4,10 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, useEffect, useState } from 'react';
 import { useStaticCallback } from '@atlaskit/media-common';
-import { fg } from '@atlaskit/platform-feature-flags';
 import Spinner from '@atlaskit/spinner';
 import { Annotations } from './annotations';
 import { DocumentLinks } from './documentLinks';
 import { getDocumentRoot } from './utils/getDocumentRoot';
-import { getImageZoom } from './utils/useCachedGetImage';
 import { useIntersectionObserver } from './utils/useIntersectionObserver';
 const Span = ({
   span,
@@ -72,7 +70,8 @@ const PageView = /*#__PURE__*/forwardRef(({
   fonts,
   pageIndex,
   zoom,
-  onImageLoad
+  onImageLoad,
+  appendUpTo
 }, ref) => {
   const style = {};
   if (dimensions) {
@@ -105,7 +104,7 @@ const PageView = /*#__PURE__*/forwardRef(({
     src: imageSrc,
     alt: "",
     onLoad: onImageLoad,
-    className: ax(["_kqswstnw _154iidpf _1ltvidpf _uiztglyw", !fg('media-document-viewer-clear-render') && "_1kemd8h4"])
+    className: ax(["_kqswstnw _154iidpf _1ltvidpf _uiztglyw", "_1kemd8h4"])
   }), content && /*#__PURE__*/React.createElement("svg", {
     "data-testid": `page-${pageIndex}-text-layer`,
     style: style,
@@ -120,19 +119,20 @@ const PageView = /*#__PURE__*/forwardRef(({
   })), content.annotations && /*#__PURE__*/React.createElement(Annotations, {
     annotations: content.annotations
   }), content.links && /*#__PURE__*/React.createElement(DocumentLinks, {
-    links: content.links
+    links: content.links,
+    appendUpTo: appendUpTo
   })));
 });
 export const Page = ({
   getPageSrc,
-  maxPageImageZoom,
   content,
   fonts,
   pageIndex,
   zoom,
   defaultDimensions,
   onVisible,
-  onLoad
+  onLoad,
+  appendUpTo
 }) => {
   var _ref;
   const [imageSrc, setImageSrc] = useState();
@@ -146,7 +146,7 @@ export const Page = ({
     rootMargin: '300%',
     threshold: 0.1
   }, () => {
-    onVisible();
+    onVisible(pageIndex);
     getPageSrc(pageIndex, zoom).then(setImageSrc);
   });
   const [dimensions, setDimensions] = useState();
@@ -155,7 +155,7 @@ export const Page = ({
     onLoad === null || onLoad === void 0 ? void 0 : onLoad();
     if (!content) {
       const zoom = image.dataset.zoom ? Number(image.dataset.zoom) : 1;
-      const imageZoom = getImageZoom(zoom, maxPageImageZoom);
+      const imageZoom = zoom;
       const contentWidth = image.naturalWidth / imageZoom;
       const contentHeight = image.naturalHeight / imageZoom;
       setDimensions({
@@ -177,6 +177,7 @@ export const Page = ({
     fonts: fonts,
     pageIndex: pageIndex,
     zoom: zoom,
-    onImageLoad: onImageLoad
+    onImageLoad: onImageLoad,
+    appendUpTo: appendUpTo
   });
 };

package/dist/es2019/utils/useCachedGetImage.js

@@ -1,7 +1,6 @@
 import { useEffect, useRef } from 'react';
 import { useStaticCallback } from '@atlaskit/media-common';
-import { fg } from '@atlaskit/platform-feature-flags';
-export const useCachedGetImage = (getPageImageUrl, maxPageImageZoom) => {
+export const useCachedGetImage = getPageImageUrl => {
   const imageUrlRefs = useRef({});
   useEffect(() => {
     return () => {
@@ -12,12 +11,11 @@ export const useCachedGetImage = (getPageImageUrl, maxPageImageZoom) => {
     };
   }, []);
   const getImageUrl = useStaticCallback(async (pageNumber, zoom) => {
-    const imageZoom = getImageZoom(zoom, maxPageImageZoom);
-    const key = `${pageNumber}-${imageZoom}`;
+    const key = `${pageNumber}-${zoom}`;
     if (imageUrlRefs.current[key]) {
       return imageUrlRefs.current[key];
     }
-    let url = await getPageImageUrl(pageNumber, imageZoom);
+    let url = await getPageImageUrl(pageNumber, zoom);
     const isBlobUrl = url.startsWith('blob:');
     if (!isBlobUrl) {
       const blob = await fetch(url).then(res => res.blob());
@@ -27,21 +25,4 @@ export const useCachedGetImage = (getPageImageUrl, maxPageImageZoom) => {
     return url;
   });
   return getImageUrl;
-};
-
-/**
- * The actual zoom that will be requested from the image service.
- *
- * This is different from the 'zoom' prop because it is adjusted for the device pixel ratio.
- * We're achieving the same result as a srcset, crisp images for high DPI screens.
- *
- * We also reduce impact of excessively slow rendering by setting a max zoom level.
- * If the user is zoomed past this level, the image will just be scaled-up client side.
- */
-export function getImageZoom(zoom, maxPageImageZoom) {
-  if (!fg('media-document-viewer-clear-render')) {
-    return zoom;
-  }
-  const dpiAdjustedZoom = zoom * (window.devicePixelRatio || 1);
-  return Math.min(dpiAdjustedZoom, maxPageImageZoom);
-}
+};

package/dist/esm/documentLinks.js

@@ -12,7 +12,8 @@ var anchorStyles = {
 };
 var DocumentLink = function DocumentLink(_ref) {
   var link = _ref.link,
-    dataTestId = _ref.dataTestId;
+    dataTestId = _ref.dataTestId,
+    appendUpTo = _ref.appendUpTo;
   return /*#__PURE__*/React.createElement("foreignObject", {
     x: link.x,
     y: -link.y,
@@ -26,15 +27,20 @@ var DocumentLink = function DocumentLink(_ref) {
     style: anchorStyles
   })) : /*#__PURE__*/React.createElement(Anchor, _extends({}, foreignObjectProps, {
     href: "#page-".concat(link.p_num + 1),
-    style: anchorStyles
+    style: anchorStyles,
+    onClick: appendUpTo ? function () {
+      return appendUpTo(link.p_num + 1);
+    } : undefined
   })));
 };
 export var DocumentLinks = function DocumentLinks(_ref2) {
-  var links = _ref2.links;
+  var links = _ref2.links,
+    appendUpTo = _ref2.appendUpTo;
   return /*#__PURE__*/React.createElement(React.Fragment, null, links.map(function (link, i) {
     return /*#__PURE__*/React.createElement(DocumentLink, {
       link: link,
       dataTestId: "document-link-".concat(i),
+      appendUpTo: appendUpTo,
       key: i
     });
   }));

package/dist/esm/documentViewer.js

@@ -1,9 +1,11 @@
 /* documentViewer.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import "./documentViewer.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useCallback, useLayoutEffect, useRef } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { getDocument } from '@atlaskit/browser-apis';
 import { useStaticCallback } from '@atlaskit/media-common';
 import { Page } from './page';
 import { usePageContent } from './usePageContent';
@@ -11,22 +13,178 @@ import { getScrollElement } from './utils/getDocumentRoot';
 import { useCachedGetImage } from './utils/useCachedGetImage';
 var documentViewerStyles = null;
 var DEFAULT_PAGINATION_SIZE = 50;
-var DEFAULT_MAX_PAGE_IMAGE_ZOOM = 6;
-export var DocumentViewer = function DocumentViewer(_ref) {
+var INITIAL_PAGE_COUNT = 50;
+var APPEND_STEP = 50;
+
+/**
+ * TAIL-APPEND PATTERN FOR LAZY LOADING:
+ *
+ * The <Page> component has an `onVisible: () => void` prop that is called when the page
+ * enters the viewport (via useIntersectionObserver with a 300% rootMargin). This callback
+ * is currently used to load page content via `loadPageContent(i)`.
+ *
+ * For the LazyAppendPages feature (T2.3), the parent component can leverage this same
+ * mechanism by:
+ * 1. Rendering only a subset of pages (lazyPageCount instead of all documentMetadata.pageCount)
+ * 2. Passing onVisible={handleAppend} ONLY to the last rendered page (i === lazyPageCount - 1)
+ * 3. For all other pages, passing onVisible={() => loadPageContent(i)} as usual
+ *
+ * When the last page enters the viewport, handleAppend will be triggered, which can:
+ * - Fetch the next batch of pages
+ * - Append them to the rendered page list
+ * - This effectively creates a tail-append/infinite-scroll behavior without any changes to <Page>
+ *
+ * No changes to the <Page> signature are required. The onVisible callback is already
+ * properly wired and can be overridden by parent components for different behaviors.
+ */
+
+var LegacyPages = function LegacyPages(_ref) {
   var _documentMetadata$pag;
-  var onSuccess = _ref.onSuccess,
-    getContent = _ref.getContent,
-    getPageImageUrl = _ref.getPageImageUrl,
-    _ref$paginationSize = _ref.paginationSize,
-    paginationSize = _ref$paginationSize === void 0 ? DEFAULT_PAGINATION_SIZE : _ref$paginationSize,
-    _ref$maxPageImageZoom = _ref.maxPageImageZoom,
-    maxPageImageZoom = _ref$maxPageImageZoom === void 0 ? DEFAULT_MAX_PAGE_IMAGE_ZOOM : _ref$maxPageImageZoom,
-    zoom = _ref.zoom;
+  var documentMetadata = _ref.documentMetadata,
+    getPageContent = _ref.getPageContent,
+    loadPageContent = _ref.loadPageContent,
+    getImageUrl = _ref.getImageUrl,
+    zoom = _ref.zoom,
+    onSuccess = _ref.onSuccess,
+    style = _ref.style,
+    onTouchStart = _ref.onTouchStart,
+    onTouchMove = _ref.onTouchMove,
+    onTouchEnd = _ref.onTouchEnd;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "document-viewer",
+    style: style,
+    onTouchStart: onTouchStart,
+    onTouchMove: onTouchMove,
+    onTouchEnd: onTouchEnd,
+    className: ax(["_zulputpp _1reo1wug _18m91wug _19pkxncg _1ul91osq _1e0c1txw _2lx21bp4 _1bsb1ris"])
+  }, _toConsumableArray(Array((_documentMetadata$pag = documentMetadata.pageCount) !== null && _documentMetadata$pag !== void 0 ? _documentMetadata$pag : 4)).map(function (_, i) {
+    var _getPageContent = getPageContent(i),
+      page = _getPageContent.page,
+      fonts = _getPageContent.fonts;
+    return /*#__PURE__*/React.createElement(Page, {
+      key: i,
+      getPageSrc: getImageUrl,
+      pageIndex: i,
+      zoom: zoom,
+      defaultDimensions: documentMetadata.defaultDimensions,
+      onVisible: loadPageContent,
+      onLoad: i === 0 ? onSuccess : undefined,
+      fonts: fonts,
+      content: page
+    });
+  }));
+};
+var LazyAppendPages = function LazyAppendPages(_ref2) {
+  var _documentMetadata$pag2;
+  var documentMetadata = _ref2.documentMetadata,
+    getPageContent = _ref2.getPageContent,
+    loadPageContent = _ref2.loadPageContent,
+    getImageUrl = _ref2.getImageUrl,
+    zoom = _ref2.zoom,
+    onSuccess = _ref2.onSuccess,
+    style = _ref2.style,
+    onTouchStart = _ref2.onTouchStart,
+    onTouchMove = _ref2.onTouchMove,
+    onTouchEnd = _ref2.onTouchEnd;
+  var totalPages = (_documentMetadata$pag2 = documentMetadata.pageCount) !== null && _documentMetadata$pag2 !== void 0 ? _documentMetadata$pag2 : 4;
+  var _useState = useState(function () {
+      return Math.min(INITIAL_PAGE_COUNT, totalPages);
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    lazyPageCount = _useState2[0],
+    setLazyPageCount = _useState2[1];
+
+  // lastAppendTriggerIndex deduplicates: only append when a strictly-larger
+  // tail page fires onVisible. This prevents double-append on scroll-up-then-down.
+  var lastAppendTriggerIndex = useRef(-1);
+
+  // Handle #page-N URL hash on first load: fast-forward lazyPageCount to include the target page.
+  // Capture totalPages in a ref so the one-shot effect can read it without being re-run when
+  // totalPages changes (the effect must only fire once, on mount).
+  var totalPagesRef = useRef(totalPages);
+  useEffect(function () {
+    var total = totalPagesRef.current;
+    var hash = window.location.hash;
+    var match = hash.match(/^#page-(\d+)$/);
+    if (match) {
+      var targetPage = parseInt(match[1], 10);
+      if (targetPage >= 1 && targetPage <= total) {
+        // Update dedup ref BEFORE setLazyPageCount so handleAppend does not
+        // cascade when the new tail page enters the viewport via IntersectionObserver.
+        lastAppendTriggerIndex.current = targetPage - 1;
+        // Fast-forward lazyPageCount to include the target page
+        setLazyPageCount(function (prev) {
+          return Math.max(prev, targetPage);
+        });
+        // After the pages are mounted (next animation frame), scroll to the target
+        requestAnimationFrame(function () {
+          var _getDocument;
+          var el = (_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.getElementById("page-".concat(targetPage));
+          if (el) {
+            el.scrollIntoView();
+          }
+        });
+      }
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps -- intentionally one-shot; totalPages read via ref
+
+  var handleAppendAndLoadPageContent = useCallback(function (pageIndex) {
+    if (pageIndex > lastAppendTriggerIndex.current) {
+      lastAppendTriggerIndex.current = pageIndex;
+      setLazyPageCount(function (c) {
+        return Math.min(c + APPEND_STEP, totalPages);
+      });
+    }
+    loadPageContent(pageIndex);
+  }, [totalPages, loadPageContent]);
+  var appendUpTo = useCallback(function (targetPage) {
+    var clamped = Math.min(Math.max(targetPage, 0), totalPages);
+    if (clamped > lastAppendTriggerIndex.current) {
+      lastAppendTriggerIndex.current = clamped - 1;
+      setLazyPageCount(function (prev) {
+        return Math.max(prev, clamped);
+      });
+    }
+  }, [totalPages]);
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "document-viewer",
+    style: style,
+    onTouchStart: onTouchStart,
+    onTouchMove: onTouchMove,
+    onTouchEnd: onTouchEnd,
+    className: ax(["_zulputpp _1reo1wug _18m91wug _19pkxncg _1ul91osq _1e0c1txw _2lx21bp4 _1bsb1ris"])
+  }, _toConsumableArray(Array(lazyPageCount)).map(function (_, i) {
+    var _getPageContent2 = getPageContent(i),
+      page = _getPageContent2.page,
+      fonts = _getPageContent2.fonts;
+    return /*#__PURE__*/React.createElement(Page, {
+      key: i,
+      getPageSrc: getImageUrl,
+      pageIndex: i,
+      zoom: zoom,
+      defaultDimensions: documentMetadata.defaultDimensions,
+      onVisible: i === lazyPageCount - 1 ? handleAppendAndLoadPageContent : loadPageContent,
+      onLoad: i === 0 ? onSuccess : undefined,
+      fonts: fonts,
+      content: page,
+      appendUpTo: appendUpTo
+    });
+  }));
+};
+export var DocumentViewer = function DocumentViewer(_ref3) {
+  var onSuccess = _ref3.onSuccess,
+    getContent = _ref3.getContent,
+    getPageImageUrl = _ref3.getPageImageUrl,
+    _ref3$paginationSize = _ref3.paginationSize,
+    paginationSize = _ref3$paginationSize === void 0 ? DEFAULT_PAGINATION_SIZE : _ref3$paginationSize,
+    zoom = _ref3.zoom,
+    _ref3$enableLazyPageR = _ref3.enableLazyPageRendering,
+    enableLazyPageRendering = _ref3$enableLazyPageR === void 0 ? false : _ref3$enableLazyPageR;
   var _usePageContent = usePageContent(getContent, paginationSize),
     getPageContent = _usePageContent.getPageContent,
     loadPageContent = _usePageContent.loadPageContent,
     documentMetadata = _usePageContent.documentMetadata;
-  var getImageUrl = useCachedGetImage(getPageImageUrl, maxPageImageZoom);
+  var getImageUrl = useCachedGetImage(getPageImageUrl);
   var style = {
     '--document-viewer-zoom': zoom
   };
@@ -96,30 +254,17 @@ export var DocumentViewer = function DocumentViewer(_ref) {
   var onTouchEnd = useCallback(function () {
     touchStartRef.current = null;
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    "data-testid": "document-viewer",
+  var sharedProps = {
+    documentMetadata: documentMetadata,
+    getPageContent: getPageContent,
+    loadPageContent: loadPageContent,
+    getImageUrl: getImageUrl,
+    zoom: zoom,
+    onSuccess: onSuccess,
     style: style,
     onTouchStart: onTouchStart,
     onTouchMove: onTouchMove,
-    onTouchEnd: onTouchEnd,
-    className: ax(["_zulputpp _1reo1wug _18m91wug _19pkxncg _1ul91osq _1e0c1txw _2lx21bp4 _1bsb1ris"])
-  }, _toConsumableArray(Array((_documentMetadata$pag = documentMetadata.pageCount) !== null && _documentMetadata$pag !== void 0 ? _documentMetadata$pag : 4)).map(function (_, i) {
-    var _getPageContent = getPageContent(i),
-      page = _getPageContent.page,
-      fonts = _getPageContent.fonts;
-    return /*#__PURE__*/React.createElement(Page, {
-      key: i,
-      getPageSrc: getImageUrl,
-      maxPageImageZoom: maxPageImageZoom,
-      pageIndex: i,
-      zoom: zoom,
-      defaultDimensions: documentMetadata.defaultDimensions,
-      onVisible: function onVisible() {
-        return loadPageContent(i);
-      },
-      onLoad: i === 0 ? onSuccess : undefined,
-      fonts: fonts,
-      content: page
-    });
-  }));
+    onTouchEnd: onTouchEnd
+  };
+  return enableLazyPageRendering ? /*#__PURE__*/React.createElement(LazyAppendPages, sharedProps) : /*#__PURE__*/React.createElement(LegacyPages, sharedProps);
 };