From f1678d7ac2b9cc5ad98e4972304a0d67b1b2a1b4 Mon Sep 17 00:00:00 2001
From: Alan Buscaglia <gentlemanprogramming@gmail.com>
Date: Thu, 11 Jun 2026 16:26:53 +0200
Subject: [PATCH] fix(ui): use SkeletonBoundary for all graph tabs and degrade
 scroll hint under reduced motion

---
 .../graphs-tabs/graphs-tabs-wrapper.tsx       | 22 +++++--------------
 .../table/inline-resource-container.tsx       |  2 +-
 2 files changed, 6 insertions(+), 18 deletions(-)

diff --git a/ui/app/(prowler)/_overview/graphs-tabs/graphs-tabs-wrapper.tsx b/ui/app/(prowler)/_overview/graphs-tabs/graphs-tabs-wrapper.tsx
index 379a4f7acf..e49e13bee3 100644
--- a/ui/app/(prowler)/_overview/graphs-tabs/graphs-tabs-wrapper.tsx
+++ b/ui/app/(prowler)/_overview/graphs-tabs/graphs-tabs-wrapper.tsx
@@ -1,8 +1,5 @@
-import { Skeleton } from "@heroui/skeleton";
-import { Suspense } from "react";
-
 import { SkeletonTableNewFindings } from "@/components/overview/new-findings-table/table";
-import { SkeletonBoundary } from "@/components/shadcn";
+import { Skeleton, SkeletonBoundary } from "@/components/shadcn";
 import { SearchParamsProps } from "@/types";
 
 import { GraphsTabsClient } from "./_components/graphs-tabs-client";
@@ -15,8 +12,8 @@ import { ThreatMapViewSSR } from "./threat-map-view/threat-map-view.ssr";
 
 const LoadingFallback = () => (
   <div className="border-border-neutral-primary bg-bg-neutral-secondary flex w-full flex-col space-y-4 rounded-lg border p-4">
-    <Skeleton className="bg-bg-neutral-tertiary h-6 w-1/3 rounded" />
-    <Skeleton className="bg-bg-neutral-tertiary h-[457px] w-full rounded" />
+    <Skeleton className="h-6 w-1/3 rounded" />
+    <Skeleton className="h-[457px] w-full rounded" />
   </div>
 );
 
@@ -47,20 +44,11 @@ export const GraphsTabsWrapper = async ({
       const fallback = TAB_FALLBACKS[tab.id] ?? <LoadingFallback />;
       const content = <Component searchParams={searchParams} />;
 
-      if (tab.id === "findings") {
-        return [
-          tab.id,
-          <SkeletonBoundary key={tab.id} fallback={fallback}>
-            {content}
-          </SkeletonBoundary>,
-        ];
-      }
-
       return [
         tab.id,
-        <Suspense key={tab.id} fallback={fallback}>
+        <SkeletonBoundary key={tab.id} fallback={fallback}>
           {content}
-        </Suspense>,
+        </SkeletonBoundary>,
       ];
     }),
   ) as Record<TabId, React.ReactNode>;
diff --git a/ui/components/findings/table/inline-resource-container.tsx b/ui/components/findings/table/inline-resource-container.tsx
index c0fb5ec560..4d5b684a64 100644
--- a/ui/components/findings/table/inline-resource-container.tsx
+++ b/ui/components/findings/table/inline-resource-container.tsx
@@ -317,7 +317,7 @@ export function InlineResourceContainer({
               {showScrollHint && (
                 <div className="pointer-events-none absolute right-0 bottom-0 left-6 z-30">
                   <div className="absolute inset-x-0 bottom-2 flex justify-center">
-                    <div className="bg-bg-neutral-tertiary text-text-neutral-secondary animate-bounce rounded-full px-3 py-1 text-xs shadow-md">
+                    <div className="bg-bg-neutral-tertiary text-text-neutral-secondary animate-bounce rounded-full px-3 py-1 text-xs shadow-md motion-reduce:animate-none">
                       <ChevronsDown className="inline size-3.5" /> Scroll for
                       more
                     </div>