feat: add a text spinner widget to the price preview component

Author: aradzie

package-lock.json

@@ -1,3 +1,4 @@
+import { Tasks } from "@keybr/lang";
 import { paddlePriceId } from "@keybr/thirdparties";
 import { Para } from "@keybr/widget";
 import { type PricePreviewResponse } from "@paddle/paddle-js";
@@ -31,6 +32,26 @@ export function AccountPricePreview() {
   }, [paddle]);
   const [item = null] = preview?.data?.details?.lineItems ?? [];
   return (
-    <Para>Premium account price: {item?.formattedTotals?.total ?? "..."}</Para>
+    <Para>
+      Premium account price: {item?.formattedTotals?.total ?? <Spinner />}
+    </Para>
   );
 }
+
+function Spinner() {
+  const [size, setSize] = useState(3);
+  useEffect(() => {
+    const tasks = new Tasks();
+    tasks.delayed(100, () => {
+      if (size >= 3) {
+        setSize(0);
+      } else {
+        setSize(size + 1);
+      }
+    });
+    return () => {
+      tasks.cancelAll();
+    };
+  }, [size]);
+  return <span>{"".padStart(size, ".")}</span>;
+}

packages/page-account/lib/AccountPricePreview.tsx

@@ -8,6 +8,7 @@
   "dependencies": {
     "@keybr/debug": "*",
     "@keybr/intl": "*",
+    "@keybr/lang": "*",
     "@keybr/pages-shared": "*",
     "@keybr/request": "*",
     "@keybr/thirdparties": "*",