@nulib/clover 4.5.9 → 4.6.1

package/dist/components/Canvas/CanvasView.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import React, { useRef, useState, useMemo, useEffect, useCallback, useLayoutEffect, Suspense, lazy } from "react";
+import React, { useState, useRef, useMemo, useEffect, useCallback, useLayoutEffect, Suspense, lazy } from "react";
 import Caption, { hasInformation, captionLabelId } from "../Body/Caption.mjs";
 import Controls, { NO_LIMITS } from "./Controls.mjs";
 import { findChoices, startingChoices, animationFrames, canvasScene, paintedType, placeholderStill, frameKey, canvasSize, canvasRectToWorld } from "./layout.mjs";
@@ -100,7 +100,10 @@ const ANNOTATION_KEYS = {
 const CanvasView = (props) => {
   var _a;
   const hasSource = Boolean((_a = props.canvases) == null ? void 0 : _a.length) || toSceneImages(props.body, props.src).length > 0;
-  if (!hasSource) return null;
+  const [kept, setKept] = useState(false);
+  const keep = hasSource || kept && props.manifestId === "loading";
+  if (keep !== kept) setKept(keep);
+  if (!keep) return null;
   return /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(CanvasBody, { ...props }) });
 };
 const CanvasBody = (props) => {
@@ -136,6 +139,7 @@ const CanvasBody = (props) => {
     highlightedChapter,
     onChapterHighlight,
     placeholder = true,
+    ahead,
     children
   } = props;
   const { t } = useCloverTranslation();
@@ -325,6 +329,24 @@ ${canvases.map((canvas) => canvas.id).join("|")}` : null;
         fetchInfo(source.service, { request: stillsRequest }).catch(() => {
         });
   }, [showPlaceholder, stills, stillsRequest]);
+  const aheadScene = useMemo(() => {
+    if (!(ahead == null ? void 0 : ahead.length)) return null;
+    if (placeholder && !imagesOpen && ahead.some((canvas) => placeholderStill(canvas)))
+      return null;
+    const scene2 = canvasScene(ahead, direction, selections, {
+      standIns: false
+    });
+    if (scene2.media.length) return null;
+    const images2 = scene2.images.filter(
+      (image) => image.service && !image.hidden
+    );
+    return images2.length ? { images: images2, world: union(scene2.placements) ?? void 0 } : null;
+  }, [ahead, direction, selections, placeholder, imagesOpen]);
+  useEffect(() => {
+    var _a2;
+    if (status !== "ready" || showPlaceholder || !aheadScene) return;
+    (_a2 = surface == null ? void 0 : surface.prefetch) == null ? void 0 : _a2.call(surface, aheadScene.images, { world: aheadScene.world });
+  }, [surface, status, showPlaceholder, aheadScene]);
   const onlyInformation = (config, { annotations = false, fullPage = false } = {}) => ({
     ...config,
     zoom: false,
@@ -540,15 +562,26 @@ ${canvases.map((canvas) => canvas.id).join("|")}` : null;
     if (exitFocused.current && lost) (_a2 = hostRef.current) == null ? void 0 : _a2.focus();
     exitFocused.current = false;
   }, [fullscreenExit]);
+  const flushed = useRef(false);
+  useLayoutEffect(() => {
+    var _a2;
+    if (shownCanvases.current === null || shownCanvases.current === canvasKey)
+      return;
+    (_a2 = surfaceRef.current) == null ? void 0 : _a2.clear();
+    drawnScene.current = null;
+    flushed.current = true;
+    setStatus("loading");
+  }, [canvasKey]);
   useEffect(() => {
     const surface2 = surfaceRef.current;
     if (showPlaceholder) placeholderShown.current = true;
     if (!surface2 || !nearViewport || showPlaceholder) return;
-    const moved = shownCanvases.current !== null && shownCanvases.current !== canvasKey;
+    const moved = flushed.current || shownCanvases.current !== null && shownCanvases.current !== canvasKey;
     if (!surface2.isOpen || moved) setStatus("loading");
     const fit = mediaOnly || placeholderShown.current && surface2.isOpen || moved;
     shownCanvases.current = canvasKey;
     placeholderShown.current = false;
+    flushed.current = false;
     surface2.setImages(images, { world: world ?? void 0, fit });
   }, [imagesKey, instanceId, mediaElement, nearViewport, showPlaceholder]);
   const shownManifest = useRef(manifestId);
@@ -561,7 +594,7 @@ ${canvases.map((canvas) => canvas.id).join("|")}` : null;
     setCleared(true);
     setStatus("loading");
   }, [manifestId]);
-  const loading = status === "loading" && images.length > 0 && nearViewport && !showPlaceholder;
+  const loading = status === "loading" && (images.length > 0 || manifestId === "loading") && nearViewport && !showPlaceholder;
   return /* @__PURE__ */ jsx(HostLanguageContext.Provider, { value: root.hostLanguage, children: /* @__PURE__ */ jsxs(
     "figure",
     {

package/dist/components/Canvas/Connected.mjs

@@ -8,7 +8,7 @@ import { selectDrawnSets, selectUnlistedSets, selectHiddenSets } from "../../cor
 import { searchServiceOf } from "../../core/search-service.mjs";
 import { showLink } from "../../core/show-link.mjs";
 import { chaptersOf } from "../../core/ranges.mjs";
-import { hasBehavior } from "../../core/selectors.mjs";
+import { selectNextCanvases, hasBehavior } from "../../core/selectors.mjs";
 import { sameLanguage } from "../../i18n/languages.mjs";
 import { useClover, useCloverSelector } from "../../react/context.mjs";
 import { useVisibleCanvases, useSequence, useManifest, useActiveCanvas } from "../../react/hooks.mjs";
@@ -38,6 +38,9 @@ const ConnectedCanvas = ({
   const caption = givenCaption ?? rootCaption;
   const language = givenLanguage ?? context.language;
   const canvases = useVisibleCanvases();
+  const ahead = useCloverSelector(
+    (state) => selectNextCanvases(state.manifest, state.canvasId)
+  );
   const { direction } = useSequence();
   const manifest = useManifest();
   const active = useActiveCanvas();
@@ -216,7 +219,7 @@ const ConnectedCanvas = ({
     }),
     [options, request, autoplay, loop]
   );
-  if (!canvases.length) return null;
+  if (!canvases.length && manifestId !== "loading") return null;
   return /* @__PURE__ */ jsx(
     CanvasView,
     {
@@ -224,6 +227,7 @@ const ConnectedCanvas = ({
       manifestId,
       navPlace: manifest == null ? void 0 : manifest.navPlace,
       canvases,
+      ahead,
       viewingDirection: direction,
       language,
       label: label ?? (active == null ? void 0 : active.label) ?? (manifest == null ? void 0 : manifest.label),

package/dist/components/Canvas/FrameAnimation.mjs

@@ -88,7 +88,6 @@ function useAnimation(frames, key, {
   }, [frames, duration]);
   const [time, setTime] = useState(0);
   const [playing, setPlaying] = useState(false);
-  const [repeat, setRepeat] = useState(loop);
   const [moved, setMoved] = useState(0);
   const now = useRef(0);
   const ready = useRef(isReady);
@@ -107,7 +106,6 @@ function useAnimation(frames, key, {
   useEffect(() => {
     now.current = 0;
     setTime(0);
-    setRepeat(loop);
     const reduced = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
     setPlaying(autoplay && frames.length > 1 && !reduced);
   }, [key]);
@@ -128,7 +126,7 @@ function useAnimation(frames, key, {
       const before = now.current;
       let time2 = from.time + (Date.now() - from.at) / 1e3;
       if (time2 >= total) {
-        if (!repeat) {
+        if (!loop) {
           go(total);
           setPlaying(false);
           (_a = ended.current) == null ? void 0 : _a.call(ended);
@@ -152,7 +150,7 @@ function useAnimation(frames, key, {
     if (from.time !== now.current) go(from.time);
     timer = setTimeout(tick, wait(from.time));
     return () => clearTimeout(timer);
-  }, [playing, frames, total, repeat, moved]);
+  }, [playing, frames, total, loop, moved]);
   const frame = frameAt(frames, time);
   const shownKey = framesAt(frames, time, total).join(",");
   const shown = useMemo(
@@ -172,11 +170,9 @@ function useAnimation(frames, key, {
     time,
     total,
     playing,
-    repeat,
     setFrame,
     seek,
-    setPlaying,
-    setRepeat
+    setPlaying
   };
 }
 function FrameControls({
@@ -187,17 +183,7 @@ function FrameControls({
 }) {
   var _a;
   const { t, langOf } = useCloverTranslation();
-  const {
-    frame,
-    time,
-    total,
-    playing,
-    repeat,
-    setFrame,
-    seek,
-    setPlaying,
-    setRepeat
-  } = animation;
+  const { frame, time, total, playing, setFrame, seek, setPlaying } = animation;
   const starts = useMemo(
     () => [...new Set(frames.map((each) => each.start))].sort((a, b) => a - b),
     [frames]
@@ -340,36 +326,6 @@ function FrameControls({
               children: playing ? /* @__PURE__ */ jsx(PauseIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {})
             }
           ),
-          /* @__PURE__ */ jsx(
-            TransportButton,
-            {
-              words: "frameRepeat",
-              button: "repeat",
-              pressed: repeat,
-              onClick: () => setRepeat(!repeat),
-              children: /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  "aria-hidden": "true",
-                  focusable: "false",
-                  width: "16",
-                  height: "16",
-                  viewBox: "0 0 16 16",
-                  children: /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      d: "M3 7V6a2 2 0 0 1 2-2h7l-2-2M13 9v1a2 2 0 0 1-2 2H4l2 2",
-                      fill: "none",
-                      stroke: "currentColor",
-                      strokeWidth: "1.75",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round"
-                    }
-                  )
-                }
-              )
-            }
-          ),
           sound && /* @__PURE__ */ jsx(
             TransportButton,
             {

package/dist/components/Canvas/LoadedCanvas.mjs

@@ -11,6 +11,7 @@ import { readPage, pageLabel } from "../../core/annotation-sets.mjs";
 import { loadContent } from "../../core/load.mjs";
 import { useLoaded } from "../../hooks/useLoaded.mjs";
 const loadRanges = () => import("../../core/ranges.mjs");
+const NONE = [];
 function LoadedCanvas({
   iiifContent,
   onAnnotationLink,
@@ -26,11 +27,18 @@ function LoadedCanvas({
   const key = typeof iiifContent === "string" ? iiifContent : String((iiifContent == null ? void 0 : iiifContent.id) ?? "");
   const [followed, setFollowed] = useState(null);
   const link = (followed == null ? void 0 : followed.key) === key ? followed : null;
-  useEffect(() => {
-    let live = true;
+  const wanted = `${key}
+${(link == null ? void 0 : link.manifestId) ?? ""}
+${(link == null ? void 0 : link.canvasId) ?? ""}`;
+  const [loadingFor, setLoadingFor] = useState(wanted);
+  if (loadingFor !== wanted) {
+    setLoadingFor(wanted);
     setView(
       (current) => current.state === "ready" ? { ...current, next: true } : { state: "loading" }
     );
+  }
+  useEffect(() => {
+    let live = true;
     (async () => {
       var _a2;
       const content = await loadContent((link == null ? void 0 : link.manifestId) ?? iiifContent, {
@@ -39,8 +47,8 @@ function LoadedCanvas({
       const canvases = (content.manifest.items ?? []).filter(
         (each) => of ? each.type === of : each.type !== "Scene"
       );
-      const wanted = (link == null ? void 0 : link.canvasId) ?? ((_a2 = content.target) == null ? void 0 : _a2.canvasId);
-      const canvas = canvases.find((each) => each.id === wanted) ?? canvases[0];
+      const wanted2 = (link == null ? void 0 : link.canvasId) ?? ((_a2 = content.target) == null ? void 0 : _a2.canvasId);
+      const canvas = canvases.find((each) => each.id === wanted2) ?? canvases[0];
       if (!canvas) throw new Error(`It has no ${of ?? "Canvas"} to show.`);
       if (live) setView({ state: "ready", content, canvas });
     })().catch((error) => {
@@ -54,7 +62,7 @@ function LoadedCanvas({
       live = false;
     };
   }, [key, link == null ? void 0 : link.manifestId, link == null ? void 0 : link.canvasId, request, of]);
-  const ready = view.state === "ready" ? view : null;
+  const ready = view.state === "ready" && !view.next ? view : null;
   const [annotations, setAnnotations] = useState([]);
   const given = Boolean(props.annotations);
   useEffect(() => {
@@ -123,12 +131,24 @@ function LoadedCanvas({
     props.language,
     (ranges == null ? void 0 : ranges.chaptersOf) ?? null
   );
+  if (view.state === "ready" && view.next)
+    return /* @__PURE__ */ jsx(
+      CanvasView,
+      {
+        ...props,
+        manifestId: "loading",
+        canvases: NONE,
+        placeholder,
+        onReady: handleReady,
+        onMediaElement: handleMediaElement
+      }
+    );
   if (view.state === "ready")
     return /* @__PURE__ */ jsx(
       CanvasView,
       {
         ...props,
-        manifestId: view.next ? "loading" : view.content.manifest.id,
+        manifestId: view.content.manifest.id,
         canvases: [view.canvas],
         label: props.label ?? view.canvas.label ?? view.content.manifest.label,
         partOf: props.partOf ?? view.content.manifest.label,

package/dist/components/Canvas/Placeholder.mjs

@@ -127,7 +127,7 @@ const Placeholder = ({
                   [vertical ? "height" : "width"]: `${shares[index] / total * 100}%`
                 }
               },
-              index
+              `${index} ${JSON.stringify(still.source)}`
             ))
           }
         )

package/dist/components/Canvas/media/Player.mjs

@@ -62,8 +62,8 @@ function PlayerFace({
     const source = thumbnailSource({ thumbnail });
     return source ? { source } : null;
   }, [shown, canvas, language]);
-  const src = useThumbnail(art == null ? void 0 : art.source, ART_SIZE, request, true);
-  const ground = useThumbnail(art == null ? void 0 : art.source, GROUND_SIZE, request, true);
+  const src = useThumbnail(art == null ? void 0 : art.source, ART_SIZE, request, canvas.id);
+  const ground = useThumbnail(art == null ? void 0 : art.source, GROUND_SIZE, request, canvas.id);
   const [loaded, setLoaded] = useState();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(

package/dist/components/CollectionSelect/CollectionSelect.mjs

@@ -3,6 +3,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useEffect, useRef } from "react";
 import { useUniqueId } from "../../ui/useUniqueId.mjs";
 import { itemsOfCollection } from "../../core/items.mjs";
+import { selectShownId } from "../../core/selectors.mjs";
 import { localize } from "../../core/value.mjs";
 import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
 import { join } from "../../lib/classnames.mjs";
@@ -24,7 +25,8 @@ const CollectionSelect = forwardRef(
     const { t, langOf } = useCloverTranslation();
     const { clover, language } = useClover("CollectionSelect");
     const collection = useCloverSelector((state) => state.collection);
-    const shown = useCloverSelector((state) => {
+    const shown = useCloverSelector((state) => selectShownId(state) ?? "");
+    const loaded = useCloverSelector((state) => {
       var _a;
       return ((_a = state.manifest) == null ? void 0 : _a.id) ?? "";
     });
@@ -35,9 +37,9 @@ const CollectionSelect = forwardRef(
     const asked = useRef(null);
     useEffect(() => {
       asked.current = null;
-    }, [shown, collection]);
+    }, [loaded, collection]);
     const choose = (next) => {
-      if (!next || next === shown || next === asked.current) return;
+      if (!next || next === loaded || next === asked.current) return;
       asked.current = next;
       onChange == null ? void 0 : onChange(next);
       void clover.goToManifest(next).finally(() => {
@@ -80,7 +82,7 @@ const CollectionSelect = forwardRef(
               value: pending ?? shown,
               onKeyDown: (event) => {
                 const { key } = event;
-                if (key === "Enter") choose(pending);
+                if (key === "Enter") choose(pending ?? shown);
                 else if (key === "Escape") {
                   if (stepBack()) event.preventDefault();
                 } else if (STEPS.has(key) || key.length === 1 && !event.ctrlKey && !event.metaKey) {

package/dist/components/Items/Items.mjs

@@ -1,12 +1,12 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, Suspense, lazy, useRef, useEffect } from "react";
+import { forwardRef, Suspense, lazy, useState, useEffect, useRef } from "react";
 import { useUniqueId } from "../../ui/useUniqueId.mjs";
 import { ItemFigure } from "./Item.mjs";
 import { Tip } from "../../ui/Tip.mjs";
 import { itemsOfCollection, itemsOfManifest } from "../../core/items.mjs";
 import { selectAnnotationCollection } from "../../core/annotation-sets.mjs";
-import { selectPosition, selectSequence } from "../../core/selectors.mjs";
+import { selectShownId, selectPosition, selectSequence } from "../../core/selectors.mjs";
 import { resolveDirection } from "../../core/sequence.mjs";
 import { localize } from "../../core/value.mjs";
 import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
@@ -56,10 +56,7 @@ function MemberItems({
 }) {
   const { clover, language } = useOptionalClover();
   const collection = useCloverSelector((state) => state.collection);
-  const manifestId = useCloverSelector((state) => {
-    var _a;
-    return ((_a = state.manifest) == null ? void 0 : _a.id) ?? null;
-  });
+  const manifestId = useCloverSelector(selectShownId);
   const items = itemsOfCollection(collection);
   const direction = resolveDirection(
     collection == null ? void 0 : collection.viewingDirection
@@ -178,7 +175,36 @@ const CountMenu = lazy(
 function Pager(props) {
   return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(PagerLayout, { ...props }) });
 }
-function ItemsView({
+let verticalIn;
+let verticalLoad;
+const loadVertical = () => verticalLoad ?? (verticalLoad = import("./vertical/ItemsVertical.mjs").then(
+  () => verticalIn = true,
+  () => verticalIn = false
+));
+function ItemsView(props) {
+  const waits = (props.layout ?? "slider") === "slider" && props.orientation === "vertical" && verticalIn === void 0;
+  const [, settle] = useState();
+  useEffect(() => {
+    if (!waits) return;
+    let live = true;
+    void loadVertical().then((state) => live && settle(state));
+    return () => {
+      live = false;
+    };
+  }, [waits]);
+  if (waits) {
+    if (typeof document !== "undefined") void loadVertical();
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    DrawnItems,
+    {
+      ...props,
+      orientation: verticalIn === false ? "horizontal" : props.orientation
+    }
+  );
+}
+function DrawnItems({
   forwardedRef,
   items,
   selected,

package/dist/components/Items/Position.mjs

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { itemsOfCollection } from "../../core/items.mjs";
-import { selectTargetIndex } from "../../core/selectors.mjs";
+import { selectShownId, selectTargetIndex } from "../../core/selectors.mjs";
 import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
 import { join } from "../../lib/classnames.mjs";
 import { useClover, useCloverSelector } from "../../react/context.mjs";
@@ -14,10 +14,7 @@ function useRootSteps(of, part) {
   const navigation = useNavigation();
   const { direction } = useSequence();
   const collection = useCloverSelector((state) => state.collection);
-  const shown = useCloverSelector((state) => {
-    var _a;
-    return ((_a = state.manifest) == null ? void 0 : _a.id) ?? null;
-  });
+  const shown = useCloverSelector(selectShownId);
   const targets = useCloverSelector(
     (state) => {
       var _a;

package/dist/components/Items/StandaloneItems.mjs

@@ -22,6 +22,12 @@ function StandaloneItems({
   const key = typeof iiifContent === "string" ? iiifContent : iiifContent == null ? void 0 : iiifContent.id;
   const latest = useRef({ iiifContent, request });
   latest.current = { iiifContent, request };
+  const [loadingFor, setLoadingFor] = useState(key);
+  if (loadingFor !== key) {
+    setLoadingFor(key);
+    setResource(null);
+    setSelected(0);
+  }
   useEffect(() => {
     if (provided || latest.current.iiifContent === void 0) return;
     const controller = new AbortController();

package/dist/components/Items/vertical/ItemsVertical.mjs

@@ -0,0 +1,8 @@
+"use client";
+import { adoptSheet } from "../../../ui/adoptSheet.mjs";
+import __clover_sheet_items_vertical from "../../../ui/sheets/items-vertical.mjs";
+const sheet = "items-vertical";
+adoptSheet("items-vertical", __clover_sheet_items_vertical);
+export {
+  sheet as default
+};

package/dist/components/Map/MapView.mjs

@@ -7,7 +7,7 @@ import { useHighContrast, highContrastProps } from "../../hooks/useHighContrast.
 import { DEFAULT_STYLE_URL, applyDefaultBasemap } from "./basemap.mjs";
 import { navPlaceOf, georeferencesOf, cornersOf, boundsOf, readGeoreference } from "../../core/geo.mjs";
 import { sendsCredentials } from "../../core/request.mjs";
-import { selectVisibleCanvases } from "../../core/selectors.mjs";
+import { selectVisibleCanvases, selectShownId } from "../../core/selectors.mjs";
 import { localize } from "../../core/value.mjs";
 import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
 import { join } from "../../lib/classnames.mjs";
@@ -65,13 +65,7 @@ function ConnectedMap({
     ),
     [picked, highlighted]
   );
-  const manifestId = useOptionalCloverSelector(
-    (state) => {
-      var _a;
-      return ((_a = state.manifest) == null ? void 0 : _a.id) ?? null;
-    },
-    null
-  );
+  const manifestId = useOptionalCloverSelector(selectShownId, null);
   const current = useMemo(
     () => scope === "view" ? [
       ...shown.map((canvas) => canvas.id),

package/dist/components/Root/useRootState.mjs

@@ -1,10 +1,11 @@
 "use client";
-import { useRef, useState, useEffect, useSyncExternalStore, useCallback, useMemo } from "react";
+import { useRef, useState, useLayoutEffect, useEffect, useSyncExternalStore, useCallback, useMemo } from "react";
 import { createClover } from "../../core/clover.mjs";
 import { requestKey } from "../../core/request.mjs";
 import { cloverI18n } from "../../i18n/config.mjs";
 import { useRootContentState } from "../../react/useContentStateOutput.mjs";
 import { sameRenderers } from "../Body/renderers.mjs";
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 function useRootState({
   iiifContent,
   canvasId,
@@ -55,6 +56,18 @@ function useRootState({
     })
   );
   clover.setRequest(request);
+  const [status, setStatus] = useState(clover.store.get().status);
+  useIsomorphicLayoutEffect(() => {
+    let last = clover.store.get().status;
+    return clover.store.subscribe(() => {
+      var _a, _b;
+      const { status: next, error } = clover.store.get();
+      if (next === last) return;
+      last = next;
+      setStatus(next);
+      (_b = (_a = latest.current).onStatusChange) == null ? void 0 : _b.call(_a, next, error);
+    });
+  }, [clover]);
   const initial = useRef({});
   initial.current = {
     canvasId,
@@ -65,25 +78,13 @@ function useRootState({
   const content = useRef(iiifContent);
   content.current = iiifContent;
   const key = contentKey(iiifContent);
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     void clover.load(content.current, initial.current);
     return () => clover.dispose();
   }, [clover, key, requestSettings]);
   useEffect(() => {
     if (controlled) clover.syncCanvas(canvasId ?? null);
   }, [clover, controlled, canvasId]);
-  const [status, setStatus] = useState(clover.store.get().status);
-  useEffect(() => {
-    let last = clover.store.get().status;
-    return clover.store.subscribe(() => {
-      var _a, _b;
-      const { status: next, error } = clover.store.get();
-      if (next === last) return;
-      last = next;
-      setStatus(next);
-      (_b = (_a = latest.current).onStatusChange) == null ? void 0 : _b.call(_a, next, error);
-    });
-  }, [clover]);
   const annotationsRef = useRef(annotations);
   annotationsRef.current = annotations;
   const annotationsKey = annotationsInputKey(annotations);

package/dist/components/Scene/Loaded.mjs

@@ -10,9 +10,13 @@ function LoadedScene({ iiifContent, ...props }) {
   const [view, setView] = useState({ state: "loading" });
   const request = (_a = props.options) == null ? void 0 : _a.request;
   const key = typeof iiifContent === "string" ? iiifContent : String((iiifContent == null ? void 0 : iiifContent.id) ?? "");
+  const [loadingFor, setLoadingFor] = useState(key);
+  if (loadingFor !== key) {
+    setLoadingFor(key);
+    setView({ state: "loading" });
+  }
   useEffect(() => {
     let live = true;
-    setView({ state: "loading" });
     (async () => {
       var _a2;
       const content = await loadContent(iiifContent, { request });