fix(ui): use SkeletonBoundary for all graph tabs and degrade scroll hint under reduced motion

This commit is contained in:
Alan Buscaglia committed 2026-06-11 16:48:14 +02:00
1 parent eff97e7404
commit f1678d7ac2
2 files changed
+6 -18

No files matched your search

@@ -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>;
@@ -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>