not-a-spinner 0.1.1 → 0.2.0

package/dist/index.cjs

@@ -316,10 +316,15 @@ function useTextRotation({
     if (!initializedRef.current) {
       poolRef.current = shufflePhrases(inputPhrases);
       initializedRef.current = true;
-      setCurrentIndex(0);
+      setCycleId((c) => c + 1);
     }
   }, []);
+  const inputChangedRef = (0, import_react.useRef)(false);
   (0, import_react.useEffect)(() => {
+    if (!inputChangedRef.current) {
+      inputChangedRef.current = true;
+      return;
+    }
     poolRef.current = shufflePhrases(inputPhrases);
     setCurrentIndex(0);
   }, [inputPhrases]);
@@ -470,16 +475,16 @@ var NotASpinner = React.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         ref,
         className: cn(notASpinnerVariants({ size, animation }), className),
         ...props,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "nas-text-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: getAnimationClass(), children: currentPhrase }) }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: getAnimationClass(), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: currentPhrase }),
           dots && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "nas-dots", children: "..." })
-        ]
+        ] })
       }
     );
   }
@@ -487,49 +492,66 @@ var NotASpinner = React.forwardRef(
 NotASpinner.displayName = "NotASpinner";
 var TypewriterRenderer = React.forwardRef(({ className, currentPhrase, cycleId, interval, dots, onEraseComplete, ...props }, ref) => {
   const [displayedChars, setDisplayedChars] = React.useState(0);
+  const [displayedDots, setDisplayedDots] = React.useState(0);
   const [phase, setPhase] = React.useState(
     "typing"
   );
   const phraseRef = React.useRef(currentPhrase);
+  const eraseCalledRef = React.useRef(false);
   React.useEffect(() => {
     phraseRef.current = currentPhrase;
     setDisplayedChars(0);
+    setDisplayedDots(0);
     setPhase("typing");
+    eraseCalledRef.current = false;
   }, [cycleId]);
   React.useEffect(() => {
     const totalChars = phraseRef.current.length;
     if (totalChars === 0) return;
     const typingSpeed = 50;
     const erasingSpeed = 30;
+    const dotsTypingDuration = 3 * typingSpeed;
+    const dotsDismissDuration = 3 * erasingSpeed;
     const typingDuration = totalChars * typingSpeed;
     const erasingDuration = totalChars * erasingSpeed;
-    const holdDuration = Math.max(interval - typingDuration - erasingDuration, 500);
+    const holdDuration = Math.max(interval - typingDuration - dotsTypingDuration - dotsDismissDuration - erasingDuration, 500);
     let timer;
     if (phase === "typing") {
       if (displayedChars < totalChars) {
         timer = setTimeout(() => setDisplayedChars((c) => c + 1), typingSpeed);
+      } else {
+        timer = setTimeout(() => setPhase("typing-dots"), 0);
+      }
+    } else if (phase === "typing-dots") {
+      if (displayedDots < 3) {
+        timer = setTimeout(() => setDisplayedDots((d) => d + 1), typingSpeed);
       } else {
         timer = setTimeout(() => setPhase("holding"), 0);
       }
     } else if (phase === "holding") {
-      timer = setTimeout(() => setPhase("erasing"), holdDuration);
+      timer = setTimeout(() => setPhase("erasing-dots"), holdDuration);
+    } else if (phase === "erasing-dots") {
+      if (displayedDots > 0) {
+        timer = setTimeout(() => setDisplayedDots((d) => d - 1), erasingSpeed);
+      } else {
+        timer = setTimeout(() => setPhase("erasing"), 0);
+      }
     } else if (phase === "erasing") {
       if (displayedChars > 0) {
         timer = setTimeout(() => setDisplayedChars((c) => c - 1), erasingSpeed);
-      } else {
+      } else if (!eraseCalledRef.current) {
+        eraseCalledRef.current = true;
         onEraseComplete();
       }
     }
     return () => clearTimeout(timer);
-  }, [phase, displayedChars, interval, onEraseComplete]);
+  }, [phase, displayedChars, displayedDots, interval, onEraseComplete]);
   const displayedText = phraseRef.current.slice(0, displayedChars);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, className, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "nas-text-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
-      displayedText,
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "nas-cursor" })
-    ] }) }),
-    dots && displayedChars > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "nas-dots", children: "..." })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "nas-text-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+    displayedText,
+    dots && displayedChars > 0 && displayedDots > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "nas-dots", children: "...".slice(0, displayedDots) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "nas-cursor" })
+  ] }) }) });
 });
 TypewriterRenderer.displayName = "TypewriterRenderer";
 

package/dist/index.mjs

@@ -272,10 +272,15 @@ function useTextRotation({
     if (!initializedRef.current) {
       poolRef.current = shufflePhrases(inputPhrases);
       initializedRef.current = true;
-      setCurrentIndex(0);
+      setCycleId((c) => c + 1);
     }
   }, []);
+  const inputChangedRef = useRef(false);
   useEffect(() => {
+    if (!inputChangedRef.current) {
+      inputChangedRef.current = true;
+      return;
+    }
     poolRef.current = shufflePhrases(inputPhrases);
     setCurrentIndex(0);
   }, [inputPhrases]);
@@ -426,16 +431,16 @@ var NotASpinner = React.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         className: cn(notASpinnerVariants({ size, animation }), className),
         ...props,
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "nas-text-wrapper", children: /* @__PURE__ */ jsx("span", { className: getAnimationClass(), children: currentPhrase }) }),
+        children: /* @__PURE__ */ jsxs("span", { className: getAnimationClass(), children: [
+          /* @__PURE__ */ jsx("span", { children: currentPhrase }),
           dots && /* @__PURE__ */ jsx("span", { className: "nas-dots", children: "..." })
-        ]
+        ] })
       }
     );
   }
@@ -443,49 +448,66 @@ var NotASpinner = React.forwardRef(
 NotASpinner.displayName = "NotASpinner";
 var TypewriterRenderer = React.forwardRef(({ className, currentPhrase, cycleId, interval, dots, onEraseComplete, ...props }, ref) => {
   const [displayedChars, setDisplayedChars] = React.useState(0);
+  const [displayedDots, setDisplayedDots] = React.useState(0);
   const [phase, setPhase] = React.useState(
     "typing"
   );
   const phraseRef = React.useRef(currentPhrase);
+  const eraseCalledRef = React.useRef(false);
   React.useEffect(() => {
     phraseRef.current = currentPhrase;
     setDisplayedChars(0);
+    setDisplayedDots(0);
     setPhase("typing");
+    eraseCalledRef.current = false;
   }, [cycleId]);
   React.useEffect(() => {
     const totalChars = phraseRef.current.length;
     if (totalChars === 0) return;
     const typingSpeed = 50;
     const erasingSpeed = 30;
+    const dotsTypingDuration = 3 * typingSpeed;
+    const dotsDismissDuration = 3 * erasingSpeed;
     const typingDuration = totalChars * typingSpeed;
     const erasingDuration = totalChars * erasingSpeed;
-    const holdDuration = Math.max(interval - typingDuration - erasingDuration, 500);
+    const holdDuration = Math.max(interval - typingDuration - dotsTypingDuration - dotsDismissDuration - erasingDuration, 500);
     let timer;
     if (phase === "typing") {
       if (displayedChars < totalChars) {
         timer = setTimeout(() => setDisplayedChars((c) => c + 1), typingSpeed);
+      } else {
+        timer = setTimeout(() => setPhase("typing-dots"), 0);
+      }
+    } else if (phase === "typing-dots") {
+      if (displayedDots < 3) {
+        timer = setTimeout(() => setDisplayedDots((d) => d + 1), typingSpeed);
       } else {
         timer = setTimeout(() => setPhase("holding"), 0);
       }
     } else if (phase === "holding") {
-      timer = setTimeout(() => setPhase("erasing"), holdDuration);
+      timer = setTimeout(() => setPhase("erasing-dots"), holdDuration);
+    } else if (phase === "erasing-dots") {
+      if (displayedDots > 0) {
+        timer = setTimeout(() => setDisplayedDots((d) => d - 1), erasingSpeed);
+      } else {
+        timer = setTimeout(() => setPhase("erasing"), 0);
+      }
     } else if (phase === "erasing") {
       if (displayedChars > 0) {
         timer = setTimeout(() => setDisplayedChars((c) => c - 1), erasingSpeed);
-      } else {
+      } else if (!eraseCalledRef.current) {
+        eraseCalledRef.current = true;
         onEraseComplete();
       }
     }
     return () => clearTimeout(timer);
-  }, [phase, displayedChars, interval, onEraseComplete]);
+  }, [phase, displayedChars, displayedDots, interval, onEraseComplete]);
   const displayedText = phraseRef.current.slice(0, displayedChars);
-  return /* @__PURE__ */ jsxs("div", { ref, className, ...props, children: [
-    /* @__PURE__ */ jsx("div", { className: "nas-text-wrapper", children: /* @__PURE__ */ jsxs("span", { children: [
-      displayedText,
-      /* @__PURE__ */ jsx("span", { className: "nas-cursor" })
-    ] }) }),
-    dots && displayedChars > 0 && /* @__PURE__ */ jsx("span", { className: "nas-dots", children: "..." })
-  ] });
+  return /* @__PURE__ */ jsx("div", { ref, className, ...props, children: /* @__PURE__ */ jsx("div", { className: "nas-text-wrapper", children: /* @__PURE__ */ jsxs("span", { children: [
+    displayedText,
+    dots && displayedChars > 0 && displayedDots > 0 && /* @__PURE__ */ jsx("span", { className: "nas-dots", children: "...".slice(0, displayedDots) }),
+    /* @__PURE__ */ jsx("span", { className: "nas-cursor" })
+  ] }) }) });
 });
 TypewriterRenderer.displayName = "TypewriterRenderer";
 

package/dist/styles.css

@@ -79,12 +79,6 @@
 /* Dots */
 .nas-dots {
   margin-left: 2px;
-  animation: nas-pulse 1.5s ease-in-out infinite;
-}
-
-@keyframes nas-pulse {
-  0%, 100% { opacity: 0.4; }
-  50% { opacity: 1; }
 }
 
 /* Reduced motion */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "not-a-spinner",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Because modern AI doesn't spin, it thinks. Replace loading spinners with AI-style rotating thinking phrases.",
   "type": "module",
   "main": "./dist/index.cjs",