@canopy-iiif/app 1.9.18 → 1.9.20

package/ui/dist/server.mjs

@@ -699,21 +699,16 @@ var ImageStory = (props = {}) => {
     if (!node) return void 0;
     let cleanup = null;
     let cancelled = false;
+    let mounted = false;
+    let resizeObserver = null;
+    let pollId = null;
     const payload = sanitizeImageStoryProps({
       iiifContent,
       disablePanAndZoom,
       pointOfInterestSvgUrl,
       viewerOptions
     });
-    mountImageStory(node, payload).then((destroy) => {
-      if (cancelled) {
-        destroy && destroy();
-        return;
-      }
-      cleanup = typeof destroy === "function" ? destroy : null;
-    });
-    return () => {
-      cancelled = true;
+    const destroyCleanup = () => {
       if (cleanup) {
         try {
           cleanup();
@@ -722,6 +717,67 @@ var ImageStory = (props = {}) => {
         cleanup = null;
       }
     };
+    const disconnectWatchers = () => {
+      if (resizeObserver) {
+        try {
+          resizeObserver.disconnect();
+        } catch (_) {
+        }
+        resizeObserver = null;
+      }
+      if (pollId) {
+        window.clearTimeout(pollId);
+        pollId = null;
+      }
+    };
+    const hasUsableSize = () => {
+      if (!node) return false;
+      const rect = node.getBoundingClientRect();
+      const width = (rect == null ? void 0 : rect.width) || node.offsetWidth || node.clientWidth;
+      const height2 = (rect == null ? void 0 : rect.height) || node.offsetHeight || node.clientHeight;
+      return width > 2 && height2 > 2;
+    };
+    const mountViewer = () => {
+      if (!node || mounted || cancelled) return false;
+      if (!hasUsableSize()) return false;
+      mounted = true;
+      disconnectWatchers();
+      mountImageStory(node, payload).then((destroy) => {
+        if (cancelled) {
+          destroy && destroy();
+          return;
+        }
+        cleanup = typeof destroy === "function" ? destroy : null;
+      });
+      return true;
+    };
+    if (!mountViewer()) {
+      if (typeof window !== "undefined" && typeof window.ResizeObserver === "function") {
+        resizeObserver = new window.ResizeObserver(() => {
+          if (mounted || cancelled) return;
+          mountViewer();
+        });
+        try {
+          resizeObserver.observe(node);
+        } catch (_) {
+        }
+      }
+      const schedulePoll = () => {
+        if (mounted || cancelled) return;
+        pollId = window.setTimeout(() => {
+          pollId = null;
+          if (!mountViewer()) {
+            schedulePoll();
+          }
+        }, 200);
+      };
+      schedulePoll();
+    }
+    return () => {
+      cancelled = true;
+      disconnectWatchers();
+      destroyCleanup();
+    };
   }, [iiifContent, disablePanAndZoom, pointOfInterestSvgUrl, viewerOptions]);
   return /* @__PURE__ */ React6.createElement(
     "div",