@swiftbrowser/react 0.17.5 → 0.17.6

package/README.md

@@ -404,12 +404,16 @@ 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. `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
+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. All three show in a
-SwiftBrowser Native app too.
+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

@@ -6,9 +6,14 @@ 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`

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;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"}
+{"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

@@ -3450,14 +3450,14 @@ function AsyncImage(props) {
     return applyModifiers(sb("image", { ...imageProps(own), url: own.url, width: 0, height: 0 }), modifiers);
   }
   if (state === null) {
-    const placeholder2 = own.placeholder ?? null;
-    if (!slow || !hasIndicator) return placeholder2;
-    return /* @__PURE__ */ jsxs(ZStack, { children: [
+    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 own.failure ?? own.placeholder ?? null;
+  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) {