From f1ce73dc2ca340fc2f5c9181795a4a72fcfebef2 Mon Sep 17 00:00:00 2001
From: Sonia Aguilar <33540275+soniaAguilarPeiron@users.noreply.github.com>
Date: Wed, 25 Oct 2023 09:32:28 +0200
Subject: [PATCH] Alerting: Fix NoRulesSplash being rendered for some seconds,
 fater creating a rule (#77048)

* Fix NoRulesSplash being rendered for some seconds, fater creating a rule

* Add ruler response/loading,dispatched,error to the logic in hasNoAlertRulesCreatedYet expression
---
 public/app/features/alerting/unified/RuleList.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/public/app/features/alerting/unified/RuleList.tsx b/public/app/features/alerting/unified/RuleList.tsx
index 655b52a9f3d..a36a7eccff3 100644
--- a/public/app/features/alerting/unified/RuleList.tsx
+++ b/public/app/features/alerting/unified/RuleList.tsx
@@ -61,11 +61,23 @@ const RuleList = withErrorBoundary(
     );
 
     const promRequests = Object.entries(promRuleRequests);
+    const rulerRequests = Object.entries(rulerRuleRequests);
+
     const allPromLoaded = promRequests.every(
       ([_, state]) => state.dispatched && (state?.result !== undefined || state?.error !== undefined)
     );
+    const allRulerLoaded = rulerRequests.every(
+      ([_, state]) => state.dispatched && (state?.result !== undefined || state?.error !== undefined)
+    );
+
     const allPromEmpty = promRequests.every(([_, state]) => state.dispatched && state?.result?.length === 0);
 
+    const allRulerEmpty = rulerRequests.every(([_, state]) => {
+      const rulerRules = Object.entries(state?.result ?? {});
+      const noRules = rulerRules.every(([_, result]) => result?.length === 0);
+      return noRules && state.dispatched;
+    });
+
     const limitAlerts = hasActiveFilters ? undefined : LIMIT_ALERTS;
     // Trigger data refresh only when the RULE_LIST_POLL_INTERVAL_MS elapsed since the previous load FINISHED
     const [_, fetchRules] = useAsyncFn(async () => {
@@ -85,7 +97,8 @@ const RuleList = withErrorBoundary(
     useInterval(fetchRules, RULE_LIST_POLL_INTERVAL_MS);
 
     // Show splash only when we loaded all of the data sources and none of them has alerts
-    const hasNoAlertRulesCreatedYet = allPromLoaded && allPromEmpty && promRequests.length > 0;
+    const hasNoAlertRulesCreatedYet =
+      allPromLoaded && allPromEmpty && promRequests.length > 0 && allRulerEmpty && allRulerLoaded;
 
     const combinedNamespaces: CombinedRuleNamespace[] = useCombinedRuleNamespaces();
     const filteredNamespaces = useFilteredRules(combinedNamespaces, filterState);