From e78da0cc39850f25d994b7460fbbf62790994f66 Mon Sep 17 00:00:00 2001
From: Sonia Aguilar <33540275+soniaAguilarPeiron@users.noreply.github.com>
Date: Wed, 4 Jun 2025 15:51:11 +0200
Subject: [PATCH] Alerting: Add loading spinner for loading groups state
 (#106289)

Add loading spinner for loading groups state
---
 .../unified/rule-list/PaginatedDataSourceLoader.tsx      | 8 +++++++-
 .../unified/rule-list/PaginatedGrafanaLoader.tsx         | 9 ++++++++-
 public/locales/en-US/grafana.json                        | 1 +
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/public/app/features/alerting/unified/rule-list/PaginatedDataSourceLoader.tsx b/public/app/features/alerting/unified/rule-list/PaginatedDataSourceLoader.tsx
index 161437c7528..c37e07491f8 100644
--- a/public/app/features/alerting/unified/rule-list/PaginatedDataSourceLoader.tsx
+++ b/public/app/features/alerting/unified/rule-list/PaginatedDataSourceLoader.tsx
@@ -4,7 +4,7 @@ import { useEffect, useMemo, useRef } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Trans } from '@grafana/i18n';
-import { Icon, Stack, Text, useStyles2 } from '@grafana/ui';
+import { Icon, Spinner, Stack, Text, useStyles2 } from '@grafana/ui';
 import { DataSourceRuleGroupIdentifier, DataSourceRulesSourceIdentifier, RuleGroup } from 'app/types/unified-alerting';
 
 import { groups } from '../utils/navigation';
@@ -80,6 +80,12 @@ export function PaginatedDataSourceLoader({ rulesSourceIdentifier, application }
             <LoadMoreButton onClick={fetchMoreGroups} />
           </div>
         )}
+        {isLoading && (
+          <Stack direction="row" gap={2} alignItems="baseline" justifyContent="flex-start">
+            <Spinner inline={true} />
+            <Trans i18nKey="alerting.rule-list.loading-more-groups">Loading more groups...</Trans>
+          </Stack>
+        )}
         {hasNoRules && (
           <div className={styles.noRules}>
             <Text color="secondary">
diff --git a/public/app/features/alerting/unified/rule-list/PaginatedGrafanaLoader.tsx b/public/app/features/alerting/unified/rule-list/PaginatedGrafanaLoader.tsx
index 75a657216ce..c2ef3fa2863 100644
--- a/public/app/features/alerting/unified/rule-list/PaginatedGrafanaLoader.tsx
+++ b/public/app/features/alerting/unified/rule-list/PaginatedGrafanaLoader.tsx
@@ -1,7 +1,8 @@
 import { groupBy, isEmpty } from 'lodash';
 import { useEffect, useMemo, useRef } from 'react';
 
-import { Icon, Stack, Text } from '@grafana/ui';
+import { Trans } from '@grafana/i18n';
+import { Icon, Spinner, Stack, Text } from '@grafana/ui';
 import { GrafanaRuleGroupIdentifier, GrafanaRulesSourceSymbol } from 'app/types/unified-alerting';
 import { GrafanaPromRuleGroupDTO } from 'app/types/unified-alerting-dto';
 
@@ -84,6 +85,12 @@ export function PaginatedGrafanaLoader() {
             <LoadMoreButton onClick={fetchMoreGroups} />
           </div>
         )}
+        {isLoading && (
+          <Stack direction="row" gap={2} alignItems="center" justifyContent="flex-start">
+            <Spinner inline={true} />
+            <Trans i18nKey="alerting.rule-list.loading-more-groups">Loading more groups...</Trans>
+          </Stack>
+        )}
       </Stack>
     </DataSourceSection>
   );
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index cddd86ac0d9..5e7ab6e9e0c 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -2384,6 +2384,7 @@
         "new-badge": "New!",
         "text": "Import to Grafana-managed rules"
       },
+      "loading-more-groups": "Loading more groups...",
       "more": "More",
       "new-alert-rule": "New alert rule",
       "new-datasource-recording-rule": "New Data source recording rule",