@swiftbrowser/react 0.17.4 → 0.17.5

package/README.md

@@ -403,7 +403,13 @@ 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 (a box at the picture's aspect ratio keeps the row from shifting),
+`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. 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,5 +1,7 @@
 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. */
@@ -8,6 +10,13 @@ export interface AsyncImageProps extends ViewModifiers {
     placeholder?: ReactNode;
     /** Shown when the image failed to load (the placeholder by default). */
     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 +30,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,yDAAyD;IACzD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,wEAAwE;IACxE,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,CAqD5D"}

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,10 +3435,28 @@ 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 === null) {
+    const placeholder2 = own.placeholder ?? null;
+    if (!slow || !hasIndicator) return placeholder2;
+    return /* @__PURE__ */ jsxs(ZStack, { children: [
+      placeholder2,
+      own.loadingIndicator
+    ] });
+  }
   if (state === "failed") return own.failure ?? own.placeholder ?? null;
   return applyModifiers(sb("image", { ...imageProps(own), url: state.url, width: state.width, height: state.height }), modifiers);
 }
@@ -4623,6 +4642,7 @@ export {
   Host,
   Image$1 as Image,
   KeyframeAnimator,
+  LOADING_INDICATOR_DELAY_MS,
   Label,
   LabeledContent,
   Layout,