zkit-ui 1.0.2 → 1.0.3

package/dist/ui/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/index.tsx"],"names":[],"mappings":"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"}

package/dist/ui/Button/index.js

@@ -53,6 +53,7 @@ const LOADING_TIMING = {
     easing: react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.cubic),
     reduceMotion: react_native_reanimated_1.ReduceMotion.System,
 };
+const ANIMATED_EXIT_RESIDENCY_MS = LOADING_TIMING.duration + 40;
 const DISABLED_OPACITY = 0.52;
 const PRESSED_OPACITY = 0.82;
 const PRESSED_SCALE = 0.985;
@@ -373,7 +374,7 @@ function resolvePressEffect(effect, interactionDisabled) {
         return 'none';
     if (effect !== 'auto')
         return effect;
-    return 'scale-opacity';
+    return 'opacity';
 }
 function resolvePressEffectFlags(effect) {
     return {
@@ -544,12 +545,10 @@ function requiresAnimatedPressEffect(effect) {
         effect === 'highlight' ||
         effect === 'scale-highlight');
 }
-function shouldUseStaticButtonPath({ disabled, loading, pressEffect, }) {
-    if (loading)
-        return false;
+function shouldRequestAnimatedPressPath({ disabled, pressEffect, }) {
     if (disabled)
-        return true;
-    return !requiresAnimatedPressEffect(pressEffect);
+        return false;
+    return requiresAnimatedPressEffect(pressEffect);
 }
 function useButtonFrame({ variant = 'solid', tone = 'primary', size = 'md', shape = 'rounded', block = false, disabled = false, loading = false, icon, iconPlacement = 'start', iconOnly = false, color, colors, border, layout, gradient, shadow = 'none', children, textStyle, accessibilityLabel, }) {
     var _a, _b;
@@ -741,6 +740,101 @@ function ButtonStaticImpl({ variant = 'solid', tone = 'primary', size = 'md', sh
                 contentStyle,
             ], children: [LinearGradientComponent && gradientCfg ? ((0, jsx_runtime_1.jsx)(LinearGradientComponent, { pointerEvents: "none", colors: gradientCfg.colors, start: gradientCfg.start, end: gradientCfg.end, style: [react_native_1.StyleSheet.absoluteFillObject, radiusStyle] })) : null, iconOnly ? ((icon !== null && icon !== void 0 ? icon : resolvedText)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && iconPlacement === 'start' ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [iconBaseBoxStyle, iconPlacedBoxStyle], children: icon })) : null, resolvedText, icon && iconPlacement === 'end' ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [iconBaseBoxStyle, iconPlacedBoxStyle], children: icon })) : null] }))] }) }));
 }
+function ButtonPressAnimatedImpl({ variant = 'solid', tone = 'primary', size = 'md', shape = 'rounded', block = false, disabled = false, loading = false, loadingMode: _loadingMode = 'inline', pressEffect = 'auto', icon, iconPlacement = 'start', iconOnly = false, color, colors, border, layout, gradient, shadow = 'none', children, style, contentStyle, textStyle, accessibilityLabel, accessibilityState, hitSlop, onPress, onPressIn, onPressOut, testID, ...pressableProps }, ref) {
+    const frame = useButtonFrame({
+        accessibilityLabel,
+        block,
+        border,
+        children,
+        color,
+        colors,
+        disabled,
+        gradient,
+        icon,
+        iconOnly,
+        iconPlacement,
+        layout,
+        loading,
+        shadow,
+        shape,
+        size,
+        textStyle,
+        tone,
+        variant,
+    });
+    const { accentColor, borderStyle, contentSizeStyle, defaultHitSlop, gradientCfg, hasGradientBackground, hasIcon, iconBaseBoxStyle, iconPlacedBoxStyle, interactionDisabled, LinearGradientComponent, paddingStyle, radiusStyle, resolvedAccessibilityLabel, resolvedText, rootSizeStyle, shadowStyle, visualColors, visualDisabled, webCursorStyle, } = frame;
+    const pressSv = (0, react_native_reanimated_1.useSharedValue)(0);
+    const resolvedPressEffect = React.useMemo(() => resolvePressEffect(pressEffect, interactionDisabled), [interactionDisabled, pressEffect]);
+    const pressEffectFlags = React.useMemo(() => resolvePressEffectFlags(resolvedPressEffect), [resolvedPressEffect]);
+    const pressHighlightEnabled = pressEffectFlags.highlight;
+    const pressOpacityEnabled = pressEffectFlags.opacity;
+    const pressScaleEnabled = pressEffectFlags.scale;
+    const pressOverlay = React.useMemo(() => resolveOverlay({
+        accentColor,
+        colors,
+        hasGradientBackground,
+        variant,
+    }), [accentColor, colors, hasGradientBackground, variant]);
+    React.useEffect(() => {
+        if (interactionDisabled || resolvedPressEffect === 'none') {
+            pressSv.value = 0;
+        }
+    }, [interactionDisabled, pressSv, resolvedPressEffect]);
+    const rootAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        const baseOpacity = visualDisabled ? DISABLED_OPACITY : 1;
+        const scale = pressScaleEnabled
+            ? (0, react_native_reanimated_1.interpolate)(pressSv.value, [0, 1], [1, PRESSED_SCALE])
+            : 1;
+        const opacity = pressOpacityEnabled
+            ? (0, react_native_reanimated_1.interpolate)(pressSv.value, [0, 1], [baseOpacity, PRESSED_OPACITY])
+            : baseOpacity;
+        return {
+            opacity,
+            transform: [{ scale }],
+        };
+    }, [pressOpacityEnabled, pressScaleEnabled, visualDisabled]);
+    const overlayAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        const opacity = pressHighlightEnabled
+            ? (0, react_native_reanimated_1.interpolate)(pressSv.value, [0, 1], [0, pressOverlay.strength])
+            : 0;
+        return { opacity };
+    }, [pressHighlightEnabled, pressOverlay.strength]);
+    const handlePress = React.useCallback((event) => {
+        if (interactionDisabled)
+            return;
+        onPress === null || onPress === void 0 ? void 0 : onPress(event);
+    }, [interactionDisabled, onPress]);
+    const handlePressIn = React.useCallback((event) => {
+        if (!interactionDisabled && resolvedPressEffect !== 'none') {
+            pressSv.value = (0, react_native_reanimated_1.withTiming)(1, PRESS_TIMING);
+        }
+        onPressIn === null || onPressIn === void 0 ? void 0 : onPressIn(event);
+    }, [interactionDisabled, onPressIn, pressSv, resolvedPressEffect]);
+    const handlePressOut = React.useCallback((event) => {
+        if (!interactionDisabled && resolvedPressEffect !== 'none') {
+            pressSv.value = (0, react_native_reanimated_1.withTiming)(0, PRESS_TIMING);
+        }
+        onPressOut === null || onPressOut === void 0 ? void 0 : onPressOut(event);
+    }, [interactionDisabled, onPressOut, pressSv, resolvedPressEffect]);
+    return ((0, jsx_runtime_1.jsx)(AnimatedPressable, { ...pressableProps, ref: ref, accessibilityLabel: resolvedAccessibilityLabel, accessibilityRole: "button", accessibilityState: {
+            ...accessibilityState,
+            busy: Boolean(loading || (accessibilityState === null || accessibilityState === void 0 ? void 0 : accessibilityState.busy)),
+            disabled: Boolean(interactionDisabled || (accessibilityState === null || accessibilityState === void 0 ? void 0 : accessibilityState.disabled)),
+        }, disabled: interactionDisabled, hitSlop: hitSlop !== null && hitSlop !== void 0 ? hitSlop : defaultHitSlop, onPress: handlePress, onPressIn: handlePressIn, onPressOut: handlePressOut, style: [styles.root, rootSizeStyle, radiusStyle, shadowStyle, rootAnimatedStyle, webCursorStyle, style], testID: testID, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { pointerEvents: "none", style: [
+                styles.content,
+                contentSizeStyle,
+                paddingStyle,
+                radiusStyle,
+                borderStyle,
+                { backgroundColor: visualColors.backgroundColor },
+                contentStyle,
+            ], children: [LinearGradientComponent && gradientCfg ? ((0, jsx_runtime_1.jsx)(LinearGradientComponent, { pointerEvents: "none", colors: gradientCfg.colors, start: gradientCfg.start, end: gradientCfg.end, style: [react_native_1.StyleSheet.absoluteFillObject, radiusStyle] })) : null, pressHighlightEnabled ? ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: "none", style: [
+                        react_native_1.StyleSheet.absoluteFillObject,
+                        radiusStyle,
+                        { backgroundColor: pressOverlay.color },
+                        overlayAnimatedStyle,
+                    ] })) : null, iconOnly ? ((icon !== null && icon !== void 0 ? icon : resolvedText)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && iconPlacement === 'start' ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [iconBaseBoxStyle, iconPlacedBoxStyle], children: icon })) : null, resolvedText, icon && iconPlacement === 'end' ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [iconBaseBoxStyle, iconPlacedBoxStyle], children: icon })) : null] }))] }) }));
+}
 function ButtonAnimatedImpl({ variant = 'solid', tone = 'primary', size = 'md', shape = 'rounded', block = false, disabled = false, loading = false, loadingMode = 'inline', pressEffect = 'auto', icon, iconPlacement = 'start', iconOnly = false, color, colors, border, layout, gradient, shadow = 'none', children, style, contentStyle, textStyle, accessibilityLabel, accessibilityState, hitSlop, onPress, onPressIn, onPressOut, testID, ...pressableProps }, ref) {
     const resolvedLoadingMode = iconOnly ? 'overlay' : loadingMode;
     const centeredLoading = resolvedLoadingMode !== 'inline';
@@ -773,7 +867,7 @@ function ButtonAnimatedImpl({ variant = 'solid', tone = 'primary', size = 'md',
         variant,
     }), [iconOnly, layout, metrics, variant]);
     const pressSv = (0, react_native_reanimated_1.useSharedValue)(0);
-    const loadingSv = (0, react_native_reanimated_1.useSharedValue)(loading ? 1 : 0);
+    const loadingSv = (0, react_native_reanimated_1.useSharedValue)(0);
     const [spinnerMounted, setSpinnerMounted] = React.useState(loading);
     const hideSpinnerTimerRef = React.useRef(null);
     const resolvedPressEffect = React.useMemo(() => resolvePressEffect(pressEffect, interactionDisabled), [interactionDisabled, pressEffect]);
@@ -924,13 +1018,32 @@ function ButtonAnimatedImpl({ variant = 'solid', tone = 'primary', size = 'md',
 }
 const ButtonStaticWithRef = React.forwardRef(ButtonStaticImpl);
 ButtonStaticWithRef.displayName = 'ButtonStatic';
+const ButtonPressAnimatedWithRef = React.forwardRef(ButtonPressAnimatedImpl);
+ButtonPressAnimatedWithRef.displayName = 'ButtonPressAnimated';
 const ButtonAnimatedWithRef = React.forwardRef(ButtonAnimatedImpl);
-ButtonAnimatedWithRef.displayName = 'ButtonAnimated';
+ButtonAnimatedWithRef.displayName = 'ButtonLoadingAnimated';
 function ButtonImpl(props, ref) {
-    if (shouldUseStaticButtonPath(props)) {
-        return (0, jsx_runtime_1.jsx)(ButtonStaticWithRef, { ...props, ref: ref });
+    const loadingRequested = Boolean(props.loading);
+    const animatedPressRequested = shouldRequestAnimatedPressPath(props);
+    const [retainLoadingAnimated, setRetainLoadingAnimated] = React.useState(loadingRequested);
+    React.useEffect(() => {
+        if (loadingRequested) {
+            setRetainLoadingAnimated(true);
+            return undefined;
+        }
+        if (!retainLoadingAnimated)
+            return undefined;
+        const timer = setTimeout(() => {
+            setRetainLoadingAnimated(false);
+        }, ANIMATED_EXIT_RESIDENCY_MS);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [loadingRequested, retainLoadingAnimated]);
+    if (loadingRequested || retainLoadingAnimated) {
+        return (0, jsx_runtime_1.jsx)(ButtonAnimatedWithRef, { ...props, ref: ref });
     }
-    return (0, jsx_runtime_1.jsx)(ButtonAnimatedWithRef, { ...props, ref: ref });
+    return animatedPressRequested ? ((0, jsx_runtime_1.jsx)(ButtonPressAnimatedWithRef, { ...props, ref: ref })) : ((0, jsx_runtime_1.jsx)(ButtonStaticWithRef, { ...props, ref: ref }));
 }
 const ButtonWithRef = React.forwardRef(ButtonImpl);
 ButtonWithRef.displayName = 'Button';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zkit-ui",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/ui/Button/README.md

@@ -154,7 +154,7 @@ export function Demo() {
 }
 ```
 
-渐变依赖 `expo-linear-gradient`，缺失时会使用第一段颜色作为稳定兜底。默认 `pressEffect="auto"` 走普通 `Pressable` 静态路径，并用原生 pressed style 做轻量透明度反馈；只有 `scale`、`scale-opacity`、`highlight`、`scale-highlight` 和 loading 过渡会升级到 Reanimated 动画路径。
+渐变依赖 `expo-linear-gradient`，缺失时会使用第一段颜色作为稳定兜底。默认 `pressEffect="auto"` 走普通 `Pressable` 静态路径，并用原生 pressed style 做轻量透明度反馈；只有 `scale`、`scale-opacity`、`highlight`、`scale-highlight` 和 loading 过渡会升级到 Reanimated 动画路径。动静态切换由 Button 内部自动管理，loading 退出动画结束后才会回到静态路径。
 
 ## 列表高频渲染
 

package/src/ui/Button/index.tsx

@@ -202,6 +202,7 @@ const LOADING_TIMING = {
   easing: Easing.out(Easing.cubic),
   reduceMotion: ReduceMotion.System,
 } as const;
+const ANIMATED_EXIT_RESIDENCY_MS = LOADING_TIMING.duration + 40;
 
 const DISABLED_OPACITY = 0.52;
 const PRESSED_OPACITY = 0.82;
@@ -575,7 +576,7 @@ function resolveVisualColors({
 function resolvePressEffect(effect: ButtonPressEffect, interactionDisabled: boolean): ButtonPressEffect {
   if (interactionDisabled) return 'none';
   if (effect !== 'auto') return effect;
-  return 'scale-opacity';
+  return 'opacity';
 }
 
 function resolvePressEffectFlags(effect: ButtonPressEffect): PressEffectFlags {
@@ -847,18 +848,15 @@ function requiresAnimatedPressEffect(effect: ButtonPressEffect | undefined) {
   );
 }
 
-function shouldUseStaticButtonPath({
+function shouldRequestAnimatedPressPath({
   disabled,
-  loading,
   pressEffect,
 }: {
   disabled?: boolean;
-  loading?: boolean;
   pressEffect?: ButtonPressEffect;
 }) {
-  if (loading) return false;
-  if (disabled) return true;
-  return !requiresAnimatedPressEffect(pressEffect);
+  if (disabled) return false;
+  return requiresAnimatedPressEffect(pressEffect);
 }
 
 function useButtonFrame({
@@ -1243,6 +1241,235 @@ function ButtonStaticImpl(
   );
 }
 
+function ButtonPressAnimatedImpl(
+  {
+    variant = 'solid',
+    tone = 'primary',
+    size = 'md',
+    shape = 'rounded',
+    block = false,
+    disabled = false,
+    loading = false,
+    loadingMode: _loadingMode = 'inline',
+    pressEffect = 'auto',
+    icon,
+    iconPlacement = 'start',
+    iconOnly = false,
+    color,
+    colors,
+    border,
+    layout,
+    gradient,
+    shadow = 'none',
+    children,
+    style,
+    contentStyle,
+    textStyle,
+    accessibilityLabel,
+    accessibilityState,
+    hitSlop,
+    onPress,
+    onPressIn,
+    onPressOut,
+    testID,
+    ...pressableProps
+  }: ButtonProps,
+  ref: React.ForwardedRef<ButtonRef>
+) {
+  const frame = useButtonFrame({
+    accessibilityLabel,
+    block,
+    border,
+    children,
+    color,
+    colors,
+    disabled,
+    gradient,
+    icon,
+    iconOnly,
+    iconPlacement,
+    layout,
+    loading,
+    shadow,
+    shape,
+    size,
+    textStyle,
+    tone,
+    variant,
+  });
+  const {
+    accentColor,
+    borderStyle,
+    contentSizeStyle,
+    defaultHitSlop,
+    gradientCfg,
+    hasGradientBackground,
+    hasIcon,
+    iconBaseBoxStyle,
+    iconPlacedBoxStyle,
+    interactionDisabled,
+    LinearGradientComponent,
+    paddingStyle,
+    radiusStyle,
+    resolvedAccessibilityLabel,
+    resolvedText,
+    rootSizeStyle,
+    shadowStyle,
+    visualColors,
+    visualDisabled,
+    webCursorStyle,
+  } = frame;
+
+  const pressSv = useSharedValue(0);
+  const resolvedPressEffect = React.useMemo(
+    () => resolvePressEffect(pressEffect, interactionDisabled),
+    [interactionDisabled, pressEffect]
+  );
+  const pressEffectFlags = React.useMemo(
+    () => resolvePressEffectFlags(resolvedPressEffect),
+    [resolvedPressEffect]
+  );
+  const pressHighlightEnabled = pressEffectFlags.highlight;
+  const pressOpacityEnabled = pressEffectFlags.opacity;
+  const pressScaleEnabled = pressEffectFlags.scale;
+  const pressOverlay = React.useMemo(
+    () =>
+      resolveOverlay({
+        accentColor,
+        colors,
+        hasGradientBackground,
+        variant,
+      }),
+    [accentColor, colors, hasGradientBackground, variant]
+  );
+
+  React.useEffect(() => {
+    if (interactionDisabled || resolvedPressEffect === 'none') {
+      pressSv.value = 0;
+    }
+  }, [interactionDisabled, pressSv, resolvedPressEffect]);
+
+  const rootAnimatedStyle = useAnimatedStyle(() => {
+    const baseOpacity = visualDisabled ? DISABLED_OPACITY : 1;
+    const scale = pressScaleEnabled
+      ? interpolate(pressSv.value, [0, 1], [1, PRESSED_SCALE])
+      : 1;
+    const opacity = pressOpacityEnabled
+      ? interpolate(pressSv.value, [0, 1], [baseOpacity, PRESSED_OPACITY])
+      : baseOpacity;
+
+    return {
+      opacity,
+      transform: [{ scale }],
+    };
+  }, [pressOpacityEnabled, pressScaleEnabled, visualDisabled]);
+
+  const overlayAnimatedStyle = useAnimatedStyle(() => {
+    const opacity = pressHighlightEnabled
+      ? interpolate(pressSv.value, [0, 1], [0, pressOverlay.strength])
+      : 0;
+    return { opacity };
+  }, [pressHighlightEnabled, pressOverlay.strength]);
+
+  const handlePress = React.useCallback(
+    (event: GestureResponderEvent) => {
+      if (interactionDisabled) return;
+      onPress?.(event);
+    },
+    [interactionDisabled, onPress]
+  );
+
+  const handlePressIn = React.useCallback(
+    (event: GestureResponderEvent) => {
+      if (!interactionDisabled && resolvedPressEffect !== 'none') {
+        pressSv.value = withTiming(1, PRESS_TIMING);
+      }
+      onPressIn?.(event);
+    },
+    [interactionDisabled, onPressIn, pressSv, resolvedPressEffect]
+  );
+
+  const handlePressOut = React.useCallback(
+    (event: GestureResponderEvent) => {
+      if (!interactionDisabled && resolvedPressEffect !== 'none') {
+        pressSv.value = withTiming(0, PRESS_TIMING);
+      }
+      onPressOut?.(event);
+    },
+    [interactionDisabled, onPressOut, pressSv, resolvedPressEffect]
+  );
+
+  return (
+    <AnimatedPressable
+      {...pressableProps}
+      ref={ref}
+      accessibilityLabel={resolvedAccessibilityLabel}
+      accessibilityRole="button"
+      accessibilityState={{
+        ...accessibilityState,
+        busy: Boolean(loading || accessibilityState?.busy),
+        disabled: Boolean(interactionDisabled || accessibilityState?.disabled),
+      }}
+      disabled={interactionDisabled}
+      hitSlop={hitSlop ?? defaultHitSlop}
+      onPress={handlePress}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      style={[styles.root, rootSizeStyle, radiusStyle, shadowStyle, rootAnimatedStyle, webCursorStyle, style]}
+      testID={testID}
+    >
+      <View
+        pointerEvents="none"
+        style={[
+          styles.content,
+          contentSizeStyle,
+          paddingStyle,
+          radiusStyle,
+          borderStyle,
+          { backgroundColor: visualColors.backgroundColor },
+          contentStyle,
+        ]}
+      >
+        {LinearGradientComponent && gradientCfg ? (
+          <LinearGradientComponent
+            pointerEvents="none"
+            colors={gradientCfg.colors}
+            start={gradientCfg.start}
+            end={gradientCfg.end}
+            style={[StyleSheet.absoluteFillObject, radiusStyle]}
+          />
+        ) : null}
+
+        {pressHighlightEnabled ? (
+          <Animated.View
+            pointerEvents="none"
+            style={[
+              StyleSheet.absoluteFillObject,
+              radiusStyle,
+              { backgroundColor: pressOverlay.color },
+              overlayAnimatedStyle,
+            ]}
+          />
+        ) : null}
+
+        {iconOnly ? (
+          (icon ?? resolvedText)
+        ) : (
+          <>
+            {icon && iconPlacement === 'start' ? (
+              <View style={[iconBaseBoxStyle, iconPlacedBoxStyle]}>{icon}</View>
+            ) : null}
+            {resolvedText}
+            {icon && iconPlacement === 'end' ? (
+              <View style={[iconBaseBoxStyle, iconPlacedBoxStyle]}>{icon}</View>
+            ) : null}
+          </>
+        )}
+      </View>
+    </AnimatedPressable>
+  );
+}
+
 function ButtonAnimatedImpl(
   {
     variant = 'solid',
@@ -1340,7 +1567,7 @@ function ButtonAnimatedImpl(
   );
 
   const pressSv = useSharedValue(0);
-  const loadingSv = useSharedValue(loading ? 1 : 0);
+  const loadingSv = useSharedValue(0);
   const [spinnerMounted, setSpinnerMounted] = React.useState(loading);
   const hideSpinnerTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
 
@@ -1628,15 +1855,43 @@ function ButtonAnimatedImpl(
 const ButtonStaticWithRef = React.forwardRef<ButtonRef, ButtonProps>(ButtonStaticImpl);
 ButtonStaticWithRef.displayName = 'ButtonStatic';
 
+const ButtonPressAnimatedWithRef = React.forwardRef<ButtonRef, ButtonProps>(ButtonPressAnimatedImpl);
+ButtonPressAnimatedWithRef.displayName = 'ButtonPressAnimated';
+
 const ButtonAnimatedWithRef = React.forwardRef<ButtonRef, ButtonProps>(ButtonAnimatedImpl);
-ButtonAnimatedWithRef.displayName = 'ButtonAnimated';
+ButtonAnimatedWithRef.displayName = 'ButtonLoadingAnimated';
 
 function ButtonImpl(props: ButtonProps, ref: React.ForwardedRef<ButtonRef>) {
-  if (shouldUseStaticButtonPath(props)) {
-    return <ButtonStaticWithRef {...props} ref={ref} />;
+  const loadingRequested = Boolean(props.loading);
+  const animatedPressRequested = shouldRequestAnimatedPressPath(props);
+  const [retainLoadingAnimated, setRetainLoadingAnimated] = React.useState(loadingRequested);
+
+  React.useEffect(() => {
+    if (loadingRequested) {
+      setRetainLoadingAnimated(true);
+      return undefined;
+    }
+
+    if (!retainLoadingAnimated) return undefined;
+
+    const timer = setTimeout(() => {
+      setRetainLoadingAnimated(false);
+    }, ANIMATED_EXIT_RESIDENCY_MS);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [loadingRequested, retainLoadingAnimated]);
+
+  if (loadingRequested || retainLoadingAnimated) {
+    return <ButtonAnimatedWithRef {...props} ref={ref} />;
   }
 
-  return <ButtonAnimatedWithRef {...props} ref={ref} />;
+  return animatedPressRequested ? (
+    <ButtonPressAnimatedWithRef {...props} ref={ref} />
+  ) : (
+    <ButtonStaticWithRef {...props} ref={ref} />
+  );
 }
 
 const ButtonWithRef = React.forwardRef<ButtonRef, ButtonProps>(ButtonImpl);