@kittycad/react-shared 1.2.0 → 1.2.1

package/dist/index.js

@@ -22378,7 +22378,7 @@ function SignInPageContent({ shouldTrackConversions = false, trackingClasses = (
 }
 
 const Spinner = (props) => {
-    return (jsxRuntime.jsxs("svg", { "data-testid": "spinner", viewBox: "0 0 10 10", className: 'w-8 h-8', ...props, children: [jsxRuntime.jsx("title", { children: "spinner" }), jsxRuntime.jsx("circle", { cx: "5", cy: "5", r: "4", stroke: "currentColor", fill: "none", strokeDasharray: "4, 4", className: "animate-spin origin-center" })] }));
+    return (jsxRuntime.jsxs("svg", { "data-testid": "spinner", viewBox: "0 0 10 10", className: "w-8 h-8", ...props, children: [jsxRuntime.jsx("title", { children: "spinner" }), jsxRuntime.jsx("circle", { cx: "5", cy: "5", r: "4", stroke: "currentColor", fill: "none", strokeDasharray: "4, 4", className: "animate-spin origin-center" })] }));
 };
 
 // TODO: figure out where this should live v. modeling-app, for now this is only a subset
@@ -22401,8 +22401,8 @@ const TotalDue = (props) => (jsxRuntime.jsxs("div", { className: `${Number(props
             }, children: [jsxRuntime.jsx("span", { children: "$" }), jsxRuntime.jsx("span", { children: props.amount })] })] }));
 const ErrorMsg = (props) => {
     const [showMessage, setShowMessage] = b$2.useState(false);
-    const fadedBg = 'rgba(127, 127, 127, 1)';
-    const fadedFg = 'rgba(255, 255, 255, 1)';
+    const fadedBg = 'rgba(0, 0, 0, 0.25)';
+    const fadedFg = 'rgba(255, 255, 255, 0.75)';
     const colors = {
         color: fadedFg,
         stroke: fadedFg,
@@ -22427,7 +22427,17 @@ const getBalanceString = (amount) => {
     return `${Math.floor(amount)} min`;
 };
 const BillingBalance = (props) => {
-    return props.amount === Number.POSITIVE_INFINITY ? (jsxRuntime.jsx(CustomIcon, { "data-testid": "infinity", name: "infinity", className: "w-5 h-5" })) : Number.isNaN(props.amount) || props.amount === undefined ? (jsxRuntime.jsx(Spinner, { className: "text-inherit w-4 h-4" })) : (jsxRuntime.jsx("span", { children: getBalanceString(props.amount) }));
+    const [showSpinner, setShowSpinner] = b$2.useState(true);
+    b$2.useEffect(() => {
+        const id = setTimeout(() => {
+            setShowSpinner(false);
+        }, 5000);
+        return () => {
+            clearTimeout(id);
+        };
+    }, []);
+    return props.amount === Number.POSITIVE_INFINITY ? (jsxRuntime.jsx(CustomIcon, { "data-testid": "infinity", name: "infinity", className: "w-5 h-5" })) : showSpinner &&
+        (Number.isNaN(props.amount) || props.amount === undefined) ? (jsxRuntime.jsx(Spinner, { className: "text-inherit w-4 h-4" })) : (jsxRuntime.jsx("span", { children: getBalanceString(props.amount) }));
 };
 const BillingRemaining = (props) => {
     const isFlex = props.mode === exports.BillingRemainingMode.ProgressBarStretch;
@@ -22441,10 +22451,19 @@ const BillingRemaining = (props) => {
     ];
     const hasPaymentMethod = props.paymentMethods !== undefined && props.paymentMethods.length > 0;
     const totalDue = props.userPaymentBalance?.total_due ?? '0.00';
+    const [showSpinner, setShowSpinner] = b$2.useState(true);
+    b$2.useEffect(() => {
+        const id = setTimeout(() => {
+            setShowSpinner(false);
+        }, 5000);
+        return () => {
+            clearTimeout(id);
+        };
+    }, []);
     return (jsxRuntime.jsxs("div", { "data-testid": "billing-remaining", className: [isFlex ? 'flex flex-col gap-1' : 'px-2 flex items-stretch']
             .concat(cssWrapper)
             .join(' '), children: [jsxRuntime.jsxs("div", { className: "flex flex-row gap-2 items-center justify-center", children: [props.error && jsxRuntime.jsx(ErrorMsg, { error: props.error }), jsxRuntime.jsxs("div", { className: `w-full flex flex-col ${isFlex ? '' : 'items-center'}`, children: [!isFlex &&
-                                (typeof props.balance === 'number' ? (jsxRuntime.jsx("div", { className: "font-mono px-1", "data-testid": "billing-balance", children: jsxRuntime.jsx(BillingBalance, { amount: props.balance }) })) : (jsxRuntime.jsx(Spinner, { className: "text-inherit w-4 h-4" }))), props.balance !== Number.POSITIVE_INFINITY && (jsxRuntime.jsx("div", { className: [isFlex ? 'flex-grow' : 'min-w-10 w-full'].join(' '), children: jsxRuntime.jsx(ProgressBar, { max: props.allowance ?? 1, value: props.balance ?? 0 }) }))] }), !isFlex && (hasPaymentMethod || Number(totalDue.toString()) > 0) && (jsxRuntime.jsx(TotalDue, { amount: totalDue.toString() }))] }), isFlex && (jsxRuntime.jsx("div", { className: "flex flex-row gap-1 text-chalkboard-90", children: typeof props.balance === 'number' ? (props.balance !== Number.POSITIVE_INFINITY ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [getBalanceString(props.balance), " of Zookeeper reasoning time remaining this month"] })) : null) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spinner, { className: "text-inherit w-4 h-4" }), ' ', jsxRuntime.jsx("span", { children: "Fetching remaining balance..." })] })) }))] }));
+                                (typeof props.balance === 'number' ? (jsxRuntime.jsx("div", { className: "font-mono px-1", "data-testid": "billing-balance", children: jsxRuntime.jsx(BillingBalance, { amount: props.balance }) })) : (showSpinner && jsxRuntime.jsx(Spinner, { className: "text-inherit w-4 h-4" }))), props.balance !== Number.POSITIVE_INFINITY && (jsxRuntime.jsx("div", { className: [isFlex ? 'flex-grow' : 'min-w-10 w-full'].join(' '), children: jsxRuntime.jsx(ProgressBar, { max: props.allowance ?? 1, value: props.balance ?? 0 }) }))] }), !isFlex && (hasPaymentMethod || Number(totalDue.toString()) > 0) && (jsxRuntime.jsx(TotalDue, { amount: totalDue.toString() }))] }), isFlex && (jsxRuntime.jsx("div", { className: "flex flex-row gap-1 text-chalkboard-90", children: typeof props.balance === 'number' ? (props.balance !== Number.POSITIVE_INFINITY ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [getBalanceString(props.balance), " of Zookeeper reasoning time remaining this month"] })) : null) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showSpinner && jsxRuntime.jsx(Spinner, { className: "text-inherit w-4 h-4" }), ' ', jsxRuntime.jsx("span", { children: "Fetching remaining balance..." })] })) }))] }));
 };
 
 const SITE = 'https://zoo.dev';