@nypl/web-reader 3.2.0 → 3.2.1

package/dist/esm/index.js

@@ -13746,7 +13746,7 @@ var require_debounce = __commonJS({
 });
 
 // src/index.tsx
-import React67 from "react";
+import React68 from "react";
 
 // node_modules/@emotion/react/dist/emotion-react.browser.esm.js
 import * as React2 from "react";
@@ -36640,6 +36640,9 @@ var ErrorBoundary = class extends React40.Component {
 var ErrorBoundary_default = ErrorBoundary;
 
 // src/ui/manager.tsx
+import * as React43 from "react";
+
+// src/ui/Footer.tsx
 import * as React42 from "react";
 
 // src/ui/PageButton.tsx
@@ -36660,12 +36663,55 @@ function PageButton(props) {
 }
 var PageButton_default = PageButton;
 
+// src/ui/Footer.tsx
+var Footer = (_a) => {
+  var _b = _a, {
+    state: state2,
+    navigator: navigator2
+  } = _b, rest = __objRest(_b, [
+    "state",
+    "navigator"
+  ]);
+  const bgColor = useColorModeValue_default("ui.white", "ui.black", "ui.sepia");
+  const isAtStart = state2 == null ? void 0 : state2.atStart;
+  const isAtEnd = state2 == null ? void 0 : state2.atEnd;
+  return /* @__PURE__ */ React42.createElement(Flex, __spreadValues({
+    as: "footer",
+    position: "sticky",
+    height: `${FOOTER_HEIGHT}px`,
+    zIndex: "sticky",
+    bottom: "0",
+    justifyContent: "space-between",
+    w: "100%",
+    bg: bgColor,
+    borderTop: "1px solid",
+    borderColor: "gray.100"
+  }, rest), /* @__PURE__ */ React42.createElement(PageButton_default, {
+    onClick: navigator2 == null ? void 0 : navigator2.goBackward,
+    "aria-label": "Previous Page",
+    disabled: isAtStart
+  }, /* @__PURE__ */ React42.createElement(Icon, {
+    as: MdKeyboardArrowLeft,
+    w: 6,
+    h: 6
+  }), "Previous"), /* @__PURE__ */ React42.createElement(PageButton_default, {
+    onClick: navigator2 == null ? void 0 : navigator2.goForward,
+    "aria-label": "Next Page",
+    disabled: isAtEnd
+  }, "Next ", /* @__PURE__ */ React42.createElement(Icon, {
+    as: MdKeyboardArrowRight,
+    w: 6,
+    h: 6
+  })));
+};
+var Footer_default = Footer;
+
 // src/ui/manager.tsx
 var ManagerUI = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ React42.createElement(ThemeProvider3, {
+  return /* @__PURE__ */ React43.createElement(ThemeProvider3, {
     theme: getTheme3((_b = (_a = props.state) == null ? void 0 : _a.settings) == null ? void 0 : _b.colorMode)
-  }, /* @__PURE__ */ React42.createElement(WebReaderContent, __spreadValues({}, props)));
+  }, /* @__PURE__ */ React43.createElement(WebReaderContent, __spreadValues({}, props)));
 };
 var WebReaderContent = (_a) => {
   var _b = _a, {
@@ -36675,19 +36721,16 @@ var WebReaderContent = (_a) => {
     "children",
     "headerLeft"
   ]);
-  var _a2, _b2, _c, _d;
   const bgColor = useColorModeValue_default("ui.white", "ui.black", "ui.sepia");
-  const containerRef = React42.useRef(null);
-  const isAtStart = (_a2 = props.state) == null ? void 0 : _a2.atStart;
-  const isAtEnd = (_b2 = props.state) == null ? void 0 : _b2.atEnd;
-  return /* @__PURE__ */ React42.createElement(Flex, {
+  const containerRef = React43.useRef(null);
+  return /* @__PURE__ */ React43.createElement(Flex, {
     flexDir: "column",
     w: "100%",
     position: "relative"
-  }, !props.isLoading && /* @__PURE__ */ React42.createElement(Header, __spreadValues({
+  }, !props.isLoading && /* @__PURE__ */ React43.createElement(Header, __spreadValues({
     headerLeft,
     containerRef
-  }, props)), /* @__PURE__ */ React42.createElement(Flex, {
+  }, props)), /* @__PURE__ */ React43.createElement(Flex, {
     as: "main",
     ref: containerRef,
     position: "relative",
@@ -36695,39 +36738,15 @@ var WebReaderContent = (_a) => {
     flexDir: "column",
     alignItems: "stretch",
     flex: "1 1 auto"
-  }, children), /* @__PURE__ */ React42.createElement(Flex, {
-    as: "footer",
-    position: "sticky",
-    height: `${FOOTER_HEIGHT}px`,
-    zIndex: "docked",
-    bottom: "0",
-    justifyContent: "space-between",
-    w: "100%",
-    bg: bgColor,
-    borderTop: "1px solid",
-    borderColor: "gray.100"
-  }, /* @__PURE__ */ React42.createElement(PageButton_default, {
-    onClick: (_c = props.navigator) == null ? void 0 : _c.goBackward,
-    "aria-label": "Previous Page",
-    disabled: isAtStart
-  }, /* @__PURE__ */ React42.createElement(Icon, {
-    as: MdKeyboardArrowLeft,
-    w: 6,
-    h: 6
-  }), "Previous"), /* @__PURE__ */ React42.createElement(PageButton_default, {
-    onClick: (_d = props.navigator) == null ? void 0 : _d.goForward,
-    "aria-label": "Next Page",
-    disabled: isAtEnd
-  }, "Next ", /* @__PURE__ */ React42.createElement(Icon, {
-    as: MdKeyboardArrowRight,
-    w: 6,
-    h: 6
-  }))));
+  }, children), /* @__PURE__ */ React43.createElement(Footer_default, {
+    state: props.state,
+    navigator: props.navigator
+  }));
 };
 var manager_default = ManagerUI;
 
 // src/useWebReader.tsx
-import React65 from "react";
+import React66 from "react";
 
 // src/utils/fetch.ts
 function fetchJson(url) {
@@ -36887,7 +36906,7 @@ function _getPrototypeOf(o) {
 // node_modules/react-pdf/dist/esm/Document.js
 var import_prop_types3 = __toESM(require_prop_types());
 var import_make_event_props2 = __toESM(require_entry());
-import React44, { PureComponent } from "react";
+import React45, { PureComponent } from "react";
 
 // node_modules/make-cancellable-promise/dist/esm/index.js
 function makeCancellablePromise(promise) {
@@ -36925,10 +36944,10 @@ var DocumentContext_default = /* @__PURE__ */ createContext13(null);
 
 // node_modules/react-pdf/dist/esm/Message.js
 var import_prop_types = __toESM(require_prop_types());
-import React43 from "react";
+import React44 from "react";
 function Message(_ref) {
   var children = _ref.children, type = _ref.type;
-  return /* @__PURE__ */ React43.createElement("div", {
+  return /* @__PURE__ */ React44.createElement("div", {
     className: "react-pdf__message react-pdf__message--".concat(type)
   }, children);
 }
@@ -37752,7 +37771,7 @@ var Document = /* @__PURE__ */ function(_PureComponent) {
     key: "renderChildren",
     value: function renderChildren() {
       var children = this.props.children;
-      return /* @__PURE__ */ React44.createElement(DocumentContext_default.Provider, {
+      return /* @__PURE__ */ React45.createElement(DocumentContext_default.Provider, {
         value: this.childContext
       }, children);
     }
@@ -37763,19 +37782,19 @@ var Document = /* @__PURE__ */ function(_PureComponent) {
       var pdf = this.state.pdf;
       if (!file) {
         var noData = this.props.noData;
-        return /* @__PURE__ */ React44.createElement(Message, {
+        return /* @__PURE__ */ React45.createElement(Message, {
           type: "no-data"
         }, typeof noData === "function" ? noData() : noData);
       }
       if (pdf === null) {
         var loading = this.props.loading;
-        return /* @__PURE__ */ React44.createElement(Message, {
+        return /* @__PURE__ */ React45.createElement(Message, {
           type: "loading"
         }, typeof loading === "function" ? loading() : loading);
       }
       if (pdf === false) {
         var error2 = this.props.error;
-        return /* @__PURE__ */ React44.createElement(Message, {
+        return /* @__PURE__ */ React45.createElement(Message, {
           type: "error"
         }, typeof error2 === "function" ? error2() : error2);
       }
@@ -37785,7 +37804,7 @@ var Document = /* @__PURE__ */ function(_PureComponent) {
     key: "render",
     value: function render() {
       var _this$props2 = this.props, className = _this$props2.className, inputRef = _this$props2.inputRef;
-      return /* @__PURE__ */ React44.createElement("div", _extends({
+      return /* @__PURE__ */ React45.createElement("div", _extends({
         className: mergeClassNames("react-pdf__Document", className),
         ref: inputRef
       }, this.eventProps), this.renderContent());
@@ -37860,7 +37879,7 @@ Document.propTypes = _objectSpread(_objectSpread({}, eventProps), {}, {
 // node_modules/react-pdf/dist/esm/Outline.js
 var import_regenerator4 = __toESM(require_regenerator());
 var import_prop_types5 = __toESM(require_prop_types());
-import React46, { PureComponent as PureComponent3 } from "react";
+import React47, { PureComponent as PureComponent3 } from "react";
 var import_make_event_props3 = __toESM(require_entry());
 
 // node_modules/react-pdf/dist/esm/OutlineContext.js
@@ -37870,7 +37889,7 @@ var OutlineContext_default = /* @__PURE__ */ createContext14(null);
 // node_modules/react-pdf/dist/esm/OutlineItem.js
 var import_regenerator3 = __toESM(require_regenerator());
 var import_prop_types4 = __toESM(require_prop_types());
-import React45, { PureComponent as PureComponent2 } from "react";
+import React46, { PureComponent as PureComponent2 } from "react";
 
 // node_modules/react-pdf/dist/esm/Ref.js
 var Ref = /* @__PURE__ */ function() {
@@ -38064,8 +38083,8 @@ var OutlineItemInternal = /* @__PURE__ */ function(_PureComponent) {
         return null;
       }
       var subitems = item.items;
-      return /* @__PURE__ */ React45.createElement("ul", null, subitems.map(function(subitem, subitemIndex) {
-        return /* @__PURE__ */ React45.createElement(OutlineItemInternal2, _extends({
+      return /* @__PURE__ */ React46.createElement("ul", null, subitems.map(function(subitem, subitemIndex) {
+        return /* @__PURE__ */ React46.createElement(OutlineItemInternal2, _extends({
           key: typeof subitem.destination === "string" ? subitem.destination : subitemIndex,
           item: subitem
         }, otherProps));
@@ -38075,7 +38094,7 @@ var OutlineItemInternal = /* @__PURE__ */ function(_PureComponent) {
     key: "render",
     value: function render() {
       var item = this.props.item;
-      return /* @__PURE__ */ React45.createElement("li", null, /* @__PURE__ */ React45.createElement("a", {
+      return /* @__PURE__ */ React46.createElement("li", null, /* @__PURE__ */ React46.createElement("a", {
         href: "#",
         onClick: this.onClick
       }, item.title), this.renderSubitems());
@@ -38097,9 +38116,9 @@ OutlineItemInternal.propTypes = {
   pdf: isPdf.isRequired
 };
 var OutlineItem = function OutlineItem2(props) {
-  return /* @__PURE__ */ React45.createElement(DocumentContext_default.Consumer, null, function(documentContext) {
-    return /* @__PURE__ */ React45.createElement(OutlineContext_default.Consumer, null, function(outlineContext) {
-      return /* @__PURE__ */ React45.createElement(OutlineItemInternal, _extends({}, documentContext, outlineContext, props));
+  return /* @__PURE__ */ React46.createElement(DocumentContext_default.Consumer, null, function(documentContext) {
+    return /* @__PURE__ */ React46.createElement(OutlineContext_default.Consumer, null, function(outlineContext) {
+      return /* @__PURE__ */ React46.createElement(OutlineItemInternal, _extends({}, documentContext, outlineContext, props));
     });
   });
 };
@@ -38267,8 +38286,8 @@ var OutlineInternal = /* @__PURE__ */ function(_PureComponent) {
     key: "renderOutline",
     value: function renderOutline() {
       var outline5 = this.state.outline;
-      return /* @__PURE__ */ React46.createElement("ul", null, outline5.map(function(item, itemIndex) {
-        return /* @__PURE__ */ React46.createElement(OutlineItem_default, {
+      return /* @__PURE__ */ React47.createElement("ul", null, outline5.map(function(item, itemIndex) {
+        return /* @__PURE__ */ React47.createElement(OutlineItem_default, {
           key: typeof item.destination === "string" ? item.destination : itemIndex,
           item
         });
@@ -38283,10 +38302,10 @@ var OutlineInternal = /* @__PURE__ */ function(_PureComponent) {
         return null;
       }
       var _this$props = this.props, className = _this$props.className, inputRef = _this$props.inputRef;
-      return /* @__PURE__ */ React46.createElement("div", _extends({
+      return /* @__PURE__ */ React47.createElement("div", _extends({
         className: mergeClassNames("react-pdf__Outline", className),
         ref: inputRef
-      }, this.eventProps), /* @__PURE__ */ React46.createElement(OutlineContext_default.Provider, {
+      }, this.eventProps), /* @__PURE__ */ React47.createElement(OutlineContext_default.Provider, {
         value: this.childContext
       }, this.renderOutline()));
     }
@@ -38320,7 +38339,7 @@ OutlineInternal.propTypes = _objectSpread2({
 // node_modules/react-pdf/dist/esm/Page.js
 var import_regenerator8 = __toESM(require_regenerator());
 var import_prop_types11 = __toESM(require_prop_types());
-import React52, { PureComponent as PureComponent9 } from "react";
+import React53, { PureComponent as PureComponent9 } from "react";
 var import_make_event_props4 = __toESM(require_entry());
 
 // node_modules/merge-refs/dist/esm/index.js
@@ -38349,7 +38368,7 @@ var PageContext_default = /* @__PURE__ */ createContext15(null);
 
 // node_modules/react-pdf/dist/esm/Page/PageCanvas.js
 var import_prop_types6 = __toESM(require_prop_types());
-import React47, { PureComponent as PureComponent4 } from "react";
+import React48, { PureComponent as PureComponent4 } from "react";
 function _createSuper4(Derived) {
   var hasNativeReflectConstruct = _isNativeReflectConstruct4();
   return function _createSuperInternal() {
@@ -38464,7 +38483,7 @@ var PageCanvasInternal = /* @__PURE__ */ function(_PureComponent) {
     value: function render() {
       var _this2 = this;
       var canvasRef = this.props.canvasRef;
-      return /* @__PURE__ */ React47.createElement("canvas", {
+      return /* @__PURE__ */ React48.createElement("canvas", {
         className: "react-pdf__Page__canvas",
         dir: "ltr",
         ref: mergeRefs2(canvasRef, function(ref) {
@@ -38508,15 +38527,15 @@ PageCanvasInternal.propTypes = {
   scale: import_prop_types6.default.number.isRequired
 };
 function PageCanvas(props) {
-  return /* @__PURE__ */ React47.createElement(PageContext_default.Consumer, null, function(context) {
-    return /* @__PURE__ */ React47.createElement(PageCanvasInternal, _extends({}, context, props));
+  return /* @__PURE__ */ React48.createElement(PageContext_default.Consumer, null, function(context) {
+    return /* @__PURE__ */ React48.createElement(PageCanvasInternal, _extends({}, context, props));
   });
 }
 
 // node_modules/react-pdf/dist/esm/Page/PageSVG.js
 var import_prop_types7 = __toESM(require_prop_types());
 var pdfjs2 = __toESM(require_pdf());
-import React48, { PureComponent as PureComponent5 } from "react";
+import React49, { PureComponent as PureComponent5 } from "react";
 function _createSuper5(Derived) {
   var hasNativeReflectConstruct = _isNativeReflectConstruct5();
   return function _createSuperInternal() {
@@ -38609,7 +38628,7 @@ var PageSVGInternal = /* @__PURE__ */ function(_PureComponent) {
     value: function render() {
       var _this2 = this;
       var _this$viewport2 = this.viewport, width = _this$viewport2.width, height = _this$viewport2.height;
-      return /* @__PURE__ */ React48.createElement("div", {
+      return /* @__PURE__ */ React49.createElement("div", {
         className: "react-pdf__Page__svg",
         ref: function ref(_ref) {
           return _this2.drawPageOnContainer(_ref);
@@ -38644,20 +38663,20 @@ PageSVGInternal.propTypes = {
   scale: import_prop_types7.default.number.isRequired
 };
 function PageSVG(props) {
-  return /* @__PURE__ */ React48.createElement(PageContext_default.Consumer, null, function(context) {
-    return /* @__PURE__ */ React48.createElement(PageSVGInternal, _extends({}, context, props));
+  return /* @__PURE__ */ React49.createElement(PageContext_default.Consumer, null, function(context) {
+    return /* @__PURE__ */ React49.createElement(PageSVGInternal, _extends({}, context, props));
   });
 }
 
 // node_modules/react-pdf/dist/esm/Page/TextLayer.js
 var import_regenerator6 = __toESM(require_regenerator());
 var import_prop_types9 = __toESM(require_prop_types());
-import React50, { PureComponent as PureComponent7 } from "react";
+import React51, { PureComponent as PureComponent7 } from "react";
 
 // node_modules/react-pdf/dist/esm/Page/TextLayerItem.js
 var import_regenerator5 = __toESM(require_regenerator());
 var import_prop_types8 = __toESM(require_prop_types());
-import React49, { PureComponent as PureComponent6 } from "react";
+import React50, { PureComponent as PureComponent6 } from "react";
 function _createSuper6(Derived) {
   var hasNativeReflectConstruct = _isNativeReflectConstruct6();
   return function _createSuperInternal() {
@@ -38793,7 +38812,7 @@ var TextLayerItemInternal = /* @__PURE__ */ function(_PureComponent) {
       var _this2 = this;
       var fontSize = this.fontSize, top2 = this.top, left2 = this.left;
       var _this$props2 = this.props, customTextRenderer = _this$props2.customTextRenderer, scale2 = _this$props2.scale, text = _this$props2.str;
-      return /* @__PURE__ */ React49.createElement("span", {
+      return /* @__PURE__ */ React50.createElement("span", {
         ref: function ref(_ref) {
           _this2.item = _ref;
         },
@@ -38877,8 +38896,8 @@ TextLayerItemInternal.propTypes = {
   width: import_prop_types8.default.number.isRequired
 };
 function TextLayerItem(props) {
-  return /* @__PURE__ */ React49.createElement(PageContext_default.Consumer, null, function(context) {
-    return /* @__PURE__ */ React49.createElement(TextLayerItemInternal, _extends({}, context, props));
+  return /* @__PURE__ */ React50.createElement(PageContext_default.Consumer, null, function(context) {
+    return /* @__PURE__ */ React50.createElement(TextLayerItemInternal, _extends({}, context, props));
   });
 }
 
@@ -39002,7 +39021,7 @@ var TextLayerInternal = /* @__PURE__ */ function(_PureComponent) {
         return null;
       }
       return textItems.map(function(textItem, itemIndex) {
-        return /* @__PURE__ */ React50.createElement(TextLayerItem, _extends({
+        return /* @__PURE__ */ React51.createElement(TextLayerItem, _extends({
           key: itemIndex,
           itemIndex
         }, textItem));
@@ -39012,7 +39031,7 @@ var TextLayerInternal = /* @__PURE__ */ function(_PureComponent) {
     key: "render",
     value: function render() {
       var viewport2 = this.unrotatedViewport, rotate = this.rotate;
-      return /* @__PURE__ */ React50.createElement("div", {
+      return /* @__PURE__ */ React51.createElement("div", {
         className: "react-pdf__Page__textContent",
         style: {
           position: "absolute",
@@ -39052,8 +39071,8 @@ TextLayerInternal.propTypes = {
   scale: import_prop_types9.default.number
 };
 function TextLayer(props) {
-  return /* @__PURE__ */ React50.createElement(PageContext_default.Consumer, null, function(context) {
-    return /* @__PURE__ */ React50.createElement(TextLayerInternal, _extends({}, context, props));
+  return /* @__PURE__ */ React51.createElement(PageContext_default.Consumer, null, function(context) {
+    return /* @__PURE__ */ React51.createElement(TextLayerInternal, _extends({}, context, props));
   });
 }
 
@@ -39061,7 +39080,7 @@ function TextLayer(props) {
 var import_regenerator7 = __toESM(require_regenerator());
 var import_prop_types10 = __toESM(require_prop_types());
 var pdfjs3 = __toESM(require_pdf());
-import React51, { PureComponent as PureComponent8 } from "react";
+import React52, { PureComponent as PureComponent8 } from "react";
 function _createSuper8(Derived) {
   var hasNativeReflectConstruct = _isNativeReflectConstruct8();
   return function _createSuperInternal() {
@@ -39215,7 +39234,7 @@ var AnnotationLayerInternal = /* @__PURE__ */ function(_PureComponent) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      return /* @__PURE__ */ React51.createElement("div", {
+      return /* @__PURE__ */ React52.createElement("div", {
         className: "react-pdf__Page__annotations annotationLayer",
         ref: function ref(_ref2) {
           _this2.annotationLayer = _ref2;
@@ -39247,9 +39266,9 @@ AnnotationLayerInternal.propTypes = {
   scale: import_prop_types10.default.number
 };
 var AnnotationLayer2 = function AnnotationLayer3(props) {
-  return /* @__PURE__ */ React51.createElement(DocumentContext_default.Consumer, null, function(documentContext) {
-    return /* @__PURE__ */ React51.createElement(PageContext_default.Consumer, null, function(pageContext) {
-      return /* @__PURE__ */ React51.createElement(AnnotationLayerInternal, _extends({}, documentContext, pageContext, props));
+  return /* @__PURE__ */ React52.createElement(DocumentContext_default.Consumer, null, function(documentContext) {
+    return /* @__PURE__ */ React52.createElement(PageContext_default.Consumer, null, function(pageContext) {
+      return /* @__PURE__ */ React52.createElement(AnnotationLayerInternal, _extends({}, documentContext, pageContext, props));
     });
   });
 };
@@ -39451,12 +39470,12 @@ var PageInternal = /* @__PURE__ */ function(_PureComponent) {
         case "none":
           return null;
         case "svg":
-          return /* @__PURE__ */ React52.createElement(PageSVG, {
+          return /* @__PURE__ */ React53.createElement(PageSVG, {
             key: "".concat(this.pageKeyNoScale, "_svg")
           });
         case "canvas":
         default:
-          return /* @__PURE__ */ React52.createElement(PageCanvas, {
+          return /* @__PURE__ */ React53.createElement(PageCanvas, {
             key: "".concat(this.pageKey, "_canvas"),
             canvasRef
           });
@@ -39469,7 +39488,7 @@ var PageInternal = /* @__PURE__ */ function(_PureComponent) {
       if (!renderTextLayer2) {
         return null;
       }
-      return /* @__PURE__ */ React52.createElement(TextLayer, {
+      return /* @__PURE__ */ React53.createElement(TextLayer, {
         key: "".concat(this.pageKey, "_text")
       });
     }
@@ -39480,7 +39499,7 @@ var PageInternal = /* @__PURE__ */ function(_PureComponent) {
       if (!renderAnnotationLayer2) {
         return null;
       }
-      return /* @__PURE__ */ React52.createElement(AnnotationLayer_default, {
+      return /* @__PURE__ */ React53.createElement(AnnotationLayer_default, {
         key: "".concat(this.pageKey, "_annotations")
       });
     }
@@ -39488,7 +39507,7 @@ var PageInternal = /* @__PURE__ */ function(_PureComponent) {
     key: "renderChildren",
     value: function renderChildren() {
       var children = this.props.children;
-      return /* @__PURE__ */ React52.createElement(PageContext_default.Provider, {
+      return /* @__PURE__ */ React53.createElement(PageContext_default.Provider, {
         value: this.childContext
       }, this.renderMainLayer(), this.renderTextLayer(), this.renderAnnotationLayer(), children);
     }
@@ -39500,19 +39519,19 @@ var PageInternal = /* @__PURE__ */ function(_PureComponent) {
       var page = this.state.page;
       if (!pageNumber) {
         var noData = this.props.noData;
-        return /* @__PURE__ */ React52.createElement(Message, {
+        return /* @__PURE__ */ React53.createElement(Message, {
           type: "no-data"
         }, typeof noData === "function" ? noData() : noData);
       }
       if (pdf === null || page === null) {
         var loading = this.props.loading;
-        return /* @__PURE__ */ React52.createElement(Message, {
+        return /* @__PURE__ */ React53.createElement(Message, {
           type: "loading"
         }, typeof loading === "function" ? loading() : loading);
       }
       if (pdf === false || page === false) {
         var error2 = this.props.error;
-        return /* @__PURE__ */ React52.createElement(Message, {
+        return /* @__PURE__ */ React53.createElement(Message, {
           type: "error"
         }, typeof error2 === "function" ? error2() : error2);
       }
@@ -39523,7 +39542,7 @@ var PageInternal = /* @__PURE__ */ function(_PureComponent) {
     value: function render() {
       var pageNumber = this.pageNumber;
       var _this$props3 = this.props, className = _this$props3.className, inputRef = _this$props3.inputRef;
-      return /* @__PURE__ */ React52.createElement("div", _extends({
+      return /* @__PURE__ */ React53.createElement("div", _extends({
         className: mergeClassNames("react-pdf__Page", className),
         "data-page-number": pageNumber,
         ref: mergeRefs2(inputRef, this.ref),
@@ -39667,13 +39686,13 @@ PageInternal.propTypes = _objectSpread3(_objectSpread3({}, eventProps), {}, {
   width: import_prop_types11.default.number
 });
 function Page(props, ref) {
-  return /* @__PURE__ */ React52.createElement(DocumentContext_default.Consumer, null, function(context) {
-    return /* @__PURE__ */ React52.createElement(PageInternal, _extends({
+  return /* @__PURE__ */ React53.createElement(DocumentContext_default.Consumer, null, function(context) {
+    return /* @__PURE__ */ React53.createElement(PageInternal, _extends({
       ref
     }, context, props));
   });
 }
-var Page_default = /* @__PURE__ */ React52.forwardRef(Page);
+var Page_default = /* @__PURE__ */ React53.forwardRef(Page);
 
 // node_modules/react-pdf/dist/esm/entry.js
 if (isLocalFileSystem) {
@@ -39682,10 +39701,10 @@ if (isLocalFileSystem) {
 pdfjs4.GlobalWorkerOptions.workerSrc = "pdf.worker.js";
 
 // src/PdfReader/index.tsx
-import * as React56 from "react";
+import * as React57 from "react";
 
 // src/PdfReader/useMeasure.tsx
-import * as React53 from "react";
+import * as React54 from "react";
 var DEFAULT_DIMENSION = {
   x: 0,
   y: 0,
@@ -39697,9 +39716,9 @@ var DEFAULT_DIMENSION = {
   right: 0
 };
 function useMeasure() {
-  const [element, ref] = React53.useState(null);
-  const [rect, setRect] = React53.useState(DEFAULT_DIMENSION);
-  const observer = React53.useMemo(() => new window.ResizeObserver((entries) => {
+  const [element, ref] = React54.useState(null);
+  const [rect, setRect] = React54.useState(DEFAULT_DIMENSION);
+  const observer = React54.useMemo(() => new window.ResizeObserver((entries) => {
     if (entries[0]) {
       const {
         x,
@@ -39714,7 +39733,7 @@ function useMeasure() {
       setRect({ x, y, width, height, top: top2, left: left2, bottom: bottom2, right: right2 });
     }
   }), []);
-  React53.useLayoutEffect(() => {
+  React54.useLayoutEffect(() => {
     if (!element)
       return;
     observer.observe(element);
@@ -39743,10 +39762,10 @@ var ChakraPage = chakra(Page_default, {
 var ChakraPage_default = ChakraPage;
 
 // src/PdfReader/ScrollPage.tsx
-import React54 from "react";
+import React55 from "react";
 
 // node_modules/react-intersection-observer/react-intersection-observer.m.js
-import { createElement as createElement32, Component as Component3, useRef as useRef19, useState as useState18, useCallback as useCallback15, useEffect as useEffect20 } from "react";
+import { createElement as createElement33, Component as Component3, useRef as useRef19, useState as useState18, useCallback as useCallback15, useEffect as useEffect20 } from "react";
 function _extends22() {
   _extends22 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -39937,7 +39956,7 @@ var InView = /* @__PURE__ */ function(_React$Component) {
       });
     }
     var _this$props2 = this.props, children = _this$props2.children, as = _this$props2.as, tag2 = _this$props2.tag, props = _objectWithoutPropertiesLoose17(_this$props2, ["children", "as", "tag", "triggerOnce", "threshold", "root", "rootMargin", "onChange", "skip", "trackVisibility", "delay", "initialInView"]);
-    return /* @__PURE__ */ createElement32(as || tag2 || "div", _extends22({
+    return /* @__PURE__ */ createElement33(as || tag2 || "div", _extends22({
       ref: this.handleNode
     }, props), children);
   };
@@ -40005,7 +40024,7 @@ function useInView(_temp) {
 
 // src/PdfReader/ScrollPage.tsx
 var Placeholder = ({ width, height, pageNumber }) => {
-  return /* @__PURE__ */ React54.createElement("div", {
+  return /* @__PURE__ */ React55.createElement("div", {
     "data-page-number": pageNumber,
     style: { width, height }
   });
@@ -40022,15 +40041,15 @@ var ScrollPage = ({
     threshold: 0,
     triggerOnce: true
   });
-  return /* @__PURE__ */ React54.createElement("div", {
+  return /* @__PURE__ */ React55.createElement("div", {
     ref
-  }, inView ? /* @__PURE__ */ React54.createElement(ChakraPage_default, {
+  }, inView ? /* @__PURE__ */ React55.createElement(ChakraPage_default, {
     "data-page-number": pageNumber,
     pageNumber,
     scale: scale2,
     width,
     onLoadSuccess
-  }) : /* @__PURE__ */ React54.createElement(Placeholder, {
+  }) : /* @__PURE__ */ React55.createElement(Placeholder, {
     width: placeholderWidth,
     height: placeholderHeight,
     pageNumber
@@ -40039,33 +40058,51 @@ var ScrollPage = ({
 var ScrollPage_default = ScrollPage;
 
 // src/ui/LoadingSkeleton.tsx
-import React55 from "react";
-function LoadingSkeleton({
+import React56 from "react";
+var LoadingSkeletonContent = ({
   height
-}) {
-  return /* @__PURE__ */ React55.createElement(React55.Fragment, null, /* @__PURE__ */ React55.createElement(HeaderWrapper, null), /* @__PURE__ */ React55.createElement(Box, {
+}) => {
+  const bgColor = useColorModeValue_default("ui.white", "ui.black", "ui.sepia");
+  return /* @__PURE__ */ React56.createElement(React56.Fragment, null, /* @__PURE__ */ React56.createElement(HeaderWrapper, {
+    bg: bgColor
+  }), /* @__PURE__ */ React56.createElement(Box, {
     padding: "6",
-    bg: "white",
-    mt: "7",
+    bg: bgColor,
+    mt: "0",
     height,
     "aria-label": "Loading book...",
     "aria-busy": "true",
     role: "progressbar"
-  }, /* @__PURE__ */ React55.createElement(Flex, {
+  }, /* @__PURE__ */ React56.createElement(Flex, {
     justifyContent: "center"
-  }, /* @__PURE__ */ React55.createElement(Skeleton, {
+  }, /* @__PURE__ */ React56.createElement(Skeleton, {
     height: "20px",
     mb: "7",
     w: "30%"
-  })), /* @__PURE__ */ React55.createElement(SkeletonText, {
+  })), /* @__PURE__ */ React56.createElement(SkeletonText, {
     mb: "7",
     noOfLines: 10,
     spacing: "4"
-  }), /* @__PURE__ */ React55.createElement(SkeletonText, {
+  }), /* @__PURE__ */ React56.createElement(SkeletonText, {
     mb: "7",
     noOfLines: 5,
     spacing: "4"
-  })));
+  })), /* @__PURE__ */ React56.createElement(Footer_default, {
+    state: null,
+    navigator: null,
+    zIndex: "tooltip"
+  }));
+};
+function LoadingSkeleton({
+  height,
+  state: state2
+}) {
+  var _a;
+  return /* @__PURE__ */ React56.createElement(ThemeProvider3, {
+    theme: getTheme3((_a = state2 == null ? void 0 : state2.settings) == null ? void 0 : _a.colorMode)
+  }, /* @__PURE__ */ React56.createElement(LoadingSkeletonContent, {
+    height
+  }));
 }
 
 // src/PdfReader/index.tsx
@@ -40179,7 +40216,7 @@ function usePdfReader(args) {
     height = DEFAULT_HEIGHT,
     growWhenScrolling = DEFAULT_SHOULD_GROW_WHEN_SCROLLING
   } = args != null ? args : {};
-  const [state2, dispatch] = React56.useReducer(pdfReducer, {
+  const [state2, dispatch] = React57.useReducer(pdfReducer, {
     state: "INACTIVE",
     resourceIndex: 0,
     resource: null,
@@ -40198,7 +40235,7 @@ function usePdfReader(args) {
   const isParsed = typeof state2.numPages === "number";
   const isSinglePDF = manifest && (manifest == null ? void 0 : manifest.readingOrder.length) === 1;
   const [containerRef, containerSize] = useMeasure();
-  React56.useEffect(() => {
+  React57.useEffect(() => {
     if (!webpubManifestUrl || !manifest) {
       return dispatch({ type: "ARGS_CHANGED", args: void 0 });
     }
@@ -40223,7 +40260,7 @@ function usePdfReader(args) {
     height,
     growWhenScrolling
   ]);
-  React56.useEffect(() => {
+  React57.useEffect(() => {
     if (!manifest)
       return;
     if (!manifest.readingOrder || !manifest.readingOrder.length) {
@@ -40237,7 +40274,7 @@ function usePdfReader(args) {
       });
     });
   }, [state2.resourceIndex, manifest, proxyUrl]);
-  const resizePage = React56.useCallback((pdfWidth, pdfHeight, containerSize2) => {
+  const resizePage = React57.useCallback((pdfWidth, pdfHeight, containerSize2) => {
     const wRatio = pdfWidth / containerSize2.width;
     const hRatio = pdfHeight / containerSize2.height;
     const fitHorizontal = wRatio > hRatio;
@@ -40245,10 +40282,10 @@ function usePdfReader(args) {
     const height2 = !fitHorizontal ? Math.round(containerSize2.height) : void 0;
     dispatch({ type: "RESIZE_PAGE", width, height: height2 });
   }, []);
-  React56.useEffect(() => {
+  React57.useEffect(() => {
     resizePage(state2.pdfWidth, state2.pdfHeight, containerSize);
   }, [containerSize, state2.pdfWidth, state2.pdfHeight, resizePage]);
-  React56.useEffect(() => {
+  React57.useEffect(() => {
     var _a2;
     if (!manifest || state2.state !== "ACTIVE")
       return;
@@ -40278,7 +40315,7 @@ function usePdfReader(args) {
     state2.resourceIndex,
     isSinglePDF
   ]);
-  const goForward = React56.useCallback(() => __async(this, null, function* () {
+  const goForward = React57.useCallback(() => __async(this, null, function* () {
     var _a2;
     if (!state2.numPages)
       return;
@@ -40312,7 +40349,7 @@ function usePdfReader(args) {
     state2.pageNumber,
     state2.resourceIndex
   ]);
-  const goBackward = React56.useCallback(() => __async(this, null, function* () {
+  const goBackward = React57.useCallback(() => __async(this, null, function* () {
     if (!isParsed)
       return;
     if (state2.state !== "ACTIVE")
@@ -40339,23 +40376,23 @@ function usePdfReader(args) {
     state2.pageNumber,
     state2.resourceIndex
   ]);
-  const setScroll = React56.useCallback((val) => __async(this, null, function* () {
+  const setScroll = React57.useCallback((val) => __async(this, null, function* () {
     const isScrolling = val === "scrolling";
     dispatch({ type: "SET_SCROLL", isScrolling });
   }), []);
-  const zoomIn = React56.useCallback(() => __async(this, null, function* () {
+  const zoomIn = React57.useCallback(() => __async(this, null, function* () {
     dispatch({
       type: "SET_SCALE",
       scale: state2.scale + SCALE_STEP
     });
   }), [state2.scale]);
-  const zoomOut = React56.useCallback(() => __async(this, null, function* () {
+  const zoomOut = React57.useCallback(() => __async(this, null, function* () {
     dispatch({
       type: "SET_SCALE",
       scale: state2.scale - SCALE_STEP
     });
   }), [state2.scale]);
-  const goToPage = React56.useCallback((href) => __async(this, null, function* () {
+  const goToPage = React57.useCallback((href) => __async(this, null, function* () {
     const getIndexFromHref = (href2) => {
       var _a2;
       const index = (_a2 = manifest == null ? void 0 : manifest.readingOrder) == null ? void 0 : _a2.findIndex((link2) => {
@@ -40386,8 +40423,9 @@ function usePdfReader(args) {
     return {
       type: null,
       isLoading: true,
-      content: /* @__PURE__ */ React56.createElement(LoadingSkeleton, {
-        height
+      content: /* @__PURE__ */ React57.createElement(LoadingSkeleton, {
+        height,
+        state: state2
       }),
       navigator: null,
       manifest: null,
@@ -40417,7 +40455,7 @@ function usePdfReader(args) {
   return {
     type: "PDF",
     isLoading: false,
-    content: /* @__PURE__ */ React56.createElement(Flex, {
+    content: /* @__PURE__ */ React57.createElement(Flex, {
       as: "main",
       zIndex: "base",
       flex: "1 0 auto",
@@ -40427,16 +40465,16 @@ function usePdfReader(args) {
       id: IFRAME_WRAPPER_ID,
       ref: containerRef,
       height: finalHeight
-    }, /* @__PURE__ */ React56.createElement("style", null, `
+    }, /* @__PURE__ */ React57.createElement("style", null, `
             .react-pdf__Document {
               height: calc(100vh - ${HEADER_HEIGHT + FOOTER_HEIGHT}px);
               overflow-x: hidden;
               overflow-y: auto;
             }
-          `), /* @__PURE__ */ React56.createElement(Document, {
+          `), /* @__PURE__ */ React57.createElement(Document, {
       file: state2.resource,
       onLoadSuccess: onDocumentLoadSuccess
-    }, isParsed && state2.numPages && /* @__PURE__ */ React56.createElement(React56.Fragment, null, state2.settings.isScrolling && Array.from(new Array(state2.numPages), (_, index) => /* @__PURE__ */ React56.createElement(ScrollPage_default, {
+    }, isParsed && state2.numPages && /* @__PURE__ */ React57.createElement(React57.Fragment, null, state2.settings.isScrolling && Array.from(new Array(state2.numPages), (_, index) => /* @__PURE__ */ React57.createElement(ScrollPage_default, {
       key: `page_${index + 1}`,
       width: containerSize.width,
       placeholderHeight: state2.pdfHeight,
@@ -40444,13 +40482,13 @@ function usePdfReader(args) {
       scale: state2.scale,
       pageNumber: index + 1,
       onLoadSuccess: onRenderSuccess
-    })), !state2.settings.isScrolling && /* @__PURE__ */ React56.createElement(ChakraPage_default, {
+    })), !state2.settings.isScrolling && /* @__PURE__ */ React57.createElement(ChakraPage_default, {
       pageNumber: state2.pageNumber,
       onLoadSuccess: onRenderSuccess,
       width: state2.pageWidth,
       height: state2.pageHeight,
       scale: state2.scale,
-      loading: /* @__PURE__ */ React56.createElement(React56.Fragment, null)
+      loading: /* @__PURE__ */ React57.createElement(React57.Fragment, null)
     })))),
     state: state2,
     manifest,
@@ -40470,7 +40508,7 @@ function handleInvalidTransition(state2, action) {
 }
 
 // src/HtmlReader/index.tsx
-import React64 from "react";
+import React65 from "react";
 
 // src/HtmlReader/lib.ts
 var FONT_SIZE_STEP = 4;
@@ -40522,10 +40560,15 @@ function getFromReadingOrder(href, manifest, baseUrl) {
   } : void 0;
 }
 function isSameResource(href1, href2, baseUrl) {
-  const url1 = new URL(href1, baseUrl);
-  const url2 = new URL(href2, baseUrl);
-  const doMatch = url1.origin === url2.origin && url1.pathname === url2.pathname;
-  return doMatch;
+  try {
+    const url1 = new URL(href1, baseUrl);
+    const url2 = new URL(href2, baseUrl);
+    const doMatch = url1.origin === url2.origin && url1.pathname === url2.pathname;
+    return doMatch;
+  } catch (e) {
+    console.error(e);
+  }
+  return false;
 }
 function linkToLocator(link2, baseUrl, locations = {}) {
   var _a;
@@ -40644,7 +40687,7 @@ var familyToReadiumFamily = {
 };
 
 // src/utils/localstorage.ts
-import React57 from "react";
+import React58 from "react";
 function getLocalStorageLocation(identifier2, args) {
   if (!(args == null ? void 0 : args.persistLastLocation))
     return void 0;
@@ -40667,7 +40710,7 @@ function getLocalStorageSettings(args) {
   return void 0;
 }
 function useUpdateLocalStorage(identifier2, state2, args) {
-  React57.useEffect(() => {
+  React58.useEffect(() => {
     if (!identifier2 || !(args == null ? void 0 : args.persistLastLocation))
       return;
     if (state2.location) {
@@ -40688,7 +40731,7 @@ function useUpdateLocalStorage(identifier2, state2, args) {
       }
     }
   }, [state2.location, identifier2, args == null ? void 0 : args.persistLastLocation]);
-  React57.useEffect(() => {
+  React58.useEffect(() => {
     if (!identifier2 || !state2.settings || !(args == null ? void 0 : args.persistSettings))
       return;
     const settings = {
@@ -40707,10 +40750,10 @@ function clearWebReaderLocalStorage() {
 }
 
 // src/HtmlReader/useLocationQuery.ts
-import React58 from "react";
+import React59 from "react";
 var LOCATION_QUERY_TITLE = "location";
 function useLocationQuery(state2) {
-  React58.useEffect(() => {
+  React59.useEffect(() => {
     if (state2.state === "READY")
       updateQuery(state2.location);
   }, [state2.location, state2.state]);
@@ -41177,11 +41220,11 @@ function extractContentContainerSize(container3) {
 }
 
 // src/HtmlReader/useResource.tsx
-import React59 from "react";
+import React60 from "react";
 function useResource(manifest, state2, getContent, injectables, dispatch) {
   var _a, _b;
   const currentResourceUrl = (_b = (_a = state2.location) == null ? void 0 : _a.href) != null ? _b : null;
-  React59.useEffect(() => {
+  React60.useEffect(() => {
     if (!currentResourceUrl) {
       return;
     }
@@ -41236,8 +41279,11 @@ function injectJS(body) {
       function handleLinkClick(evt) {
         // don't navigate
         evt.preventDefault();
-        // send message to parent
-        window.parent.postMessage( { type: 'LINK_CLICKED', href: evt.target.href } );
+        const  href = evt.currentTarget.href;
+        if(href) {
+          // send message to parent
+          window.parent.postMessage( { type: 'LINK_CLICKED', href  } );
+        }
       };
       for ( var i = 0; i < links.length; i ++ ) {
         links[i].addEventListener('click', handleLinkClick);
@@ -41251,9 +41297,9 @@ function injectJS(body) {
 
 // src/HtmlReader/useWindowResize.ts
 var import_debounce2 = __toESM(require_debounce());
-import React60 from "react";
+import React61 from "react";
 function useWindowResize(manifest, state2, dispatch) {
-  React60.useEffect(() => {
+  React61.useEffect(() => {
     if (state2.state !== "NAVIGATING" && state2.state !== "READY")
       return;
     function handleResize() {
@@ -41274,11 +41320,11 @@ function useWindowResize(manifest, state2, dispatch) {
 }
 
 // src/HtmlReader/useUpdateScroll.ts
-import * as React61 from "react";
+import * as React62 from "react";
 var SCROLL_STOP_DEBOUNCE = 100;
 function useUpdateScroll(state2, dispatch) {
-  const timeout = React61.useRef();
-  React61.useLayoutEffect(() => {
+  const timeout = React62.useRef();
+  React62.useLayoutEffect(() => {
     if (state2.state !== "READY")
       return;
     const iframeDocument = state2.iframe.contentDocument;
@@ -41297,9 +41343,9 @@ function useUpdateScroll(state2, dispatch) {
 }
 
 // src/HtmlReader/useUpdateCSS.ts
-import React62 from "react";
+import React63 from "react";
 function useUpdateCSS(state2, manifest) {
-  React62.useEffect(() => {
+  React63.useEffect(() => {
     if (!manifest)
       return;
     if (state2.state !== "NAVIGATING" && state2.state !== "READY")
@@ -41312,19 +41358,32 @@ function useUpdateCSS(state2, manifest) {
 }
 
 // src/HtmlReader/useIframeLinkClick.ts
-import React63 from "react";
-function useIframeLinkClick(dispatch) {
-  React63.useEffect(() => {
+import React64 from "react";
+function useIframeLinkClick(baseUrl, manifest, dispatch) {
+  React64.useEffect(() => {
+    if (!baseUrl || !manifest)
+      return;
     window.addEventListener("message", ({ data }) => {
       if (typeof data === "object" && data !== null && "type" in data) {
         switch (data.type) {
           case "LINK_CLICKED":
-            dispatch({ type: "GO_TO_HREF", href: data.href });
+            handleIframeLink(data.href, manifest, baseUrl, dispatch);
         }
       }
     });
-  }, [dispatch]);
+  }, [dispatch, baseUrl, manifest]);
 }
+var handleIframeLink = (href, manifest, baseUrl, dispatch) => {
+  if (isExternalLink(href, manifest, baseUrl)) {
+    window.open(href, "_blank");
+  } else {
+    dispatch({ type: "GO_TO_HREF", href });
+  }
+};
+var isExternalLink = (href, manifest, baseUrl) => {
+  const resource = getFromReadingOrder(href, manifest, baseUrl);
+  return resource === void 0;
+};
 
 // src/HtmlReader/index.tsx
 var IFRAME_ID_SELECTOR = "html-reader-iframe";
@@ -41341,7 +41400,7 @@ function useHtmlReader(args) {
     persistLastLocation = true,
     persistSettings = true
   } = args != null ? args : {};
-  const [state2, dispatch] = React64.useReducer(makeHtmlReducer(args), inactiveState);
+  const [state2, dispatch] = React65.useReducer(makeHtmlReducer(args), inactiveState);
   const currentResourceUrl = (_b = (_a = state2.location) == null ? void 0 : _a.href) != null ? _b : null;
   const injectables = ((_d = (_c = manifest == null ? void 0 : manifest.metadata) == null ? void 0 : _c.presentation) == null ? void 0 : _d.layout) === "fixed" ? injectablesFixed : injectablesReflowable;
   useResource(manifest, state2, getContent, injectables, dispatch);
@@ -41351,8 +41410,8 @@ function useHtmlReader(args) {
   useLocationQuery(state2);
   useWindowResize(manifest, state2, dispatch);
   useUpdateCSS(state2, manifest);
-  useIframeLinkClick(dispatch);
-  React64.useEffect(() => {
+  useIframeLinkClick(webpubManifestUrl, manifest, dispatch);
+  React65.useEffect(() => {
     if (!webpubManifestUrl || !manifest) {
       return dispatch({ type: "ARGS_CHANGED", args: void 0 });
     }
@@ -41381,7 +41440,7 @@ function useHtmlReader(args) {
     persistLastLocation,
     persistSettings
   ]);
-  React64.useEffect(() => {
+  React65.useEffect(() => {
     process.nextTick(() => {
       if (state2.state === "NAVIGATING") {
         const { fragment, progression, position: position3 } = state2.location.locations;
@@ -41403,7 +41462,7 @@ function useHtmlReader(args) {
     (_g = state2.settings) == null ? void 0 : _g.isScrolling,
     (_h = state2.location) == null ? void 0 : _h.locations
   ]);
-  const navigator2 = React64.useRef({
+  const navigator2 = React65.useRef({
     goToPage(href) {
       dispatch({ type: "GO_TO_HREF", href });
     },
@@ -41444,7 +41503,7 @@ function useHtmlReader(args) {
       });
     }
   }).current;
-  const setIframe = React64.useRef((el) => {
+  const setIframe = React65.useRef((el) => {
     dispatch({ type: "SET_IFRAME", iframe: el });
   }).current;
   if (!webpubManifestUrl || !manifest)
@@ -41453,8 +41512,9 @@ function useHtmlReader(args) {
     return {
       type: null,
       isLoading: true,
-      content: /* @__PURE__ */ React64.createElement(LoadingSkeleton, {
-        height
+      content: /* @__PURE__ */ React65.createElement(LoadingSkeleton, {
+        height,
+        state: state2
       }),
       navigator: null,
       manifest: null,
@@ -41476,7 +41536,7 @@ function useHtmlReader(args) {
   return {
     type: "HTML",
     isLoading: false,
-    content: /* @__PURE__ */ React64.createElement(React64.Fragment, null, /* @__PURE__ */ React64.createElement("iframe", {
+    content: /* @__PURE__ */ React65.createElement(React65.Fragment, null, /* @__PURE__ */ React65.createElement("iframe", {
       id: IFRAME_ID_SELECTOR,
       onLoad: () => dispatch({ type: "IFRAME_LOADED" }),
       ref: setIframe,
@@ -41528,8 +41588,8 @@ function useWebReader(args) {
     persistLastLocation = true,
     persistSettings = true
   } = args;
-  const [manifest, setManifest] = React65.useState(null);
-  const [error2, setError] = React65.useState(null);
+  const [manifest, setManifest] = React66.useState(null);
+  const [error2, setError] = React66.useState(null);
   if (error2) {
     throw error2;
   }
@@ -41555,14 +41615,15 @@ function useWebReader(args) {
     persistLastLocation,
     persistSettings
   } : void 0);
-  React65.useEffect(() => {
+  React66.useEffect(() => {
     fetchJson(webpubManifestUrl).then(setManifest).catch(setError);
   }, [webpubManifestUrl]);
   if (manifest === null) {
     return {
       isLoading: true,
-      content: /* @__PURE__ */ React65.createElement(LoadingSkeleton, {
-        height
+      content: /* @__PURE__ */ React66.createElement(LoadingSkeleton, {
+        height,
+        state: htmlReader == null ? void 0 : htmlReader.state
       }),
       manifest: null,
       navigator: null,
@@ -41580,7 +41641,7 @@ function useWebReader(args) {
 }
 
 // src/ServiceWorker/client.ts
-import React66 from "react";
+import React67 from "react";
 
 // src/ServiceWorker/constants.ts
 var PRECACHE_PUBLICATIONS = "PRECACHE_PUBLICATIONS";
@@ -41588,7 +41649,7 @@ var CACHE_EXPIRATION_SECONDS = 7 * 24 * 60 * 60;
 
 // src/ServiceWorker/client.ts
 function usePublicationSW(publications) {
-  React66.useEffect(() => {
+  React67.useEffect(() => {
     var _a;
     if ("serviceWorker" in navigator) {
       const message = {
@@ -41619,12 +41680,12 @@ var WebReaderWithoutBoundary = (_a) => {
     getContent
   }, props));
   const { content } = webReader;
-  return /* @__PURE__ */ React67.createElement(manager_default, __spreadValues({
+  return /* @__PURE__ */ React68.createElement(manager_default, __spreadValues({
     headerLeft
   }, webReader), content);
 };
 var WebReader = (props) => {
-  return /* @__PURE__ */ React67.createElement(ErrorBoundary_default, __spreadValues({}, props), /* @__PURE__ */ React67.createElement(WebReaderWithoutBoundary, __spreadValues({}, props)));
+  return /* @__PURE__ */ React68.createElement(ErrorBoundary_default, __spreadValues({}, props), /* @__PURE__ */ React68.createElement(WebReaderWithoutBoundary, __spreadValues({}, props)));
 };
 var src_default = WebReader;
 export {