@jobber/components-native 0.113.1 → 0.113.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.113.1",
+  "version": "0.113.2",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -124,5 +124,5 @@
     "react-native-screens": ">=4.18.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "06559aba2040cdb7808c71ac988826c60c9e7cd9"
+  "gitHead": "106e281adc9a3b0e87e125e1a9f1c945ce2de3cd"
 }

package/src/ActivityIndicator/ActivityIndicator.test.tsx

@@ -71,6 +71,52 @@ describe("ActivityIndicator", () => {
       expect(flattenedStyle.width).toBe(44);
       expect(flattenedStyle.height).toBe(44);
     });
+
+    it("uses a fixed-length arc for small (no Layer 2/3 wrappers)", () => {
+      const { getByTestId } = render(<ActivityIndicator size="small" />);
+      const outer = getByTestId(testId).children[0] as ReactTestInstance;
+      const outerChildren = React.Children.toArray(outer.props.children);
+
+      function typeName(node: unknown): string {
+        if (!node || typeof node !== "object") return "";
+        const element = node as {
+          type?: { displayName?: string; name?: string };
+        };
+
+        return element.type?.displayName || element.type?.name || "";
+      }
+
+      // Small: outer rotation wrapper → Svg directly (no inner Layer 2 view).
+      expect(
+        outerChildren.some(child => typeName(child).startsWith("Svg")),
+      ).toBe(true);
+
+      function findArcCircle(node: unknown): ReactTestInstance | undefined {
+        if (!node || typeof node !== "object") return undefined;
+        const element = node as ReactTestInstance;
+        const name = typeName(element);
+
+        if (
+          (name === "Circle" || name === "RNSVGCircle") &&
+          element.props.strokeDasharray === "40, 200"
+        ) {
+          return element;
+        }
+
+        const kids = React.Children.toArray(element.props?.children ?? []);
+
+        for (const kid of kids) {
+          const found = findArcCircle(kid);
+          if (found) return found;
+        }
+
+        return undefined;
+      }
+
+      const arc = findArcCircle(outer);
+      expect(arc).toBeTruthy();
+      expect(arc?.props.strokeDashoffset).toBe(0);
+    });
   });
 
   describe('deprecated size="large" alias', () => {

package/src/ActivityIndicator/ActivityIndicator.tsx

@@ -58,6 +58,8 @@ export interface ActivityIndicatorProps {
   readonly testID?: string;
 }
 
+type ResolvedSize = "small" | "base";
+
 const SIZE_PX = { small: 28, base: 44 } as const;
 // Stroke widths are expressed in viewBox units (the SVG is 48 across).
 // The small variant uses a thicker stroke in viewBox units to compensate
@@ -73,9 +75,34 @@ const RADIUS = 20;
 // one stroke segment is visible at a time.
 const GAP = 200;
 
+/**
+ * Per-size motion profile. Adding a size is an additive map entry — not a
+ * new boolean branch. `layers: 1` is Layer 1 only (fixed arc); `layers: 3`
+ * runs the full Material 3 indeterminate ring (Layers 1–3).
+ *
+ * Small matches web's ActivityIndicator.module.css (`.small .svg` /
+ * `.small .arc`): Layer 1 only, spun ~1.8× faster. Web hardcodes 1000ms
+ * (≈1803ms ÷ 1.8); we match that absolute duration.
+ */
+const MOTION_BY_SIZE = {
+  small: {
+    layers: 1 as const,
+    linearRotateMs: 1000,
+    dasharray: `40, ${GAP}`,
+  },
+  base: {
+    layers: 3 as const,
+    linearRotateMs: tokens["timing-indicator--linear-rotate"],
+  },
+} satisfies Record<
+  ResolvedSize,
+  | { layers: 1; linearRotateMs: number; dasharray: string }
+  | { layers: 3; linearRotateMs: number }
+>;
+
 function resolveLegacySize(
   size: "small" | "base" | DeprecatedSize,
-): "small" | "base" {
+): ResolvedSize {
   if (size === "large") {
     if (__DEV__) {
       console.warn(
@@ -143,6 +170,7 @@ export function ActivityIndicator({
 
   return (
     <FullMotionRing
+      size={resolvedSize}
       pixelSize={pixelSize}
       strokeWidth={strokeWidth}
       arcColor={themeTokens["color-icon"]}
@@ -170,11 +198,13 @@ interface RingProps {
 }
 
 interface FullMotionRingProps extends RingProps {
+  readonly size: ResolvedSize;
   readonly arcColor: string;
   readonly trackColor: string;
 }
 
 function FullMotionRing({
+  size,
   pixelSize,
   strokeWidth,
   arcColor,
@@ -183,25 +213,32 @@ function FullMotionRing({
   testID,
   a11yProps,
 }: FullMotionRingProps) {
+  const motion = MOTION_BY_SIZE[size];
+
   // Layer 1 — outer linear rotation. Continuous, constant speed.
   const outerRotate = useSharedValue(0);
   // Layer 2 — inner 8-phase rotation. Eight 135° eased segments per cycle
   // (totalling 1080° over `timing-indicator--cycle`) reproduce the
-  // canonical Material Web "8-phase" rhythm.
+  // canonical Material Web "8-phase" rhythm. Only when motion.layers === 3.
   const innerRotate = useSharedValue(0);
   // Layer 3 — arc length and dash offset. Drives the visible arc growing
   // from ~1 viewBox-unit to ~90 viewBox-units and sliding around the ring.
+  // Only when motion.layers === 3; fixed-arc sizes use motion.dasharray.
   const arcProgress = useSharedValue(0);
 
   useEffect(() => {
     outerRotate.value = withRepeat(
       withTiming(360, {
-        duration: tokens["timing-indicator--linear-rotate"],
+        duration: motion.linearRotateMs,
         easing: Easing.linear,
       }),
       -1,
     );
 
+    if (motion.layers === 1) {
+      return;
+    }
+
     const phaseDuration = tokens["timing-indicator--cycle"] / 8;
     const phaseEasing = Easing.bezier(0.4, 0, 0.2, 1);
     innerRotate.value = withRepeat(
@@ -227,7 +264,7 @@ function FullMotionRing({
     );
     // We intentionally do not include the shared values in the dependency
     // array — they are stable references created by useSharedValue.
-  }, []);
+  }, [motion]);
 
   const outerStyle = useAnimatedStyle(() => ({
     transform: [{ rotate: `${outerRotate.value}deg` }],
@@ -268,6 +305,62 @@ function FullMotionRing({
     };
   });
 
+  const track = (
+    <Circle
+      cx={CENTER}
+      cy={CENTER}
+      r={RADIUS}
+      fill="none"
+      stroke={trackColor}
+      strokeWidth={strokeWidth}
+    />
+  );
+
+  const ring =
+    motion.layers === 1 ? (
+      // Fixed-length arc, Layer 1 rotation only — no Layer 2 wrapper.
+      <Svg
+        width={pixelSize}
+        height={pixelSize}
+        viewBox={`0 0 ${VIEWBOX} ${VIEWBOX}`}
+      >
+        {track}
+        <Circle
+          cx={CENTER}
+          cy={CENTER}
+          r={RADIUS}
+          fill="none"
+          stroke={arcColor}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeDasharray={motion.dasharray}
+          strokeDashoffset={0}
+        />
+      </Svg>
+    ) : (
+      <Animated.View
+        style={[{ width: pixelSize, height: pixelSize }, innerStyle]}
+      >
+        <Svg
+          width={pixelSize}
+          height={pixelSize}
+          viewBox={`0 0 ${VIEWBOX} ${VIEWBOX}`}
+        >
+          {track}
+          <AnimatedCircle
+            cx={CENTER}
+            cy={CENTER}
+            r={RADIUS}
+            fill="none"
+            stroke={arcColor}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            animatedProps={arcAnimatedProps}
+          />
+        </Svg>
+      </Animated.View>
+    );
+
   return (
     <Animated.View
       style={[{ justifyContent: "center", alignItems: "center" }, style]}
@@ -277,34 +370,7 @@ function FullMotionRing({
       <Animated.View
         style={[{ width: pixelSize, height: pixelSize }, outerStyle]}
       >
-        <Animated.View
-          style={[{ width: pixelSize, height: pixelSize }, innerStyle]}
-        >
-          <Svg
-            width={pixelSize}
-            height={pixelSize}
-            viewBox={`0 0 ${VIEWBOX} ${VIEWBOX}`}
-          >
-            <Circle
-              cx={CENTER}
-              cy={CENTER}
-              r={RADIUS}
-              fill="none"
-              stroke={trackColor}
-              strokeWidth={strokeWidth}
-            />
-            <AnimatedCircle
-              cx={CENTER}
-              cy={CENTER}
-              r={RADIUS}
-              fill="none"
-              stroke={arcColor}
-              strokeWidth={strokeWidth}
-              strokeLinecap="round"
-              animatedProps={arcAnimatedProps}
-            />
-          </Svg>
-        </Animated.View>
+        {ring}
       </Animated.View>
     </Animated.View>
   );

package/src/ActivityIndicator/guide.md

@@ -101,36 +101,60 @@ navigation order beyond the initial announcement.
 
 ## Animation Model
 
-The default presentation renders Material Design 3's three-layer indeterminate
-ring. The implementation uses `react-native-svg` for the ring geometry and
-`react-native-reanimated` 3 for the motion — all worklet-driven so the animation
-runs on the UI thread regardless of JS thread load.
+The default (`base`) presentation renders Material Design 3's three-layer
+indeterminate ring. The implementation uses `react-native-svg` for the ring
+geometry and `react-native-reanimated` 3 for the motion — all worklet-driven so
+the animation runs on the UI thread regardless of JS thread load.
 
-The three concurrent animations:
+The three concurrent animations (base only):
 
 1. A wrapping `Animated.View` rotates continuously at a constant linear speed
-   driven by `tokens["timing-indicator-linear-rotate"]` (1568ms per revolution).
-   This is the "outer" rotation that prevents the ring from ever sitting still.
+   driven by `tokens["timing-indicator--linear-rotate"]` (1568ms per
+   revolution). This is the "outer" rotation that prevents the ring from ever
+   sitting still.
 
 2. An inner transform rotates through 1080° per cycle on a
-   `tokens["timing-indicator-cycle"]` (5332ms) cubic-bezier easing curve
+   `tokens["timing-indicator--cycle"]` (5332ms) cubic-bezier easing curve
    approximating Material Web's `indicatorRotateArc` keyframe. Combined with
    Layer 1, this produces the eight-phase rhythm that reads as non-periodic.
 
 3. An animated `<Circle>` (via `Animated.createAnimatedComponent(Circle)`) has
    its `strokeDasharray` and `strokeDashoffset` driven by `useAnimatedProps` on
-   a `tokens["timing-indicator-arc"]` (1333ms) sub-cycle, so the visible arc
-   grows from "barely visible" to roughly 270° of the ring and shrinks back. A
-   second arc renders 180° out of phase.
+   a `tokens["timing-indicator--arc"]` (1333ms) sub-cycle, so the visible arc
+   grows from "barely visible" to roughly 270° of the ring and shrinks back.
 
 A static `<Circle>` of the same dimensions renders the track ring beneath the
 active arcs, filled with `themeTokens["color-surface--active"]` so the track
 adapts to whichever surface (`surface`, `surface--background`,
 `surface--background--subtle`) the indicator is placed on.
 
-The literal durations match Material Web's published progress motion spec; the
-same values ship from `@jobber/design`'s `timing.tokens.json` to both web and
-mobile so the rhythm is identical across platforms.
+### Size → motion config
+
+Motion timing is looked up from `MOTION_BY_SIZE` (alongside `SIZE_PX` /
+`STROKE_WIDTH`), not from size-name booleans. Each entry declares `layers` (`1`
+= fixed arc / Layer 1 only; `3` = full Material ring), `linearRotateMs`, and —
+for fixed-arc sizes — a static `dasharray`. A future size is an additive map
+entry rather than nested `isSmall` / `isLarge` branches.
+
+### Small motion (parity with web)
+
+`size="small"` deliberately does **not** run Layers 2 and 3. Matching web's
+`ActivityIndicator.module.css` (`.small .svg` / `.small .arc`):
+
+- Only Layer 1 runs — a fixed-length arc (`strokeDasharray: 40, 200`) spun by
+  the outer rotation.
+- Layer 1 duration is `1000ms` (~1.8× faster than web's base linear rotate), so
+  the simpler single arc still feels lively.
+- The 8-phase inner rotation and expand/contract arc are omitted because that
+  layered motion reads as too busy at 28px.
+
+This keeps FormatFile grid thumbnails and other small call sites visually
+aligned with web's small indicator, not just size-matched.
+
+The literal base durations match Material Web's published progress motion spec;
+the same values ship from `@jobber/design`'s `timing.tokens.json` to both web
+and mobile so the base rhythm is identical across platforms. The small spin
+duration is a CSS literal on web and a matching constant on native (`1000ms`).
 
 ## Reduced Motion
 
@@ -156,10 +180,10 @@ shipped — the original 0.55 lower bound was too subtle to read as activity.
 
 ## Sizing
 
-| `size`  | Outer diameter | Stroke width                        |
-| ------- | -------------- | ----------------------------------- |
-| `small` | 28 px          | proportional to web's small variant |
-| `base`  | 44 px          | proportional to web's base variant  |
+| `size`  | Outer diameter | Stroke width                        | Motion                                       |
+| ------- | -------------- | ----------------------------------- | -------------------------------------------- |
+| `small` | 28 px          | proportional to web's small variant | Layer 1 only; fixed arc; 1000ms spin         |
+| `base`  | 44 px          | proportional to web's base variant  | Full three-layer Material indeterminate ring |
 
 Sizes are unified across iOS, Android, and web. The component deliberately does
 not adopt iOS-native sizing (`UIActivityIndicatorView`'s ~20/~37 px) — the
@@ -193,6 +217,7 @@ Documented divergences:
 | Test id                  | (no equivalent; tests use `getByRole` / `getByText`)                         | `testID`                                                                                                                 |
 | Accessibility plumbing   | `role="status"` + visually-hidden text + announce-on-mount fix for VoiceOver | `accessibilityRole="progressbar"` + `accessibilityState={{ busy: true }}` + `AccessibilityInfo.announceForAccessibility` |
 | Reduced motion detection | CSS `@media (prefers-reduced-motion: reduce)`                                | `useReducedMotion()` from `react-native-reanimated`                                                                      |
+| Small motion             | Layer 1 only; fixed arc; 1000ms spin (CSS)                                   | Same behavior (Reanimated); matches web intentionally                                                                    |
 
 The divergences are intentional — each platform follows its own conventions on
 the user-facing side while the underlying intent and visual outcome match.

package/src/FormatFile/components/MediaView/MediaView.tsx

@@ -128,6 +128,7 @@ export function MediaView({
           file={file}
           onUploadComplete={onUploadComplete}
           styles={styles}
+          styleInGrid={styleInGrid}
         />
       </ImageBackground>
     </View>
@@ -141,6 +142,7 @@ interface OverlayProps {
   readonly file: FormattedFile;
   readonly onUploadComplete: () => void;
   readonly styles: ReturnType<typeof useStyles>;
+  readonly styleInGrid: boolean;
 }
 
 function Overlay({
@@ -150,8 +152,11 @@ function Overlay({
   file,
   onUploadComplete,
   styles,
+  styleInGrid,
 }: OverlayProps) {
-  if (isLoading) return <ActivityIndicator />;
+  if (isLoading) {
+    return <ActivityIndicator size={styleInGrid ? "small" : "base"} />;
+  }
 
   if (hasError) return <ErrorOverlay styles={styles} />;
 
@@ -263,6 +268,7 @@ function VideoPlaceholder({
         file={file}
         onUploadComplete={onUploadComplete}
         styles={styles}
+        styleInGrid={styleInGrid}
       />
     </View>
   );
@@ -275,8 +281,12 @@ function PlaceholderStatusOverlay({
   file,
   onUploadComplete,
   styles,
+  styleInGrid,
 }: OverlayProps) {
-  if (isLoading) return <ActivityIndicator />;
+  if (isLoading) {
+    return <ActivityIndicator size={styleInGrid ? "small" : "base"} />;
+  }
+
   if (hasError) return <ErrorOverlay styles={styles} />;
 
   if (showOverlay) {