@blocklet/payment-react/es/components/loading-amount.js

Reusable react components for payment kit v2

import { jsx } from "react/jsx-runtime";
import { Skeleton, Typography } from "@mui/material";
import { useEffect, useRef, useState } from "react";
export default function LoadingAmount({
  value,
  loading = false,
  skeletonWidth = 80,
  height = 24,
  sx = {},
  animateValueChange = false,
  transitionDuration = 300
}) {
  const [displayValue, setDisplayValue] = useState(value);
  const [isTransitioning, setIsTransitioning] = useState(false);
  const prevValueRef = useRef(value);
  useEffect(() => {
    if (value !== prevValueRef.current) {
      prevValueRef.current = value;
      if (animateValueChange && !loading) {
        setIsTransitioning(true);
        const timer = setTimeout(() => {
          setDisplayValue(value);
          setIsTransitioning(false);
        }, transitionDuration / 2);
        return () => clearTimeout(timer);
      }
      setDisplayValue(value);
    }
    return void 0;
  }, [value, loading, animateValueChange, transitionDuration]);
  if (loading) {
    return /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: skeletonWidth, height });
  }
  return /* @__PURE__ */ jsx(
    Typography,
    {
      component: "span",
      sx: {
        ...sx,
        opacity: isTransitioning ? 0 : 1,
        transition: animateValueChange ? `opacity ${transitionDuration / 2}ms ease-in-out` : void 0
      },
      children: displayValue
    }
  );
}