fix: seamless alert loading

keephq · Nov 17, 2024 · 6ee1465 · 6ee1465
1 parent c64f196
commit 6ee1465
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 27 deletions.
diff --git a/keep-ui/app/alerts/alerts.tsx b/keep-ui/app/alerts/alerts.tsx
@@ -19,6 +19,7 @@ import AlertChangeStatusModal from "./alert-change-status-modal";
 import { useAlertPolling } from "utils/hooks/usePusher";
 import NotFound from "@/app/not-found";
 import { useMounted } from "@/shared/lib/hooks/useMounted";
+import { useSession } from "next-auth/react";
 
 const defaultPresets: Preset[] = [
   {
@@ -102,7 +103,6 @@ export default function Alerts({ presetName }: AlertsProps) {
     (preset) => preset.name.toLowerCase() === decodeURIComponent(presetName)
   );
 
-  const isMounted = useMounted();
   const { data: pollAlerts } = useAlertPolling();
   const {
     data: alerts = [],
@@ -111,7 +111,9 @@ export default function Alerts({ presetName }: AlertsProps) {
     error: alertsError,
   } = usePresetAlerts(selectedPreset ? selectedPreset.name : "");
 
-  const isLoading = isAsyncLoading || !isMounted;
+  // const isMounted = useMounted();
+  const { status: sessionStatus } = useSession();
+  const isLoading = isAsyncLoading || sessionStatus === "loading";
 
   useEffect(() => {
     const fingerprint = searchParams?.get("alertPayloadFingerprint");

diff --git a/keep-ui/utils/hooks/useAlerts.ts b/keep-ui/utils/hooks/useAlerts.ts
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { AlertDto } from "app/alerts/models";
 import { useSession } from "next-auth/react";
 import useSWR, { SWRConfiguration } from "swr";
@@ -53,40 +53,37 @@ export const useAlerts = () => {
     presetName: string,
     options: SWRConfiguration = { revalidateOnFocus: false }
   ) => {
-    const [alertsMap, setAlertsMap] = useState<Map<string, AlertDto>>(
-      new Map()
-    );
-
     const {
       data: alertsFromEndpoint = [],
       mutate,
       isLoading,
-      error,
+      error: alertsError,
     } = useAllAlerts(presetName, options);
 
-    useEffect(() => {
-      if (alertsFromEndpoint.length) {
-        const newAlertsMap = new Map<string, AlertDto>(
-          alertsFromEndpoint.map((alertFromEndpoint) => [
-            alertFromEndpoint.fingerprint,
-            {
-              ...alertFromEndpoint,
-              lastReceived: toDateObjectWithFallback(
-                alertFromEndpoint.lastReceived
-              ),
-            },
-          ])
-        );
-
-        setAlertsMap(newAlertsMap);
+    const alertsValue = useMemo(() => {
+      if (!alertsFromEndpoint.length) {
+        return [];
       }
+
+      const alertsMap = new Map<string, AlertDto>(
+        alertsFromEndpoint.map((alertFromEndpoint) => [
+          alertFromEndpoint.fingerprint,
+          {
+            ...alertFromEndpoint,
+            lastReceived: toDateObjectWithFallback(
+              alertFromEndpoint.lastReceived
+            ),
+          },
+        ])
+      );
+      return Array.from(alertsMap.values());
     }, [alertsFromEndpoint]);
 
     return {
-      data: Array.from(alertsMap.values()),
+      data: alertsValue,
       mutate: mutate,
       isLoading: isLoading,
-      error: error,
+      error: alertsError,
     };
   };
 

diff --git a/keep-ui/utils/hooks/usePresets.ts b/keep-ui/utils/hooks/usePresets.ts
@@ -8,8 +8,7 @@ import { useLocalStorage } from "utils/hooks/useLocalStorage";
 import { useConfig } from "./useConfig";
 import useSWRSubscription from "swr/subscription";
 import { useWebsocket } from "./usePusher";
-import { usePathname, useSearchParams } from "next/navigation";
-import moment from "moment";
+import { useSearchParams } from "next/navigation";
 
 export const usePresets = (type?: string, useFilters?: boolean) => {
   const { data: session } = useSession();