No matching values found
@@ -280,6 +288,7 @@ interface AlertFacetsProps {
isAllOnly: boolean
) => void;
className?: string;
+ showSkeleton?: boolean;
}
const AlertFacets: React.FC
= ({
@@ -287,6 +296,7 @@ const AlertFacets: React.FC = ({
facetFilters,
onSelect,
className,
+ showSkeleton = false,
}) => {
const getFacetValues = (key: keyof AlertDto): FacetValue[] => {
const valueMap = new Map();
@@ -391,6 +401,7 @@ const AlertFacets: React.FC = ({
onSelect("severity", value, exclusive, isAllOnly)
}
facetFilters={facetFilters}
+ showSkeleton={showSkeleton}
/>
= ({
onSelect("status", value, exclusive, isAllOnly)
}
facetFilters={facetFilters}
+ showSkeleton={showSkeleton}
/>
= ({
onSelect("source", value, exclusive, isAllOnly)
}
facetFilters={facetFilters}
+ showSkeleton={showSkeleton}
/>
= ({
onSelect("assignee", value, exclusive, isAllOnly)
}
facetFilters={facetFilters}
+ showSkeleton={showSkeleton}
/>
diff --git a/keep-ui/app/alerts/alert-table.tsx b/keep-ui/app/alerts/alert-table.tsx
index 18cb5dc91..6b1407e66 100644
--- a/keep-ui/app/alerts/alert-table.tsx
+++ b/keep-ui/app/alerts/alert-table.tsx
@@ -1,8 +1,7 @@
-import { useEffect, useState } from "react";
-import { Table, Callout, Card, Icon } from "@tremor/react";
+import { useState } from "react";
+import { Table, Card } from "@tremor/react";
import { AlertsTableBody } from "./alerts-table-body";
import { AlertDto } from "./models";
-import { CircleStackIcon } from "@heroicons/react/24/outline";
import {
getCoreRowModel,
useReactTable,
@@ -34,6 +33,7 @@ import AlertTabs from "./alert-tabs";
import AlertSidebar from "./alert-sidebar";
import AlertFacets from "./alert-table-facet";
import { FacetFilters } from "./alert-table-facet";
+import { useMounted } from "@/shared/lib/hooks/useMounted";
interface PresetTab {
name: string;
@@ -273,10 +273,12 @@ export function AlertTable({
return acc.concat(alertId);
}, []);
+ const isMounted = useMounted();
+
// show skeleton if no alerts are loaded
let showSkeleton = table.getFilteredRowModel().rows.length === 0;
// if showSkeleton and not loading, show empty state
- let showEmptyState = !isAsyncLoading && showSkeleton;
+ let showEmptyState = !isAsyncLoading && showSkeleton && isMounted;
const handleRowClick = (alert: AlertDto) => {
// if presetName is alert-history, do not open sidebar
@@ -300,6 +302,7 @@ export function AlertTable({