@kittycad/react-shared 1.2.0 → 1.2.1

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import * as b$2 from 'react';
-import b__default, { forwardRef, useImperativeHandle, useEffect, createElement as createElement$1, createContext, Children, useRef, useState, useCallback, useMemo, useContext, useLayoutEffect, cloneElement } from 'react';
+import b__default, { useImperativeHandle, useEffect, createElement as createElement$1, Children, forwardRef, useRef, useState, useCallback, useMemo, createContext, useContext, useLayoutEffect, cloneElement } from 'react';
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -22358,7 +22358,7 @@ function SignInPageContent({ shouldTrackConversions = false, trackingClasses = (
 }
 
 const Spinner = (props) => {
-    return (jsxs("svg", { "data-testid": "spinner", viewBox: "0 0 10 10", className: 'w-8 h-8', ...props, children: [jsx("title", { children: "spinner" }), jsx("circle", { cx: "5", cy: "5", r: "4", stroke: "currentColor", fill: "none", strokeDasharray: "4, 4", className: "animate-spin origin-center" })] }));
+    return (jsxs("svg", { "data-testid": "spinner", viewBox: "0 0 10 10", className: "w-8 h-8", ...props, children: [jsx("title", { children: "spinner" }), 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
@@ -22381,8 +22381,8 @@ const TotalDue = (props) => (jsxs("div", { className: `${Number(props.amount) >
             }, children: [jsx("span", { children: "$" }), jsx("span", { children: props.amount })] })] }));
 const ErrorMsg = (props) => {
     const [showMessage, setShowMessage] = 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,
@@ -22407,7 +22407,17 @@ const getBalanceString = (amount) => {
     return `${Math.floor(amount)} min`;
 };
 const BillingBalance = (props) => {
-    return props.amount === Number.POSITIVE_INFINITY ? (jsx(CustomIcon, { "data-testid": "infinity", name: "infinity", className: "w-5 h-5" })) : Number.isNaN(props.amount) || props.amount === undefined ? (jsx(Spinner, { className: "text-inherit w-4 h-4" })) : (jsx("span", { children: getBalanceString(props.amount) }));
+    const [showSpinner, setShowSpinner] = useState(true);
+    useEffect(() => {
+        const id = setTimeout(() => {
+            setShowSpinner(false);
+        }, 5000);
+        return () => {
+            clearTimeout(id);
+        };
+    }, []);
+    return props.amount === Number.POSITIVE_INFINITY ? (jsx(CustomIcon, { "data-testid": "infinity", name: "infinity", className: "w-5 h-5" })) : showSpinner &&
+        (Number.isNaN(props.amount) || props.amount === undefined) ? (jsx(Spinner, { className: "text-inherit w-4 h-4" })) : (jsx("span", { children: getBalanceString(props.amount) }));
 };
 const BillingRemaining = (props) => {
     const isFlex = props.mode === BillingRemainingMode.ProgressBarStretch;
@@ -22421,10 +22431,19 @@ const BillingRemaining = (props) => {
     ];
     const hasPaymentMethod = props.paymentMethods !== undefined && props.paymentMethods.length > 0;
     const totalDue = props.userPaymentBalance?.total_due ?? '0.00';
+    const [showSpinner, setShowSpinner] = useState(true);
+    useEffect(() => {
+        const id = setTimeout(() => {
+            setShowSpinner(false);
+        }, 5000);
+        return () => {
+            clearTimeout(id);
+        };
+    }, []);
     return (jsxs("div", { "data-testid": "billing-remaining", className: [isFlex ? 'flex flex-col gap-1' : 'px-2 flex items-stretch']
             .concat(cssWrapper)
             .join(' '), children: [jsxs("div", { className: "flex flex-row gap-2 items-center justify-center", children: [props.error && jsx(ErrorMsg, { error: props.error }), jsxs("div", { className: `w-full flex flex-col ${isFlex ? '' : 'items-center'}`, children: [!isFlex &&
-                                (typeof props.balance === 'number' ? (jsx("div", { className: "font-mono px-1", "data-testid": "billing-balance", children: jsx(BillingBalance, { amount: props.balance }) })) : (jsx(Spinner, { className: "text-inherit w-4 h-4" }))), props.balance !== Number.POSITIVE_INFINITY && (jsx("div", { className: [isFlex ? 'flex-grow' : 'min-w-10 w-full'].join(' '), children: jsx(ProgressBar, { max: props.allowance ?? 1, value: props.balance ?? 0 }) }))] }), !isFlex && (hasPaymentMethod || Number(totalDue.toString()) > 0) && (jsx(TotalDue, { amount: totalDue.toString() }))] }), isFlex && (jsx("div", { className: "flex flex-row gap-1 text-chalkboard-90", children: typeof props.balance === 'number' ? (props.balance !== Number.POSITIVE_INFINITY ? (jsxs(Fragment, { children: [getBalanceString(props.balance), " of Zookeeper reasoning time remaining this month"] })) : null) : (jsxs(Fragment, { children: [jsx(Spinner, { className: "text-inherit w-4 h-4" }), ' ', jsx("span", { children: "Fetching remaining balance..." })] })) }))] }));
+                                (typeof props.balance === 'number' ? (jsx("div", { className: "font-mono px-1", "data-testid": "billing-balance", children: jsx(BillingBalance, { amount: props.balance }) })) : (showSpinner && jsx(Spinner, { className: "text-inherit w-4 h-4" }))), props.balance !== Number.POSITIVE_INFINITY && (jsx("div", { className: [isFlex ? 'flex-grow' : 'min-w-10 w-full'].join(' '), children: jsx(ProgressBar, { max: props.allowance ?? 1, value: props.balance ?? 0 }) }))] }), !isFlex && (hasPaymentMethod || Number(totalDue.toString()) > 0) && (jsx(TotalDue, { amount: totalDue.toString() }))] }), isFlex && (jsx("div", { className: "flex flex-row gap-1 text-chalkboard-90", children: typeof props.balance === 'number' ? (props.balance !== Number.POSITIVE_INFINITY ? (jsxs(Fragment, { children: [getBalanceString(props.balance), " of Zookeeper reasoning time remaining this month"] })) : null) : (jsxs(Fragment, { children: [showSpinner && jsx(Spinner, { className: "text-inherit w-4 h-4" }), ' ', jsx("span", { children: "Fetching remaining balance..." })] })) }))] }));
 };
 
 const SITE = 'https://zoo.dev';