Alerting: Hide "no rules" message when we are fetching from data sources (#53778)

public/app/features/alerting/unified/components/rules/CloudRules.tsx

@@ -11,6 +11,7 @@ import { usePagination } from '../../hooks/usePagination';
 import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelector';
 import { getPaginationStyles } from '../../styles/pagination';
 import { getRulesDataSources, getRulesSourceUid } from '../../utils/datasource';
+import { isAsyncRequestStatePending } from '../../utils/redux';
 
 import { RulesGroup } from './RulesGroup';
 import { useCombinedGroupNamespace } from './useCombinedGroupNamespace';
@@ -29,10 +30,17 @@ export const CloudRules: FC<Props> = ({ namespaces, expandAll }) => {
   const groupsWithNamespaces = useCombinedGroupNamespace(namespaces);
 
   const dataSourcesLoading = useMemo(
-    () => rulesDataSources.filter((ds) => rules[ds.name]?.loading || dsConfigs[ds.name]?.loading),
+    () =>
+      rulesDataSources.filter(
+        (ds) => isAsyncRequestStatePending(rules[ds.name]) || isAsyncRequestStatePending(dsConfigs[ds.name])
+      ),
     [rules, dsConfigs, rulesDataSources]
   );
 
+  const hasDataSourcesConfigured = rulesDataSources.length > 0;
+  const hasDataSourcesLoading = dataSourcesLoading.length > 0;
+  const hasNamespaces = namespaces.length > 0;
+
   const { numberOfPages, onPageChange, page, pageItems } = usePagination(
     groupsWithNamespaces,
     1,
@@ -64,8 +72,10 @@ export const CloudRules: FC<Props> = ({ namespaces, expandAll }) => {
           />
         );
       })}
-      {namespaces?.length === 0 && !!rulesDataSources.length && <p>No rules found.</p>}
-      {!rulesDataSources.length && <p>There are no Prometheus or Loki data sources configured.</p>}
+
+      {!hasDataSourcesConfigured && <p>There are no Prometheus or Loki data sources configured.</p>}
+      {hasDataSourcesConfigured && !hasDataSourcesLoading && !hasNamespaces && <p>No rules found.</p>}
+
       <Pagination
         className={styles.pagination}
         currentPage={page}

public/app/features/alerting/unified/utils/redux.ts

@@ -169,6 +169,10 @@ export function isAsyncRequestMapSlicePending<T>(slice: AsyncRequestMapSlice<T>)
   return Object.values(slice).some(isAsyncRequestStatePending);
 }
 
-export function isAsyncRequestStatePending<T>(state: AsyncRequestState<T>): boolean {
+export function isAsyncRequestStatePending<T>(state?: AsyncRequestState<T>): boolean {
+  if (!state) {
+    return false;
+  }
+
   return state.dispatched && state.loading;
 }