fix(threads): surface isLoading=true while waiting for first context dispatch

CR feedback: with the /info gating in useThreads, the underlying
thread store sits at isLoading=false (its initial state) until we
dispatch the first context — which we now defer until
runtimeConnectionStatus === Connected. Consumers reading
`isLoading` during that window would otherwise see the empty-state
branch and render a momentary "no threads" flash instead of a
skeleton.

Track `hasDispatchedContext` in React state; synthesize
isLoading=true while runtimeUrl is set but no context has been
dispatched yet. Once we dispatch, fall through to the store's own
loading flag (which flips true in the contextChanged reducer, then
false after the fetch settles).

Tests:
- use-threads: extend the Connected-gate test to assert
  isLoading=true before Connected, false after the fetch lands.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: BenTaylorDev

packages/react-core/src/v2/hooks/__tests__/use-threads.test.tsx

@@ -507,12 +507,19 @@ describe("useThreads", () => {
       )
       .mockReturnValueOnce(jsonResponse({ joinToken: "jt-1" }));
 
-    const { rerender } = renderHook(() => useThreads(defaultInput));
+    const { result, rerender } = renderHook(() => useThreads(defaultInput));
 
     // Give effects a tick to settle; no fetch should occur while Connecting.
     await new Promise((resolve) => setTimeout(resolve, 20));
     expect(fetchMock).not.toHaveBeenCalled();
 
+    // While waiting for Connected, the hook must surface isLoading=true so
+    // consumers don't render an empty-state flash before the first fetch
+    // is even dispatched. The store's own isLoading is false at this
+    // point (no contextChanged action yet), so the hook synthesizes it.
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.threads).toEqual([]);
+
     // Flip to Connected with wsUrl populated, re-render. The effect now
     // dispatches exactly one list fetch (+ one subscribe after it lands).
     mockUseCopilotKit.mockReturnValue({
@@ -539,5 +546,10 @@ describe("useThreads", () => {
       ([url]) => typeof url === "string" && /\/threads\?agentId=/.test(url),
     );
     expect(listCalls).toHaveLength(1);
+
+    // After the fetch settles, isLoading returns to false.
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
   });
 });

packages/react-core/src/v2/hooks/use-threads.tsx

@@ -220,7 +220,20 @@ export function useThreads({
 
     return new Error("Runtime URL is not configured");
   }, [copilotkit.runtimeUrl]);
-  const isLoading = runtimeError ? false : storeIsLoading;
+
+  // Tracks whether we've dispatched the first real context to the store.
+  // The store itself starts with `isLoading: false`, so before we dispatch
+  // consumers would otherwise see an empty, non-loading state (empty-list
+  // flash). While runtimeUrl is set and we haven't dispatched yet, we
+  // synthesize `isLoading: true` so the UI keeps its loading indicator until
+  // the first fetch is in flight (at which point the store's own
+  // isLoading takes over).
+  const [hasDispatchedContext, setHasDispatchedContext] = useState(false);
+  const preConnectLoading = !!copilotkit.runtimeUrl && !hasDispatchedContext;
+
+  const isLoading = runtimeError
+    ? false
+    : preConnectLoading || storeIsLoading;
   const error = runtimeError ?? storeError;
 
   useEffect(() => {
@@ -264,6 +277,7 @@ export function useThreads({
     };
 
     store.setContext(context);
+    setHasDispatchedContext(true);
   }, [
     store,
     copilotkit.runtimeUrl,