mirror of
https://github.com/prowler-cloud/prowler.git
synced 2026-10-24 12:24:17 +00:00
fix(ui): use SkeletonBoundary for all graph tabs and degrade scroll hint under reduced motion
This commit is contained in:
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>
|
||||
|
||||
Reference in new issue
Block a user