Alerting: Add loading spinner for loading groups state (#106289)

Add loading spinner for loading groups state

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">

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>
   );

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",