@jobber/components-native 0.89.5-JOB-140604-2d32fc8.44 → 0.89.5-JOB-140604-8777ec5.52

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

@@ -0,0 +1,283 @@
+import React from "react";
+import { fireEvent, render, waitFor } from "@testing-library/react-native";
+import { MediaView } from "./MediaView";
+import type { FormattedFile } from "../../types";
+import { StatusCode } from "../../types";
+import { AtlantisFormatFileContext } from "../../context/FormatFileContext";
+
+jest.mock("../../../hooks/useAtlantisI18n", () => ({
+  useAtlantisI18n: () => ({ t: (key: string) => key }),
+}));
+
+describe("MediaView", () => {
+  const mockFile: FormattedFile = {
+    showPreview: true,
+    source: "https://example.com/image1.jpg",
+    thumbnailUrl: undefined,
+    name: "test.jpg",
+    size: 1024,
+    external: false,
+    progress: 0,
+    status: StatusCode.Completed,
+    error: false,
+    type: "image/jpeg",
+    isMedia: true,
+    showFileTypeIndicator: false,
+  };
+
+  const defaultProps = {
+    accessibilityLabel: "Test image",
+    showOverlay: false,
+    showError: false,
+    file: mockFile,
+    styleInGrid: false,
+    onUploadComplete: jest.fn(),
+  };
+
+  const mockContextValue = {
+    useCreateThumbnail: () => ({ thumbnail: undefined, error: false }),
+  };
+
+  const renderWithContext = (props = defaultProps) => {
+    return render(
+      <AtlantisFormatFileContext.Provider value={mockContextValue}>
+        <MediaView {...props} />
+      </AtlantisFormatFileContext.Provider>,
+    );
+  };
+
+  describe("Normal loading flow", () => {
+    it("shows loading indicator when onLoadStart fires", () => {
+      const { getByTestId, queryByTestId } = renderWithContext();
+      const image = getByTestId("test-image");
+
+      expect(queryByTestId("ActivityIndicator")).toBeNull();
+
+      fireEvent(image, "loadStart");
+
+      expect(queryByTestId("ActivityIndicator")).toBeTruthy();
+    });
+
+    it("hides loading indicator when onLoadEnd fires", () => {
+      const { getByTestId, queryByTestId } = renderWithContext();
+      const image = getByTestId("test-image");
+
+      fireEvent(image, "loadStart");
+      expect(queryByTestId("ActivityIndicator")).toBeTruthy();
+
+      fireEvent(image, "loadEnd");
+
+      expect(queryByTestId("ActivityIndicator")).toBeNull();
+    });
+  });
+
+  describe("Race condition handling (cached images)", () => {
+    it("does not get stuck loading when onLoadEnd fires before onLoadStart", () => {
+      const { getByTestId, queryByTestId } = renderWithContext();
+      const image = getByTestId("test-image");
+
+      // Simulate cached image: LoadEnd fires BEFORE LoadStart
+      fireEvent(image, "loadEnd");
+      expect(queryByTestId("ActivityIndicator")).toBeNull();
+
+      fireEvent(image, "loadStart");
+
+      expect(queryByTestId("ActivityIndicator")).toBeNull();
+    });
+
+    it("does not show infinite spinner when load events fire out of order", () => {
+      const { getByTestId, queryByTestId } = renderWithContext();
+      const image = getByTestId("test-image");
+
+      // Race condition scenario
+      fireEvent(image, "loadEnd");
+      fireEvent(image, "loadStart");
+      fireEvent(image, "loadEnd");
+
+      expect(queryByTestId("ActivityIndicator")).toBeNull();
+    });
+  });
+
+  describe("URI changes", () => {
+    it("shows loading indicator when URI changes to a new image", async () => {
+      const { getByTestId, queryByTestId, rerender } = renderWithContext();
+      const image = getByTestId("test-image");
+
+      // First image: simulate cached load (LoadEnd before LoadStart)
+      fireEvent(image, "loadEnd");
+      fireEvent(image, "loadStart");
+      expect(queryByTestId("ActivityIndicator")).toBeNull();
+
+      // Change URI to a new image
+      const newFile = {
+        ...mockFile,
+        source: "https://example.com/image2.jpg",
+      };
+
+      rerender(
+        <AtlantisFormatFileContext.Provider value={mockContextValue}>
+          <MediaView {...defaultProps} file={newFile} />
+        </AtlantisFormatFileContext.Provider>,
+      );
+
+      await waitFor(() => {
+        const updatedImage = getByTestId("test-image");
+
+        // New image starts loading
+        fireEvent(updatedImage, "loadStart");
+
+        expect(queryByTestId("ActivityIndicator")).toBeTruthy();
+      });
+    });
+
+    it("shows loading indicator on second URI change", async () => {
+      const { getByTestId, queryByTestId, rerender } = renderWithContext();
+
+      const image1 = getByTestId("test-image");
+      fireEvent(image1, "loadStart");
+      fireEvent(image1, "loadEnd");
+      expect(queryByTestId("ActivityIndicator")).toBeNull();
+
+      const file2 = { ...mockFile, source: "https://example.com/image2.jpg" };
+      rerender(
+        <AtlantisFormatFileContext.Provider value={mockContextValue}>
+          <MediaView {...defaultProps} file={file2} />
+        </AtlantisFormatFileContext.Provider>,
+      );
+
+      await waitFor(() => {
+        const image2 = getByTestId("test-image");
+        fireEvent(image2, "loadStart");
+
+        expect(queryByTestId("ActivityIndicator")).toBeTruthy();
+      });
+    });
+
+    it("shows loading indicator on third URI change", async () => {
+      const { getByTestId, queryByTestId, rerender } = renderWithContext();
+
+      const image1 = getByTestId("test-image");
+      fireEvent(image1, "loadStart");
+      fireEvent(image1, "loadEnd");
+
+      const file2 = { ...mockFile, source: "https://example.com/image2.jpg" };
+      rerender(
+        <AtlantisFormatFileContext.Provider value={mockContextValue}>
+          <MediaView {...defaultProps} file={file2} />
+        </AtlantisFormatFileContext.Provider>,
+      );
+      const image2 = getByTestId("test-image");
+      fireEvent(image2, "loadEnd");
+
+      const file3 = { ...mockFile, source: "https://example.com/image3.jpg" };
+      rerender(
+        <AtlantisFormatFileContext.Provider value={mockContextValue}>
+          <MediaView {...defaultProps} file={file3} />
+        </AtlantisFormatFileContext.Provider>,
+      );
+
+      await waitFor(() => {
+        const image3 = getByTestId("test-image");
+        fireEvent(image3, "loadStart");
+
+        expect(queryByTestId("ActivityIndicator")).toBeTruthy();
+      });
+    });
+
+    it("handles URI change from cached to uncached image correctly", async () => {
+      const { getByTestId, queryByTestId, rerender } = renderWithContext();
+
+      // First image: cached (LoadEnd before LoadStart)
+      const image1 = getByTestId("test-image");
+      fireEvent(image1, "loadEnd");
+      fireEvent(image1, "loadStart");
+      expect(queryByTestId("ActivityIndicator")).toBeNull();
+
+      // Second image: uncached (normal LoadStart then LoadEnd)
+      const file2 = { ...mockFile, source: "https://example.com/image2.jpg" };
+      rerender(
+        <AtlantisFormatFileContext.Provider value={mockContextValue}>
+          <MediaView {...defaultProps} file={file2} />
+        </AtlantisFormatFileContext.Provider>,
+      );
+
+      await waitFor(() => {
+        const image2 = getByTestId("test-image");
+        fireEvent(image2, "loadStart");
+
+        expect(queryByTestId("ActivityIndicator")).toBeTruthy();
+
+        fireEvent(image2, "loadEnd");
+        expect(queryByTestId("ActivityIndicator")).toBeNull();
+      });
+    });
+  });
+
+  describe("thumbnailUrl changes", () => {
+    it("shows loading indicator when thumbnailUrl changes", async () => {
+      const { getByTestId, queryByTestId, rerender } = renderWithContext();
+
+      // First load completes
+      const image1 = getByTestId("test-image");
+      fireEvent(image1, "loadStart");
+      fireEvent(image1, "loadEnd");
+      expect(queryByTestId("ActivityIndicator")).toBeNull();
+
+      // Thumbnail URL changes (common when thumbnail generation completes)
+      const fileWithThumbnail = {
+        ...mockFile,
+        thumbnailUrl: "https://example.com/thumbnail.jpg",
+      };
+
+      rerender(
+        <AtlantisFormatFileContext.Provider value={mockContextValue}>
+          <MediaView {...defaultProps} file={fileWithThumbnail} />
+        </AtlantisFormatFileContext.Provider>,
+      );
+
+      await waitFor(() => {
+        const image2 = getByTestId("test-image");
+        fireEvent(image2, "loadStart");
+
+        expect(queryByTestId("ActivityIndicator")).toBeTruthy();
+      });
+    });
+  });
+
+  describe("Context thumbnail changes", () => {
+    it("shows loading indicator when context thumbnail changes", async () => {
+      const mockContextWithThumbnail = {
+        useCreateThumbnail: () => ({
+          thumbnail: "https://example.com/context-thumbnail.jpg",
+          error: false,
+        }),
+      };
+
+      const { getByTestId, queryByTestId, rerender } = render(
+        <AtlantisFormatFileContext.Provider value={mockContextValue}>
+          <MediaView {...defaultProps} />
+        </AtlantisFormatFileContext.Provider>,
+      );
+
+      // First load completes
+      const image1 = getByTestId("test-image");
+      fireEvent(image1, "loadStart");
+      fireEvent(image1, "loadEnd");
+      expect(queryByTestId("ActivityIndicator")).toBeNull();
+
+      // Context provides a new thumbnail
+      rerender(
+        <AtlantisFormatFileContext.Provider value={mockContextWithThumbnail}>
+          <MediaView {...defaultProps} />
+        </AtlantisFormatFileContext.Provider>,
+      );
+
+      await waitFor(() => {
+        const image2 = getByTestId("test-image");
+        fireEvent(image2, "loadStart");
+
+        expect(queryByTestId("ActivityIndicator")).toBeTruthy();
+      });
+    });
+  });
+});

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { ImageBackground, View } from "react-native";
 import { useStyles } from "./MediaView.style";
 import type { FormattedFile } from "../../types";
@@ -27,11 +27,17 @@ export function MediaView({
   file,
   styleInGrid,
   onUploadComplete,
-}: MediaViewProps): JSX.Element {
+}: MediaViewProps) {
   const { t } = useAtlantisI18n();
   const { useCreateThumbnail } = useAtlantisFormatFileContext();
   const { thumbnail, error } = useCreateThumbnail(file);
   const [isLoading, setIsLoading] = useState(false);
+  /**
+   * Tracks whether onLoadEnd has fired to prevent race conditions.
+   * ImageBackground can fire onLoadEnd before onLoadStart when loading cached images,
+   * which would cause isLoading to get stuck at true, showing an infinite spinner.
+   */
+  const hasLoadedRef = useRef(false);
 
   const a11yLabel = computeA11yLabel({
     accessibilityLabel,
@@ -40,10 +46,25 @@ export function MediaView({
     t,
   });
 
-  const hasError = showError || error;
-  const uri = thumbnail || file.thumbnailUrl || file.source;
+  const hasError = showError || error,
+    uri = thumbnail || file.thumbnailUrl || file.source,
+    styles = useStyles();
 
-  const styles = useStyles();
+  const handleLoadStart = () => {
+    if (!hasLoadedRef.current) {
+      setIsLoading(true);
+    }
+  };
+
+  const handleLoadEnd = () => {
+    hasLoadedRef.current = true;
+    setIsLoading(false);
+  };
+
+  useEffect(() => {
+    hasLoadedRef.current = false;
+    setIsLoading(false);
+  }, [uri]);
 
   return (
     <View accessible={true} accessibilityLabel={a11yLabel}>
@@ -55,8 +76,8 @@ export function MediaView({
         resizeMode={styleInGrid ? "cover" : "contain"}
         source={{ uri }}
         testID={"test-image"}
-        onLoadStart={() => setIsLoading(true)}
-        onLoadEnd={() => setIsLoading(false)}
+        onLoadStart={handleLoadStart}
+        onLoadEnd={handleLoadEnd}
       >
         <Overlay
           isLoading={isLoading}

package/src/FormatFile/components/ProgressBar/ProgressBar.tsx

@@ -22,7 +22,7 @@ export const ProgressBar = ({
   progress,
   status,
   onComplete,
-}: ProgressBarProps): JSX.Element => {
+}: ProgressBarProps) => {
   const barWidth = useRef(new Animated.Value(0)).current;
   const progressPercentage = barWidth.interpolate({
     inputRange: [0, 1],

package/src/Heading/Heading.tsx

@@ -71,7 +71,7 @@ export function Heading<T extends HeadingLevel = "heading">({
   maxLines = "unlimited",
   allowFontScaling = true,
   selectable,
-}: HeadingProps<T>): JSX.Element {
+}: HeadingProps<T>) {
   const headingStyle = getHeadingStyle(level, variation);
   const accessibilityRole = "header";
 

package/src/Icon/Icon.tsx

@@ -37,7 +37,7 @@ export function Icon({
   size = "base",
   customColor,
   testID,
-}: IconProps): JSX.Element {
+}: IconProps) {
   const { svgStyle, paths, viewBox } = getIcon({
     name,
     color,

package/src/IconButton/IconButton.tsx

@@ -50,7 +50,7 @@ export function IconButton({
   onPress,
   accessibilityLabel,
   testID,
-}: IconButtonProps): JSX.Element {
+}: IconButtonProps) {
   const styles = useStyles();
 
   return (

package/src/InputCurrency/InputCurrency.tsx

@@ -130,7 +130,7 @@ const computeDisplayFromNumericInput = (
   }
 };
 
-export function InputCurrency(props: InputCurrencyProps): JSX.Element {
+export function InputCurrency(props: InputCurrencyProps) {
   const {
     showCurrencySymbol = true,
     maxDecimalPlaces = 5,

package/src/InputDate/InputDate.tsx

@@ -8,9 +8,11 @@ import type { InputFieldWrapperProps } from "../InputFieldWrapper";
 import { FormField } from "../FormField";
 import { InputPressable } from "../InputPressable";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
+import type { InputPressableProps } from "../InputPressable/InputPressable";
 
 interface BaseInputDateProps
-  extends Pick<InputFieldWrapperProps, "invalid" | "disabled" | "placeholder"> {
+  extends Pick<InputFieldWrapperProps, "invalid" | "disabled" | "placeholder">,
+    Pick<InputPressableProps, "showMiniLabel"> {
   /**
    * Defaulted to "always" so user can clear the dates whenever there's a value.
    */
@@ -109,7 +111,7 @@ const display = Platform.OS === "ios" ? "inline" : "default";
 /**
  * Allow users to select a date using the device date picker.
  */
-export function InputDate(props: InputDateProps): JSX.Element {
+export function InputDate(props: InputDateProps) {
   if (props.name) {
     return (
       <FormField<Date>
@@ -145,11 +147,12 @@ function InternalInputDate({
   minDate,
   placeholder,
   value,
+  showMiniLabel = true,
   name,
   onChange,
   accessibilityLabel,
   accessibilityHint,
-}: InputDateProps): JSX.Element {
+}: InputDateProps) {
   const [showPicker, setShowPicker] = useState(false);
   const { t, locale, formatDate } = useAtlantisI18n();
 
@@ -174,6 +177,7 @@ function InternalInputDate({
   return (
     <>
       <InputPressable
+        showMiniLabel={showMiniLabel}
         focused={showPicker}
         clearable={canClearDate}
         disabled={disabled}

package/src/InputFieldWrapper/InputFieldWrapper.test.tsx

@@ -1,6 +1,11 @@
 import React from "react";
 import type { RenderAPI } from "@testing-library/react-native";
-import { fireEvent, render, renderHook } from "@testing-library/react-native";
+import {
+  fireEvent,
+  render,
+  renderHook,
+  screen,
+} from "@testing-library/react-native";
 import type { ViewStyle } from "react-native";
 import { Text } from "react-native";
 import type { InputFieldWrapperProps } from ".";
@@ -311,4 +316,46 @@ describe("InputFieldWrapper", () => {
       expect(queryByTestId(INPUT_FIELD_WRAPPER_SPINNER_TEST_ID)).toBeNull();
     });
   });
+
+  describe("placeholderMode", () => {
+    it("renders the placeholder in its normal position", () => {
+      renderInputFieldWrapper({
+        placeholder: "placeholder",
+        placeholderMode: "normal",
+      });
+      const placeholder = screen.getByText("placeholder", {
+        includeHiddenElements: true,
+      });
+      expect(placeholder).toBeDefined();
+      expect(placeholder.props.style).toContainEqual(
+        typographyStyles.defaultSize,
+      );
+    });
+
+    it("renders the placeholder in its mini label position", () => {
+      renderInputFieldWrapper({
+        placeholder: "placeholder",
+        placeholderMode: "mini",
+      });
+      const placeholder = screen.getByText("placeholder", {
+        includeHiddenElements: true,
+      });
+      expect(placeholder).toBeDefined();
+      expect(placeholder.props.style).toContainEqual(
+        typographyStyles.smallSize,
+      );
+    });
+
+    it("does not render the placeholder", () => {
+      renderInputFieldWrapper({
+        placeholder: "placeholder",
+        placeholderMode: "hidden",
+      });
+      expect(
+        screen.queryByText("placeholder", {
+          includeHiddenElements: true,
+        }),
+      ).toBeNull();
+    });
+  });
 });

package/src/InputFieldWrapper/InputFieldWrapper.tsx

@@ -43,7 +43,14 @@ export interface InputFieldWrapperProps {
    */
   readonly assistiveText?: string;
 
-  readonly hasMiniLabel?: boolean;
+  /**
+   * Controls how the placeholder text is displayed.
+   * - normal: the placeholder text will be displayed in the normal placeholder position
+   * - mini: the placeholder text will float above the input value
+   * - hidden: the placeholder text will not be displayed
+   * @default "normal"
+   */
+  readonly placeholderMode?: "normal" | "mini" | "hidden";
 
   readonly hasValue?: boolean;
 
@@ -119,7 +126,7 @@ export function InputFieldWrapper({
   assistiveText,
   prefix,
   suffix,
-  hasMiniLabel = false,
+  placeholderMode = "normal",
   hasValue = false,
   error,
   focused = false,
@@ -131,7 +138,7 @@ export function InputFieldWrapper({
   toolbarVisibility = "while-editing",
   loading = false,
   loadingType = "spinner",
-}: InputFieldWrapperProps): JSX.Element {
+}: InputFieldWrapperProps) {
   fieldAffixRequiredPropsCheck([prefix, suffix]);
   const handleClear = onClear ?? noopClear;
   warnIfClearActionWithNoOnClear(onClear, showClearAction);
@@ -143,6 +150,9 @@ export function InputFieldWrapper({
   const showLoadingGlimmer = loading && loadingType === "glimmer";
   const styles = useStyles();
 
+  const placeholderVisible = placeholderMode !== "hidden";
+  const miniLabelActive = placeholderMode === "mini";
+
   return (
     <ErrorMessageWrapper message={getMessage({ invalid, error })}>
       <View
@@ -160,35 +170,36 @@ export function InputFieldWrapper({
             <PrefixIcon
               disabled={disabled}
               focused={focused}
-              hasMiniLabel={hasMiniLabel}
               inputInvalid={inputInvalid}
               icon={prefix.icon}
             />
           )}
           <View style={[styles.inputContainer]}>
-            <View
-              style={[
-                !!placeholder && styles.label,
-                hasMiniLabel && styles.miniLabel,
-                disabled && styles.disabled,
-                hasMiniLabel &&
-                  showClearAction &&
-                  styles.miniLabelShowClearAction,
-              ]}
-              pointerEvents="none"
-            >
-              <Placeholder
-                placeholder={placeholder}
-                labelVariation={getLabelVariation(error, invalid, disabled)}
-                hasMiniLabel={hasMiniLabel}
-                styleOverride={styleOverride?.placeholderText}
-              />
-            </View>
+            {placeholderVisible && (
+              <View
+                style={[
+                  !!placeholder && styles.label,
+                  miniLabelActive && styles.miniLabel,
+                  disabled && styles.disabled,
+                  miniLabelActive &&
+                    showClearAction &&
+                    styles.miniLabelShowClearAction,
+                ]}
+                pointerEvents="none"
+              >
+                <Placeholder
+                  placeholder={placeholder}
+                  labelVariation={getLabelVariation(error, invalid, disabled)}
+                  miniLabelActive={miniLabelActive}
+                  styleOverride={styleOverride?.placeholderText}
+                />
+              </View>
+            )}
             {prefix?.label && hasValue && (
               <PrefixLabel
                 disabled={disabled}
                 focused={focused}
-                hasMiniLabel={hasMiniLabel}
+                miniLabelActive={miniLabelActive}
                 inputInvalid={inputInvalid}
                 label={prefix.label}
                 styleOverride={styleOverride?.prefixLabel}
@@ -225,7 +236,7 @@ export function InputFieldWrapper({
                   <SuffixLabel
                     disabled={disabled}
                     focused={focused}
-                    hasMiniLabel={hasMiniLabel}
+                    miniLabelActive={miniLabelActive}
                     inputInvalid={inputInvalid}
                     label={suffix.label}
                     hasLeftMargin={!showClearAction}
@@ -245,7 +256,6 @@ export function InputFieldWrapper({
                   <SuffixIcon
                     disabled={disabled}
                     focused={focused}
-                    hasMiniLabel={hasMiniLabel}
                     hasLeftMargin={!!(!showClearAction || suffix?.label)}
                     inputInvalid={inputInvalid}
                     icon={suffix.icon}
@@ -332,12 +342,12 @@ function Placeholder({
   placeholder,
   styleOverride,
   labelVariation,
-  hasMiniLabel,
+  miniLabelActive,
 }: {
   readonly placeholder?: string;
   readonly styleOverride: StyleProp<TextStyle>;
   readonly labelVariation: TextVariation;
-  readonly hasMiniLabel: boolean;
+  readonly miniLabelActive: boolean;
 }) {
   const typographyStyles = useTypographyStyles();
 
@@ -348,7 +358,7 @@ function Placeholder({
           hideFromScreenReader={true}
           maxLines="single"
           variation={labelVariation}
-          level={hasMiniLabel ? "textSupporting" : "text"}
+          level={miniLabelActive ? "textSupporting" : "text"}
         >
           {placeholder}
         </Text>
@@ -361,7 +371,7 @@ function Placeholder({
           style={[
             typographyStyles[labelVariation],
             typographyStyles.baseRegularRegular,
-            hasMiniLabel
+            miniLabelActive
               ? typographyStyles.smallSize
               : typographyStyles.defaultSize,
             styleOverride,

package/src/InputFieldWrapper/components/ClearAction/ClearAction.tsx

@@ -15,7 +15,7 @@ interface ClearActionProps {
 export function ClearAction({
   onPress,
   hasMarginRight = false,
-}: ClearActionProps): JSX.Element {
+}: ClearActionProps) {
   const { t } = useAtlantisI18n();
   const styles = useStyles();