From cf6ff3852869f05c829538fcac7a8e920093b813 Mon Sep 17 00:00:00 2001
From: Rodrigo Alves da Silva Matos <rmatos@CLICKBUS0673.clickbus.local>
Date: Thu, 13 Aug 2026 16:19:48 -0300
Subject: [PATCH] feat(platform): add loading states for every tenant route +
 fix the window filter
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Every page under [tenant]/ is an async Server Component doing direct
Supabase/session fetches with zero Suspense boundary and zero
loading.tsx — clicking a nav link, a repo row, or a settings tab just
sat there frozen until the new RSC payload streamed back, with nothing
to signal the click registered (and nothing stopping a second click).

- Added loading.tsx to every route segment that fetches data on the
  server: dashboard, repos, repos/[repoName], compare, ai-exposure,
  audit-log, team, settings, settings/integrations,
  settings/integrations/[provider], connect. Next's built-in mechanism
  — the nearest loading.tsx renders automatically as a Suspense
  fallback while a route segment's data is still resolving, on both
  <Link> navigation and router.push/replace.
- Added a shared shadcn-style Skeleton primitive
  (components/ui/skeleton.tsx) each loading.tsx composes into a rough
  match of its page's real layout (header + card grid / table rows),
  not just a generic spinner.
- WindowSelector (the org/window filter used on dashboard, compare, and
  repo-detail) had literally no pending feedback: it calls
  router.replace on change, which reruns the whole server page, and
  the <Select> just sat there unchanged until the round-trip finished.
  Wrapped the navigation in useTransition — the select disables and
  shows a spinner immediately, which also blocks a second click from
  firing another replace() before the first resolves. Deliberately
  NOT loading.tsx-driven here: wrapping in a transition keeps the
  current page visible with isPending=true instead of flashing to the
  route's skeleton, which is the right feel for a filter tweak vs. a
  full navigation.
- Left compare-view's search/sort alone — both are pure client-side
  useState/useMemo over already-fetched data, no network round-trip,
  so a loading indicator there would be pure noise.

Verification: npx tsc --noEmit clean, npm run test 253/253, npm run
lint 0 errors (same 72 pre-existing warnings). Started the dev server
with placeholder env vars and confirmed it boots without error and
protected routes still redirect correctly (no auth/build regression).
Could not visually verify the skeletons rendering in an authenticated
browser session — this sandbox has no real Supabase project or user
session configured, so every [tenant]/* page redirects to /auth/signin
before reaching the data-fetching code the loading.tsx files guard.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../src/app/[tenant]/ai-exposure/loading.tsx  | 25 ++++++++++++++
 .../src/app/[tenant]/audit-log/loading.tsx    | 18 ++++++++++
 platform/src/app/[tenant]/compare/loading.tsx | 22 ++++++++++++
 platform/src/app/[tenant]/connect/loading.tsx | 21 ++++++++++++
 .../src/app/[tenant]/dashboard/loading.tsx    | 34 +++++++++++++++++++
 .../app/[tenant]/repos/[repoName]/loading.tsx | 27 +++++++++++++++
 platform/src/app/[tenant]/repos/loading.tsx   | 20 +++++++++++
 .../integrations/[provider]/loading.tsx       | 22 ++++++++++++
 .../settings/integrations/loading.tsx         | 15 ++++++++
 .../src/app/[tenant]/settings/loading.tsx     | 22 ++++++++++++
 platform/src/app/[tenant]/team/loading.tsx    | 25 ++++++++++++++
 platform/src/components/WindowSelector.tsx    | 26 ++++++++++++--
 platform/src/components/ui/skeleton.tsx       | 12 +++++++
 13 files changed, 286 insertions(+), 3 deletions(-)
 create mode 100644 platform/src/app/[tenant]/ai-exposure/loading.tsx
 create mode 100644 platform/src/app/[tenant]/audit-log/loading.tsx
 create mode 100644 platform/src/app/[tenant]/compare/loading.tsx
 create mode 100644 platform/src/app/[tenant]/connect/loading.tsx
 create mode 100644 platform/src/app/[tenant]/dashboard/loading.tsx
 create mode 100644 platform/src/app/[tenant]/repos/[repoName]/loading.tsx
 create mode 100644 platform/src/app/[tenant]/repos/loading.tsx
 create mode 100644 platform/src/app/[tenant]/settings/integrations/[provider]/loading.tsx
 create mode 100644 platform/src/app/[tenant]/settings/integrations/loading.tsx
 create mode 100644 platform/src/app/[tenant]/settings/loading.tsx
 create mode 100644 platform/src/app/[tenant]/team/loading.tsx
 create mode 100644 platform/src/components/ui/skeleton.tsx

diff --git a/platform/src/app/[tenant]/ai-exposure/loading.tsx b/platform/src/app/[tenant]/ai-exposure/loading.tsx
new file mode 100644
index 0000000..417df4a
--- /dev/null
+++ b/platform/src/app/[tenant]/ai-exposure/loading.tsx
@@ -0,0 +1,25 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function AIExposureLoading() {
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-56" />
+        <Skeleton className="h-4 w-64" />
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-3">
+        {Array.from({ length: 3 }).map((_, i) => (
+          <Skeleton key={i} className="h-28" />
+        ))}
+      </div>
+
+      <div className="space-y-2">
+        <Skeleton className="h-10 w-full" />
+        {Array.from({ length: 6 }).map((_, i) => (
+          <Skeleton key={i} className="h-12 w-full" />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/platform/src/app/[tenant]/audit-log/loading.tsx b/platform/src/app/[tenant]/audit-log/loading.tsx
new file mode 100644
index 0000000..eb78dd3
--- /dev/null
+++ b/platform/src/app/[tenant]/audit-log/loading.tsx
@@ -0,0 +1,18 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function AuditLogLoading() {
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-4 w-64" />
+      </div>
+
+      <div className="space-y-3">
+        {Array.from({ length: 8 }).map((_, i) => (
+          <Skeleton key={i} className="h-20 w-full" />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/platform/src/app/[tenant]/compare/loading.tsx b/platform/src/app/[tenant]/compare/loading.tsx
new file mode 100644
index 0000000..f184171
--- /dev/null
+++ b/platform/src/app/[tenant]/compare/loading.tsx
@@ -0,0 +1,22 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function CompareLoading() {
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="space-y-2">
+          <Skeleton className="h-8 w-40" />
+          <Skeleton className="h-4 w-56" />
+        </div>
+        <Skeleton className="h-8 w-32" />
+      </div>
+
+      <div className="space-y-2">
+        <Skeleton className="h-10 w-full" />
+        {Array.from({ length: 6 }).map((_, i) => (
+          <Skeleton key={i} className="h-12 w-full" />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/platform/src/app/[tenant]/connect/loading.tsx b/platform/src/app/[tenant]/connect/loading.tsx
new file mode 100644
index 0000000..26bafb4
--- /dev/null
+++ b/platform/src/app/[tenant]/connect/loading.tsx
@@ -0,0 +1,21 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function ConnectLoading() {
+  return (
+    <div className="space-y-6">
+      <Skeleton className="h-8 w-40" />
+
+      {Array.from({ length: 3 }).map((_, i) => (
+        <Card key={i}>
+          <CardHeader>
+            <Skeleton className="h-5 w-56" />
+          </CardHeader>
+          <CardContent>
+            <Skeleton className="h-9 w-full" />
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}
diff --git a/platform/src/app/[tenant]/dashboard/loading.tsx b/platform/src/app/[tenant]/dashboard/loading.tsx
new file mode 100644
index 0000000..d171abd
--- /dev/null
+++ b/platform/src/app/[tenant]/dashboard/loading.tsx
@@ -0,0 +1,34 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function DashboardLoading() {
+  return (
+    <div className="space-y-8">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="space-y-2">
+          <Skeleton className="h-8 w-56" />
+          <Skeleton className="h-4 w-40" />
+        </div>
+        <Skeleton className="h-8 w-32" />
+      </div>
+
+      <div className="grid gap-3 grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <Skeleton key={i} className="h-24" />
+        ))}
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <Skeleton key={i} className="h-28" />
+        ))}
+      </div>
+
+      <Skeleton className="h-72" />
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Skeleton className="h-64" />
+        <Skeleton className="h-64" />
+      </div>
+    </div>
+  );
+}
diff --git a/platform/src/app/[tenant]/repos/[repoName]/loading.tsx b/platform/src/app/[tenant]/repos/[repoName]/loading.tsx
new file mode 100644
index 0000000..e5f8d39
--- /dev/null
+++ b/platform/src/app/[tenant]/repos/[repoName]/loading.tsx
@@ -0,0 +1,27 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function RepoDetailLoading() {
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="space-y-2">
+          <Skeleton className="h-8 w-64" />
+          <Skeleton className="h-4 w-48" />
+        </div>
+        <Skeleton className="h-8 w-32" />
+      </div>
+
+      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <Skeleton key={i} className="h-24" />
+        ))}
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <Skeleton key={i} className="h-56" />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/platform/src/app/[tenant]/repos/loading.tsx b/platform/src/app/[tenant]/repos/loading.tsx
new file mode 100644
index 0000000..9a35d5b
--- /dev/null
+++ b/platform/src/app/[tenant]/repos/loading.tsx
@@ -0,0 +1,20 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function ReposLoading() {
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-40" />
+        <Skeleton className="h-4 w-56" />
+      </div>
+
+      <Skeleton className="h-9 w-full max-w-sm" />
+
+      <div className="space-y-2">
+        {Array.from({ length: 8 }).map((_, i) => (
+          <Skeleton key={i} className="h-14" />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/platform/src/app/[tenant]/settings/integrations/[provider]/loading.tsx b/platform/src/app/[tenant]/settings/integrations/[provider]/loading.tsx
new file mode 100644
index 0000000..41b9ad5
--- /dev/null
+++ b/platform/src/app/[tenant]/settings/integrations/[provider]/loading.tsx
@@ -0,0 +1,22 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function IntegrationDetailLoading() {
+  return (
+    <div className="space-y-6">
+      <Skeleton className="h-8 w-56" />
+
+      <Card>
+        <CardHeader>
+          <Skeleton className="h-5 w-40" />
+          <Skeleton className="mt-1 h-4 w-64" />
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <Skeleton className="h-9 w-full" />
+          <Skeleton className="h-9 w-full" />
+          <Skeleton className="h-9 w-2/3" />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/platform/src/app/[tenant]/settings/integrations/loading.tsx b/platform/src/app/[tenant]/settings/integrations/loading.tsx
new file mode 100644
index 0000000..c43f308
--- /dev/null
+++ b/platform/src/app/[tenant]/settings/integrations/loading.tsx
@@ -0,0 +1,15 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function IntegrationsLoading() {
+  return (
+    <div className="space-y-6">
+      <Skeleton className="h-8 w-48" />
+
+      <div className="grid gap-4 md:grid-cols-2">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <Skeleton key={i} className="h-32" />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/platform/src/app/[tenant]/settings/loading.tsx b/platform/src/app/[tenant]/settings/loading.tsx
new file mode 100644
index 0000000..4e2fd56
--- /dev/null
+++ b/platform/src/app/[tenant]/settings/loading.tsx
@@ -0,0 +1,22 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function SettingsLoading() {
+  return (
+    <div className="space-y-6">
+      <Skeleton className="h-8 w-40" />
+
+      {Array.from({ length: 3 }).map((_, i) => (
+        <Card key={i}>
+          <CardHeader>
+            <Skeleton className="h-5 w-40" />
+            <Skeleton className="mt-1 h-4 w-64" />
+          </CardHeader>
+          <CardContent>
+            <Skeleton className="h-9 w-full" />
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}
diff --git a/platform/src/app/[tenant]/team/loading.tsx b/platform/src/app/[tenant]/team/loading.tsx
new file mode 100644
index 0000000..093d40b
--- /dev/null
+++ b/platform/src/app/[tenant]/team/loading.tsx
@@ -0,0 +1,25 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function TeamLoading() {
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <Skeleton className="h-8 w-40" />
+        <Skeleton className="h-9 w-32" />
+      </div>
+
+      <Card>
+        <CardHeader>
+          <Skeleton className="h-5 w-32" />
+          <Skeleton className="mt-1 h-4 w-56" />
+        </CardHeader>
+        <CardContent className="space-y-3">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <Skeleton key={i} className="h-16 w-full" />
+          ))}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/platform/src/components/WindowSelector.tsx b/platform/src/components/WindowSelector.tsx
index 7bf9085..87a0749 100644
--- a/platform/src/components/WindowSelector.tsx
+++ b/platform/src/components/WindowSelector.tsx
@@ -1,7 +1,11 @@
 "use client";
 
+import { useTransition } from "react";
+
 import { useRouter, usePathname, useSearchParams } from "next/navigation";
 
+import { Loader2 } from "lucide-react";
+
 import {
   Select,
   SelectContent,
@@ -32,13 +36,21 @@ export function WindowSelector({
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
+  const [isPending, startTransition] = useTransition();
 
   if (options.length < 2) return null;
 
   function handleChange(value: string) {
     const params = new URLSearchParams(searchParams.toString());
     params.set(paramKey, value);
-    router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+    // Wrapping the navigation in a transition keeps this page visible with
+    // isPending=true instead of unmounting to the route's loading.tsx — the
+    // right feel for a filter (instant feedback on the control itself)
+    // rather than a full-page flash. Also blocks a second click from firing
+    // another replace() before the first one resolves.
+    startTransition(() => {
+      router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+    });
   }
 
   return (
@@ -46,9 +58,17 @@ export function WindowSelector({
       <span className="text-xs text-muted-foreground">
         {t("common.windowSelector.label")}
       </span>
-      <Select value={String(windowDays)} onValueChange={handleChange}>
+      <Select
+        value={String(windowDays)}
+        onValueChange={handleChange}
+        disabled={isPending}
+      >
         <SelectTrigger className="h-8 w-[112px]">
-          <SelectValue />
+          {isPending ? (
+            <Loader2 className="size-3.5 animate-spin text-muted-foreground" />
+          ) : (
+            <SelectValue />
+          )}
         </SelectTrigger>
         <SelectContent>
           {options.map((days) => (
diff --git a/platform/src/components/ui/skeleton.tsx b/platform/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000..67c3229
--- /dev/null
+++ b/platform/src/components/ui/skeleton.tsx
@@ -0,0 +1,12 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };