@jobber/components-native 0.91.0 → 0.91.2

package/src/EmptyState/EmptyState.tsx

@@ -65,7 +65,7 @@ export function EmptyState({
   primaryAction,
   secondaryAction,
   iconColor = "blue",
-}: EmptyStateProps): JSX.Element {
+}: EmptyStateProps) {
   const styles = useStyles();
 
   return (

package/src/ErrorMessageWrapper/ErrorMessageWrapper.tsx

@@ -34,7 +34,7 @@ export function ErrorMessageWrapper({
   message,
   wrapFor = "default",
   children,
-}: ErrorMessageWrapperProps): JSX.Element {
+}: ErrorMessageWrapperProps) {
   const errorMessageContext = useErrorMessageContext();
   const register = errorMessageContext?.register;
   const unregister = errorMessageContext?.unregister;

package/src/ErrorMessageWrapper/context/ErrorMessageProvider.tsx

@@ -13,9 +13,7 @@ interface ErrorMessageProviderProps {
   readonly children: ReactNode;
 }
 
-export function ErrorMessageProvider({
-  children,
-}: ErrorMessageProviderProps): JSX.Element {
+export function ErrorMessageProvider({ children }: ErrorMessageProviderProps) {
   const [elements, setElements] = useState<
     ErrorMessageContextProps["elements"]
   >({});

package/src/Flex/Flex.tsx

@@ -11,7 +11,7 @@ export function Flex({
   align = "center",
   gap = "base",
   children,
-}: PropsWithChildren<FlexProps>): JSX.Element {
+}: PropsWithChildren<FlexProps>) {
   if (template.length === 1) {
     console.warn("Please use <Content /> component for a stacked layout");
   }
@@ -54,7 +54,7 @@ function Row({
   align = "center",
   gap = "base",
   children,
-}: PropsWithChildren<FlexProps>): JSX.Element {
+}: PropsWithChildren<FlexProps>) {
   return (
     <View testID="ATL-Flex-Row" style={[styles.row, { alignItems: align }]}>
       {Children.map(children, (child, index) => (

package/src/Form/Form.test.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type ReactElement } from "react";
 import { act, fireEvent, render, waitFor } from "@testing-library/react-native";
 import { Alert, Keyboard } from "react-native";
 import { Host } from "react-native-portalize";
@@ -94,7 +94,7 @@ interface FormTestProps {
     onSubmit: () => void,
     label: string | undefined,
     isSubmitting: boolean,
-  ) => JSX.Element;
+  ) => ReactElement;
   readonly initialLoading?: boolean;
   readonly initialValues?: FormFields;
   readonly bannerMessages?: FormBannerMessage[];

package/src/Form/Form.tsx

@@ -34,7 +34,7 @@ import { ErrorMessageProvider } from "../ErrorMessageWrapper";
 export function Form<T extends FieldValues, S>({
   initialLoading,
   ...rest
-}: FormProps<T, S>): JSX.Element {
+}: FormProps<T, S>) {
   const child = initialLoading ? <FormMask /> : <InternalForm {...rest} />;
 
   return (

package/src/Form/components/FormActionBar/FormActionBar.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type ReactElement } from "react";
 import type { LayoutChangeEvent } from "react-native";
 import { StyleSheet } from "react-native";
 import Reanimated from "react-native-reanimated";
@@ -18,7 +18,7 @@ export interface FormActionBarProps {
     onSubmit: () => void,
     label: string | undefined,
     isSubmitting: boolean,
-  ) => JSX.Element;
+  ) => ReactElement;
   readonly secondaryActions?: SecondaryActionProp[];
   readonly setSecondaryActionLoading?: (bool: boolean) => void;
 }
@@ -32,7 +32,7 @@ export function FormActionBar({
   setSaveButtonHeight,
   secondaryActions,
   setSecondaryActionLoading,
-}: FormActionBarProps): JSX.Element {
+}: FormActionBarProps) {
   const styles = useStyles();
 
   const buttonStyle = StyleSheet.flatten([

package/src/Form/components/FormBody/FormBody.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { type ReactElement, useMemo } from "react";
 import { View } from "react-native";
 import { useStyles } from "./FormBody.style";
 import { useScreenInformation } from "../../hooks/useScreenInformation";
@@ -7,7 +7,7 @@ import { FormActionBar } from "../FormActionBar";
 import { tokens } from "../../../utils/design";
 
 interface FormBodyProps extends FormActionBarProps {
-  readonly children: JSX.Element;
+  readonly children: ReactElement;
   readonly shouldRenderActionBar?: boolean;
   readonly saveButtonOffset?: number;
 }
@@ -24,7 +24,7 @@ export function FormBody({
   setSecondaryActionLoading,
   setSaveButtonHeight,
   saveButtonOffset,
-}: FormBodyProps): JSX.Element {
+}: FormBodyProps) {
   const paddingBottom = useBottomPadding();
   const fullViewPadding = useMemo(() => ({ paddingBottom }), [paddingBottom]);
   const styles = useStyles();

package/src/Form/components/FormCache/FormCache.tsx

@@ -14,7 +14,7 @@ export function FormCache<T extends FieldValues>({
   localCacheExclude,
   localCacheKey,
   setLocalCache,
-}: FormCacheProps<T>): JSX.Element {
+}: FormCacheProps<T>) {
   const { control, formState } = useFormContext<T>();
   const { isDirty } = formState;
 

package/src/Form/components/FormErrorBanner/FormErrorBanner.tsx

@@ -6,7 +6,7 @@ import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 export function FormErrorBanner({
   networkError,
   bannerError,
-}: FormBannerErrors): JSX.Element {
+}: FormBannerErrors) {
   const { t } = useAtlantisI18n();
 
   if (networkError) {

package/src/Form/components/FormMask/FormMask.tsx

@@ -4,7 +4,7 @@ import { useStyles } from "./FormMask.style";
 import { ActivityIndicator } from "../../../ActivityIndicator";
 import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 
-export function FormMask(): JSX.Element {
+export function FormMask() {
   const { t } = useAtlantisI18n();
   const styles = useStyles();
 

package/src/Form/components/FormMessage/FormMessage.tsx

@@ -17,7 +17,7 @@ let close: (() => void) | undefined;
  * message to the user. Use `FormMessage.close()` to close the most
  * recent message.
  */
-export const FormMessage = (): JSX.Element => {
+export const FormMessage = () => {
   const [data, setData] = useState<FormMessageData[]>([]);
 
   open = useCallback(

package/src/Form/components/FormMessage/components/InternalFormMessage/InternalFormMessage.tsx

@@ -15,7 +15,7 @@ interface FormMessageProps {
 export function InternalFormMessage({
   data,
   onRequestClose,
-}: FormMessageProps): JSX.Element {
+}: FormMessageProps) {
   const { t } = useAtlantisI18n();
   const styles = useStyles();
   const emptyStateData: EmptyStateProps = useMemo(() => {

package/src/Form/components/FormMessageBanner/FormMessageBanner.tsx

@@ -8,9 +8,7 @@ interface FormMessageBannerProps {
   readonly bannerMessages?: FormBannerMessage[];
 }
 
-export function FormMessageBanner({
-  bannerMessages,
-}: FormMessageBannerProps): JSX.Element {
+export function FormMessageBanner({ bannerMessages }: FormMessageBannerProps) {
   return (
     <>
       {bannerMessages?.map((message, index) => (

package/src/Form/components/FormSaveButton/FormSaveButton.tsx

@@ -13,7 +13,7 @@ export function FormSaveButton({
   setSecondaryActionLoading,
   onOpenBottomSheet,
   onCloseBottomSheet,
-}: FormSaveButtonProps): JSX.Element {
+}: FormSaveButtonProps) {
   const { t } = useAtlantisI18n();
   const formContext = useFormContext();
   const buttonActions = useButtonGroupAction(secondaryActions);

package/src/Form/types.ts

@@ -1,4 +1,4 @@
-import type { MutableRefObject, RefObject } from "react";
+import type { MutableRefObject, ReactElement, RefObject } from "react";
 import type {
   ControllerProps,
   DefaultValues,
@@ -142,7 +142,7 @@ export interface FormProps<T extends FieldValues, SubmitResponseType> {
     onSubmit: () => void,
     label: string | undefined,
     isSubmitting: boolean,
-  ) => JSX.Element;
+  ) => ReactElement;
 
   /**
    * Adding a key will save a local copy of the form data that will be used to

package/src/FormField/FormField.tsx

@@ -39,7 +39,7 @@ export function FormField<T>({
   children,
   defaultValue: value,
   validations,
-}: FormFieldProps<T>): JSX.Element {
+}: FormFieldProps<T>) {
   const { error, field } = useFormController({
     name,
     value,

package/src/FormatFile/FormatFile.tsx

@@ -88,7 +88,7 @@ function FormatFileContent({
   styleInGrid,
   onUploadComplete,
   isMedia,
-}: FormatFileContentProps): JSX.Element {
+}: FormatFileContentProps) {
   const styles = useStyles();
 
   return (
@@ -204,7 +204,7 @@ export function FormatFile<T extends File | FileUpload>({
   showFileTypeIndicator = true,
   createThumbnail,
   onPreviewPress,
-}: FormatFileProps<T>): JSX.Element {
+}: FormatFileProps<T>) {
   const onTapModified = onTap ? () => onTap(file) : () => undefined;
 
   const formattedFile = parseFile(file, showFileTypeIndicator);
@@ -236,7 +236,7 @@ function FormatFileInternal({
   onPreviewPress,
   testID,
   createThumbnail: createThumbnailProp,
-}: FormatFileInternalProps): JSX.Element {
+}: FormatFileInternalProps) {
   const [showOverlay, setShowOverlay] = useState<boolean>(
     file.status !== StatusCode.Completed,
   );

package/src/FormatFile/components/ErrorIcon/ErrorIcon.tsx

@@ -3,7 +3,7 @@ import { View } from "react-native";
 import { useStyles } from "./ErrorIcon.style";
 import { Icon } from "../../../Icon";
 
-export function ErrorIcon(): JSX.Element {
+export function ErrorIcon() {
   const styles = useStyles();
 
   return (

package/src/FormatFile/components/FileView/FileView.tsx

@@ -27,7 +27,7 @@ export function FileView({
   showOverlay,
   showError,
   onUploadComplete,
-}: FileViewProps): JSX.Element {
+}: FileViewProps) {
   const { t } = useAtlantisI18n();
   const styles = useStyles();
 

package/src/FormatFile/components/FormatFileBottomSheet/FormatFileBottomSheet.tsx

@@ -20,7 +20,7 @@ export const FormatFileBottomSheet = ({
   onPreviewPress,
   onRemovePress,
   bottomSheetOptionsSuffix,
-}: FormatFileBottomSheetProps): JSX.Element => {
+}: FormatFileBottomSheetProps) => {
   const { t } = useAtlantisI18n();
 
   const handlePress = (onPressAction: () => void) => {

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 (