feat: implement global loading indicators and refactor activity feed tests

frontend/src/app/layout.tsx

@@ -7,6 +7,7 @@ import { DM_Serif_Display, IBM_Plex_Sans, Sora } from "next/font/google";
 
 import { AuthProvider } from "@/components/providers/AuthProvider";
 import { QueryProvider } from "@/components/providers/QueryProvider";
+import { GlobalLoader } from "@/components/ui/global-loader";
 
 export const metadata: Metadata = {
   title: "OpenClaw Mission Control",
@@ -41,7 +42,10 @@ export default function RootLayout({ children }: { children: ReactNode }) {
         className={`${bodyFont.variable} ${headingFont.variable} ${displayFont.variable} min-h-screen bg-app text-strong antialiased`}
       >
         <AuthProvider>
-          <QueryProvider>{children}</QueryProvider>
+          <QueryProvider>
+            <GlobalLoader />
+            {children}
+          </QueryProvider>
         </AuthProvider>
       </body>
     </html>

frontend/src/app/loading.tsx

@@ -0,0 +1,13 @@
+export default function Loading() {
+  return (
+    <div
+      data-cy="route-loader"
+      className="flex min-h-screen items-center justify-center bg-app px-6"
+    >
+      <div className="flex flex-col items-center gap-3">
+        <div className="h-10 w-10 animate-spin rounded-full border-2 border-slate-200 border-t-[var(--accent)]" />
+        <p className="text-sm text-slate-500">Loading mission control...</p>
+      </div>
+    </div>
+  );
+}

frontend/src/components/ui/global-loader.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useIsFetching, useIsMutating } from "@tanstack/react-query";
+
+export function GlobalLoader() {
+  const fetchingCount = useIsFetching({
+    predicate: (query) =>
+      query.state.fetchStatus === "fetching" && query.state.data === undefined,
+  });
+  const mutatingCount = useIsMutating();
+  const visible = fetchingCount + mutatingCount > 0;
+
+  return (
+    <div
+      data-cy="global-loader"
+      className={`pointer-events-none fixed inset-x-0 top-0 z-[120] h-1 transition-opacity duration-200 ${
+        visible ? "opacity-100" : "opacity-0"
+      }`}
+      aria-hidden={!visible}
+      data-state={visible ? "visible" : "hidden"}
+      role="status"
+    >
+      <div className="h-full w-full overflow-hidden bg-[var(--accent-soft)]">
+        <div className="h-full w-full animate-progress-shimmer bg-[linear-gradient(90deg,transparent_0%,var(--accent)_50%,transparent_100%)]" />
+      </div>
+      <span className="sr-only">Loading</span>
+    </div>
+  );
+}