@athenaintel/react 0.4.4 → 0.4.5

package/dist/index.cjs

@@ -24317,16 +24317,21 @@ function ThreadStateLoader({
   token,
   ...runtimeProps
 }) {
-  const [initialMessages, setInitialMessages] = React.useState(void 0);
-  const [isLoading, setIsLoading] = React.useState(!!threadId);
+  const [loadedMessages, setLoadedMessages] = React.useState(void 0);
+  const [loadState, setLoadState] = React.useState(threadId ? "loading" : "done");
+  const [showSpinner, setShowSpinner] = React.useState(false);
   React.useEffect(() => {
     if (!threadId) {
-      setInitialMessages(void 0);
-      setIsLoading(false);
+      setLoadedMessages(void 0);
+      setLoadState("done");
       return;
     }
     let cancelled = false;
-    setIsLoading(true);
+    setLoadState("loading");
+    setShowSpinner(false);
+    const spinnerTimer = setTimeout(() => {
+      if (!cancelled) setShowSpinner(true);
+    }, 200);
     getThreadState(backendUrl, { apiKey, token }, threadId).then((state) => {
       var _a2;
       if (cancelled) return;
@@ -24336,25 +24341,57 @@ function ThreadStateLoader({
           messageCount: ((_a2 = state.messages) == null ? void 0 : _a2.length) ?? 0
         });
       }
-      setInitialMessages(state.messages ?? []);
-      setIsLoading(false);
+      setLoadedMessages(state.messages ?? []);
+      setLoadState("done");
     }).catch((err) => {
       if (cancelled) return;
       if (process.env.NODE_ENV !== "production") {
         console.warn("[AthenaThreads] Failed to load thread state, starting fresh", err);
       }
-      setInitialMessages(void 0);
-      setIsLoading(false);
+      setLoadedMessages(void 0);
+      setLoadState("done");
     });
     return () => {
       cancelled = true;
+      clearTimeout(spinnerTimer);
     };
   }, [threadId, backendUrl, apiKey, token]);
-  if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", height: "100%", width: "100%" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 24, height: 24, border: "2px solid currentColor", borderTopColor: "transparent", borderRadius: "50%", animation: "spin 0.6s linear infinite", opacity: 0.4 } }),
-      /* @__PURE__ */ jsxRuntime.jsx("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
-    ] });
+  if (loadState === "loading") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
+          width: "100%",
+          background: "var(--background, #fff)",
+          color: "var(--muted-foreground, #888)",
+          gap: 8,
+          opacity: showSpinner ? 1 : 0,
+          transition: "opacity 0.15s ease-in"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                width: 20,
+                height: 20,
+                border: "2px solid var(--border, #e5e5e5)",
+                borderTopColor: "var(--primary, #2563eb)",
+                borderRadius: "50%",
+                animation: "aui-spin 0.6s linear infinite"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 13 }, children: "Loading conversation…" }),
+          /* @__PURE__ */ jsxRuntime.jsx("style", { children: `@keyframes aui-spin { to { transform: rotate(360deg); } }` })
+        ]
+      }
+    );
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
     AthenaRuntimeInner,
@@ -24363,7 +24400,7 @@ function ThreadStateLoader({
       backendUrl,
       apiKey,
       token,
-      initialMessages,
+      initialMessages: loadedMessages,
       ...runtimeProps,
       children
     }