@swiftbrowser/react 0.17.4 → 0.17.6

package/README.md

@@ -403,7 +403,17 @@ An image is inert, as a SwiftUI image is. `<AsyncImage url={…}
 webInteractions />` gives a remote picture the browser's own image
 interactions back: a long press's Save / Share / Copy on iOS, dragging it
 out of the page, the right-click menu. Use it on an image with no tap,
-gesture or context menu of its own.
+gesture or context menu of its own. `placeholder` shows until the image
+loaded, `failure` when it could not, and `loadingIndicator` goes over the
+placeholder once a load has run for `loadingIndicatorDelay` ms (300 by
+default): a `<ProgressView />` for a big picture on a slow connection,
+nothing for one that comes quickly or from the cache. The image's
+modifiers apply in every phase, as a SwiftUI `AsyncImage`'s do: a
+thumbnail with `frame={{ width: 72, height: 48 }}` keeps its box while it
+loads (with no placeholder, an empty one), so the text beside it does not
+move when the picture arrives; a `placeholder` at the picture's aspect
+ratio does the same for a picture drawn at its own shape. All three show
+in a SwiftBrowser Native app too.
 
 `keyboardType`, `textContentType`, `textInputAutocapitalization` and
 `autocorrectionDisabled` are SwiftUI's text input hints, for the field they

package/dist/components/images.d.ts

@@ -1,13 +1,27 @@
 import { type ReactNode } from 'react';
 import { type ViewModifiers } from '../modifiers';
+/** How long a load runs before `loadingIndicator` shows. */
+export declare const LOADING_INDICATOR_DELAY_MS = 300;
 export interface AsyncImageProps extends ViewModifiers {
     url: string;
     /** `.resizable()` on the loaded image. */
     resizable?: boolean;
-    /** Shown until the image loaded (nothing by default). */
+    /**
+     * Shown until the image loaded (nothing by default). The image's modifiers
+     * (its frame, aspect ratio, corner radius) apply to it as they do to the
+     * picture, as a SwiftUI `AsyncImage`'s do in every phase: a framed image
+     * keeps its box while it loads, so the row beside it does not move.
+     */
     placeholder?: ReactNode;
-    /** Shown when the image failed to load (the placeholder by default). */
+    /** Shown when the image failed to load (the placeholder by default), under the same modifiers. */
     failure?: ReactNode;
+    /**
+     * Shown over the placeholder once a load has run for `loadingIndicatorDelay`
+     * ms (300 by default): a `<ProgressView />` for a big picture on a slow
+     * connection, nothing for one that comes quickly or from the cache.
+     */
+    loadingIndicator?: ReactNode;
+    loadingIndicatorDelay?: number;
     /**
      * Keep the browser's own image interactions: a long press's Save / Share /
      * Copy on iOS, dragging the image out, the right-click menu. Off by
@@ -21,9 +35,11 @@ export interface AsyncImageProps extends ViewModifiers {
 /**
  * `AsyncImage(url:)`: the page loads the image to learn its size (the
  * engine lays a remote image out by its pixel size, as the Swift core does
- * after its `image` request), then shows it. In a SwiftBrowser Native app,
- * which has no page to load it with, the URL goes to the renderer at once
- * and SwiftUI's own `AsyncImage` loads it.
+ * after its `image` request), then shows it. A SwiftBrowser Native app's
+ * runtime gives it an `Image` too (@swiftbrowser/native's image.ts, over
+ * the host's image loader), so the placeholder shows there as well; on a
+ * host without one the URL goes to the renderer at once and SwiftUI's own
+ * `AsyncImage` loads it.
  */
 export declare function AsyncImage(props: AsyncImageProps): ReactNode;
 //# sourceMappingURL=images.d.ts.map

package/dist/components/images.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"images.d.ts","sourceRoot":"","sources":["../../src/components/images.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,EAA8B,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAE9E,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,GAAG,EAAE,MAAM,CAAC;IACZ,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yDAAyD;IACzD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,wEAAwE;IACxE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oEAAoE;IACpE,kBAAkB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACzC;AAmBD;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,SAAS,CAgC5D"}
+{"version":3,"file":"images.d.ts","sourceRoot":"","sources":["../../src/components/images.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,EAA8B,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAG9E,4DAA4D;AAC5D,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAE9C,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,GAAG,EAAE,MAAM,CAAC;IACZ,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,kGAAkG;IAClG,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oEAAoE;IACpE,kBAAkB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACzC;AAmBD;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,SAAS,CA2D5D"}

package/dist/index.js

@@ -3404,6 +3404,7 @@ function EditButton(props) {
   const [editing, setEditing] = readBinding(own.editMode, own.onChange);
   return applyModifiers(/* @__PURE__ */ jsx(Button, { title: editing ? "Done" : "Edit", editMode: editing ? "active" : "inactive", action: () => setEditing(!editing) }), modifiers);
 }
+const LOADING_INDICATOR_DELAY_MS = 300;
 const loaded = /* @__PURE__ */ new Map();
 function inNativeApp() {
   return typeof Image === "undefined" && globalThis.__sbNative !== void 0;
@@ -3434,11 +3435,29 @@ function AsyncImage(props) {
       live = false;
     };
   }, [own.url]);
+  const hasIndicator = own.loadingIndicator !== void 0 && own.loadingIndicator !== null;
+  const delay = own.loadingIndicatorDelay ?? LOADING_INDICATOR_DELAY_MS;
+  const [slow, setSlow] = useState(false);
+  useEffect(() => {
+    if (state !== null || !hasIndicator) {
+      setSlow(false);
+      return;
+    }
+    const timer = setTimeout(() => setSlow(true), delay);
+    return () => clearTimeout(timer);
+  }, [state, hasIndicator, delay]);
   if (inNativeApp()) {
     return applyModifiers(sb("image", { ...imageProps(own), url: own.url, width: 0, height: 0 }), modifiers);
   }
-  if (state === null) return own.placeholder ?? null;
-  if (state === "failed") return own.failure ?? own.placeholder ?? null;
+  if (state === null) {
+    const placeholder2 = own.placeholder ?? /* @__PURE__ */ jsx(ZStack, {});
+    const shown = slow && hasIndicator ? /* @__PURE__ */ jsxs(ZStack, { children: [
+      placeholder2,
+      own.loadingIndicator
+    ] }) : placeholder2;
+    return applyModifiers(shown, modifiers);
+  }
+  if (state === "failed") return applyModifiers(own.failure ?? own.placeholder ?? /* @__PURE__ */ jsx(ZStack, {}), modifiers);
   return applyModifiers(sb("image", { ...imageProps(own), url: state.url, width: state.width, height: state.height }), modifiers);
 }
 function imageProps(own) {
@@ -4623,6 +4642,7 @@ export {
   Host,
   Image$1 as Image,
   KeyframeAnimator,
+  LOADING_INDICATOR_DELAY_MS,
   Label,
   LabeledContent,
   Layout,