[Security Solution] [Grouping] Add isLoading to groupPanelRenderer params (#172245)

## Summary

This PR forwards the `isLoading` parameter that is sent to the Grouping
component, to allow the consumer to customize groupPanelRenderers to
leverage that property while data is loading when switching between
groups.

Below is a recording demoing how a UI can leverage that option.


db8f476d-00cb-48d9-bdcd-d3c242bec79c

packages/kbn-securitysolution-grouping/src/components/grouping.test.tsx

@@ -136,4 +136,53 @@ describe('grouping container', () => {
 
     expect(renderChildComponent).toHaveBeenCalledWith(getNullGroupFilter('host.name'));
   });
+
+  it('Renders groupPanelRenderer when provided', () => {
+    const groupPanelRenderer = jest.fn();
+    render(
+      <I18nProvider>
+        <Grouping {...testProps} groupPanelRenderer={groupPanelRenderer} />
+      </I18nProvider>
+    );
+
+    expect(groupPanelRenderer).toHaveBeenNthCalledWith(
+      1,
+      'host.name',
+      testProps.data.groupByFields.buckets[0],
+      undefined,
+      false
+    );
+
+    expect(groupPanelRenderer).toHaveBeenNthCalledWith(
+      2,
+      'host.name',
+      testProps.data.groupByFields.buckets[1],
+      undefined,
+      false
+    );
+
+    expect(groupPanelRenderer).toHaveBeenNthCalledWith(
+      3,
+      'host.name',
+      testProps.data.groupByFields.buckets[2],
+      'The selected group by field, host.name, is missing a value for this group of events.',
+      false
+    );
+  });
+  it('Renders groupPanelRenderer when provided with isLoading attribute', () => {
+    const groupPanelRenderer = jest.fn();
+    render(
+      <I18nProvider>
+        <Grouping {...testProps} isLoading groupPanelRenderer={groupPanelRenderer} />
+      </I18nProvider>
+    );
+
+    expect(groupPanelRenderer).toHaveBeenNthCalledWith(
+      1,
+      'host.name',
+      testProps.data.groupByFields.buckets[0],
+      undefined,
+      true
+    );
+  });
 });

packages/kbn-securitysolution-grouping/src/components/grouping.tsx

@@ -128,7 +128,7 @@ const GroupingComponent = <T,>({
               groupBucket={groupBucket}
               groupPanelRenderer={
                 groupPanelRenderer &&
-                groupPanelRenderer(selectedGroup, groupBucket, nullGroupMessage)
+                groupPanelRenderer(selectedGroup, groupBucket, nullGroupMessage, isLoading)
               }
               isLoading={isLoading}
               onToggleGroup={(isOpen) => {

packages/kbn-securitysolution-grouping/src/components/types.ts

@@ -76,7 +76,8 @@ export type GroupStatsRenderer<T> = (
 export type GroupPanelRenderer<T> = (
   selectedGroup: string,
   fieldBucket: RawBucket<T>,
-  nullGroupMessage?: string
+  nullGroupMessage?: string,
+  isLoading?: boolean
 ) => JSX.Element | undefined;
 
 export type OnGroupToggle = (params: {