@jobber/components-native 0.91.0 → 0.91.2

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.91.0",
+    "version": "0.91.2",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -94,5 +94,5 @@
         "react-native-safe-area-context": "^5.4.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "29381f7508578c0518fd4cecd07d021df83e08fc"
+    "gitHead": "89fec0b77276ec2b2fc80f4fc4ec2f6d207c1ac6"
 }

package/dist/src/ActionItem/ActionItemGroup.js

@@ -2,7 +2,7 @@ import React from "react";
 import { View } from "react-native";
 import { useStyles } from "./ActionItem.style";
 import { Divider } from "../Divider";
-export function ActionItemGroup({ children, }) {
+export function ActionItemGroup({ children }) {
     return React.createElement(View, null, renderChildren(children));
 }
 function renderChildren(children) {

package/dist/src/AutoLink/components/Link/Link.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Text as RNText } from "react-native";
 import { Text } from "../../../Text";
-export function Link({ children, onPress, onLongPress, }) {
+export function Link({ children, onPress, onLongPress }) {
     return (React.createElement(RNText, { onPress: onPress, onLongPress: onLongPress },
         React.createElement(Text, { variation: "interactive" }, children)));
 }

package/dist/src/ErrorMessageWrapper/context/ErrorMessageProvider.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { AccessibilityInfo, findNodeHandle } from "react-native";
 import { ErrorMessageContext } from "./ErrorMessageContext";
-export function ErrorMessageProvider({ children, }) {
+export function ErrorMessageProvider({ children }) {
     const [elements, setElements] = useState({});
     return (React.createElement(ErrorMessageContext.Provider, { value: {
             elements,

package/dist/src/Form/components/FormMessageBanner/FormMessageBanner.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { FormBannerMessageType } from "../../types";
 import { Banner } from "../../../Banner";
-export function FormMessageBanner({ bannerMessages, }) {
+export function FormMessageBanner({ bannerMessages }) {
     return (React.createElement(React.Fragment, null, bannerMessages === null || bannerMessages === void 0 ? void 0 : bannerMessages.map((message, index) => (React.createElement(Banner, { key: index, text: message.message, type: getBannerType(message.messageType) })))));
 }
 function getBannerType(messageType) {

package/dist/src/FormatFile/components/MediaView/MediaView.js

@@ -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 { StatusCode } from "../../types";
@@ -14,20 +14,37 @@ export function MediaView({ accessibilityLabel, showOverlay, showError, file, st
     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,
         showOverlay,
         showError,
         t,
     });
-    const hasError = showError || error;
-    const uri = thumbnail || file.thumbnailUrl || file.source;
-    const styles = useStyles();
+    const hasError = showError || error, uri = thumbnail || file.thumbnailUrl || file.source, styles = useStyles();
+    const handleLoadStart = () => {
+        if (!hasLoadedRef.current) {
+            setIsLoading(true);
+        }
+    };
+    const handleLoadEnd = () => {
+        hasLoadedRef.current = true;
+        setIsLoading(false);
+    };
+    useEffect(() => {
+        hasLoadedRef.current = false;
+        setIsLoading(false);
+    }, [uri]);
     return (React.createElement(View, { accessible: true, accessibilityLabel: a11yLabel },
         React.createElement(ImageBackground, { style: [
                 styles.imageBackground,
                 styleInGrid ? styles.imageBackgroundGrid : styles.imageBackgroundFlat,
-            ], resizeMode: styleInGrid ? "cover" : "contain", source: { uri }, testID: "test-image", onLoadStart: () => setIsLoading(true), onLoadEnd: () => setIsLoading(false) },
+            ], resizeMode: styleInGrid ? "cover" : "contain", source: { uri }, testID: "test-image", onLoadStart: handleLoadStart, onLoadEnd: handleLoadEnd },
             React.createElement(Overlay, { isLoading: isLoading, showOverlay: showOverlay, hasError: hasError, file: file, onUploadComplete: onUploadComplete, styles: styles }))));
 }
 function Overlay({ isLoading, showOverlay, hasError, file, onUploadComplete, styles, }) {

package/dist/src/Select/components/SelectPressable/SelectPressable.js

@@ -7,7 +7,7 @@ import { useIsScreenReaderEnabled } from "../../../hooks";
  * screen-reader is being used to avoid screen-readers from ignoring the press
  * on the MenuView
  */
-export function SelectPressable({ children, onPress, }) {
+export function SelectPressable({ children, onPress }) {
     const isScreenReaderEnabled = useIsScreenReaderEnabled();
     const styles = useStyles();
     if (isScreenReaderEnabled)