Don't render exceptions flyout if data is loading (elastic#181588)

## Exceptions not created for mappings with conflicts

related: elastic#177007


How to reproduce

- Execute request in order, and change timestamps to you actual dates
```
PUT test-1
{
  "mappings": {
    "properties": {
      "@timestamp": {"type": "date"},
      "host.name": { "type": "keyword" }
    }
  }
}

PUT auditbeat-1
{
  "mappings": {
    "properties": {
      "@timestamp": {"type": "date"},
      "host.name": { "type": "boolean" }
    }
  }
}

POST auditbeat-1/_doc
{
  "@timestamp": 1714121723789,
  "host.name":"host 11",
  "user.name": "123"
}

POST test-1/_doc
{
  "@timestamp": 1714121723789,
  "host.name":"host 11",
  "user.name": "123"
}

```

- Create a query rule, with index pattern `test-1` and the query: '*'.
Wait for the alert to be generated
- Go to the Alerts page (not from the Rule, but all alerts)
- Click add exception from the alert and observe that it says that
fields have conflict about auditbeat index. Which is incorrect as a rule
has only `test-1` index pattern.
- Check all checkboxes about closing alerts and creating exceptions. See
that there is no success toast, and the rule also has no exception.
- Open flyout exception again. Observe that there is no more message
about conflicts. If you create an exception it will be successful.




https://github.com/elastic/kibana/assets/7609147/d29981f7-5d6f-41b2-af46-2ade884e3563


### Reason

In the `AddExceptionFlyout` we do have this line

```
 const { isLoading, indexPatterns, getExtendedFields } = useFetchIndexPatterns(rules);
```

From `AlertContextMenuComponent` we are passing try to load the rule
info and first past `undefined` to rules and then some real info.

The problem is that in the `useFetchIndexPatterns` - if rules not
defined, we return `getExtendedFields` related to the default data view,
but no there rule index pattern.

And probably there some race conditions happen, and after we pass rules
props, exceptions don't rerender the info.

As a fix for this BC I just wait for rule info to be loaded, and then
render exception flyout, but it only masks the problem.

As we want to fix this bug faster, it's probably ok to merge it like
that. And there will be an issue to address this later.

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/security_solution/public/detection_engine/rule_management/logic/use_rule.ts

@@ -4,28 +4,37 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-
+import type { UseQueryOptions } from '@tanstack/react-query';
 import { useAppToasts } from '../../../common/hooks/use_app_toasts';
+import type { RuleResponse } from '../../../../common/api/detection_engine';
 import { useFetchRuleByIdQuery } from '../api/hooks/use_fetch_rule_by_id_query';
 import * as i18n from './translations';
 
 /**
  * Hook for using to get a Rule from the Detection Engine API
  *
  * @param id desired Rule ID's (not rule_id)
- *
+ * @param showToast whether to show toasts on error
+ * @param options options for the useQuery
  */
-export const useRule = (id: string, showToast = true) => {
+export const useRule = (
+  id: string,
+  showToast = true,
+  options: UseQueryOptions<RuleResponse> = {}
+) => {
   const { addError } = useAppToasts();
+  let fetchRuleOptions = {
+    ...options,
+  };
+
+  if (showToast) {
+    fetchRuleOptions = {
+      ...fetchRuleOptions,
+      onError: (error) => {
+        addError(error, { title: i18n.RULE_AND_TIMELINE_FETCH_FAILURE });
+      },
+    };
+  }
 
-  return useFetchRuleByIdQuery(
-    id,
-    showToast
-      ? {
-          onError: (error) => {
-            addError(error, { title: i18n.RULE_AND_TIMELINE_FETCH_FAILURE });
-          },
-        }
-      : undefined
-  );
+  return useFetchRuleByIdQuery(id, fetchRuleOptions);
 };

x-pack/plugins/security_solution/public/detection_engine/rule_management/logic/use_rule_with_fallback.ts

@@ -78,7 +78,14 @@ const buildLastAlertQuery = (ruleId: string) => ({
  * In that case, try to fetch the latest alert generated by the rule and retrieve the rule data from the alert (fallback).
  */
 export const useRuleWithFallback = (ruleId: string): UseRuleWithFallback => {
-  const { isFetching: ruleLoading, data: ruleData, error, refetch } = useRule(ruleId, false);
+  const {
+    isFetching: ruleLoading,
+    data: ruleData,
+    error,
+    refetch,
+  } = useRule(ruleId, false, {
+    refetchOnWindowFocus: false,
+  });
   const { addError } = useAppToasts();
 
   const isExistingRule = !isNotFoundError(error);

x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/alert_context_menu.tsx

@@ -431,6 +431,8 @@ export const AddExceptionFlyoutWrapper: React.FC<AddExceptionFlyoutWrapperProps>
     enrichedAlert == null ||
     (memoRuleIndices == null && memoDataViewId == null);
 
+  if (isLoading || isRuleLoading) return null;
+
   return (
     <AddExceptionFlyout
       rules={memoRule}