[9.0] [Synthetics] Fixed bad loading state for grouped monitor cards (#214428) (#214526)

# Backport

This will backport the following commits from `main` to `9.0`:
- [[Synthetics] Fixed bad loading state for grouped monitor cards
(#214428)](https://github.com/elastic/kibana/pull/214428)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Francesco
Fagnani","email":"fagnani.francesco@gmail.com"},"sourceCommit":{"committedDate":"2025-03-14T08:50:58Z","message":"[Synthetics]
Fixed bad loading state for grouped monitor cards (#214428)\n\nFixes
#191649.\n\nThe bad loading state reported in the issue was probably
caused by the\n`isLoading` flag passed to the `EuiAccordion`
component.\n\nBy checking the source code of the `EuiAccordion`
component I found out\nthat that flag changes both `extraActions` and
`children` into a loading\nspinner.\n\n![Screenshot 2025-03-13 at 16
29\n13](https://github.com/user-attachments/assets/f5416a2a-55bf-4c66-826b-36a41317dbc4)\n\nAlso
changed the number of rows passed to the `OverviewLoader` component\nto
match the `rowSize` set by the user.\n\nHere the final
result:\n\n\n\nhttps://github.com/user-attachments/assets/215af2e2-11f7-4cec-b00d-061ec4e60ee6","sha":"67e292e8f9639b2163aae93c6b63d514d71bd4a3","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:obs-ux-management","backport:version","v9.1.0","v8.19.0"],"title":"[Synthetics]
Fixed bad loading state for grouped monitor
cards","number":214428,"url":"https://github.com/elastic/kibana/pull/214428","mergeCommit":{"message":"[Synthetics]
Fixed bad loading state for grouped monitor cards (#214428)\n\nFixes
#191649.\n\nThe bad loading state reported in the issue was probably
caused by the\n`isLoading` flag passed to the `EuiAccordion`
component.\n\nBy checking the source code of the `EuiAccordion`
component I found out\nthat that flag changes both `extraActions` and
`children` into a loading\nspinner.\n\n![Screenshot 2025-03-13 at 16
29\n13](https://github.com/user-attachments/assets/f5416a2a-55bf-4c66-826b-36a41317dbc4)\n\nAlso
changed the number of rows passed to the `OverviewLoader` component\nto
match the `rowSize` set by the user.\n\nHere the final
result:\n\n\n\nhttps://github.com/user-attachments/assets/215af2e2-11f7-4cec-b00d-061ec4e60ee6","sha":"67e292e8f9639b2163aae93c6b63d514d71bd4a3"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.x"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/214428","number":214428,"mergeCommit":{"message":"[Synthetics]
Fixed bad loading state for grouped monitor cards (#214428)\n\nFixes
#191649.\n\nThe bad loading state reported in the issue was probably
caused by the\n`isLoading` flag passed to the `EuiAccordion`
component.\n\nBy checking the source code of the `EuiAccordion`
component I found out\nthat that flag changes both `extraActions` and
`children` into a loading\nspinner.\n\n![Screenshot 2025-03-13 at 16
29\n13](https://github.com/user-attachments/assets/f5416a2a-55bf-4c66-826b-36a41317dbc4)\n\nAlso
changed the number of rows passed to the `OverviewLoader` component\nto
match the `rowSize` set by the user.\n\nHere the final
result:\n\n\n\nhttps://github.com/user-attachments/assets/215af2e2-11f7-4cec-b00d-061ec4e60ee6","sha":"67e292e8f9639b2163aae93c6b63d514d71bd4a3"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Francesco Fagnani <fagnani.francesco@gmail.com>

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/grid_by_group/grid_group_item.tsx

@@ -98,58 +98,59 @@ export const GroupGridItem = ({
         </EuiFlexGroup>
       }
       extraAction={
-        <EuiFlexGroup alignItems="center" gutterSize="m">
-          <EuiFlexItem>
-            <EuiButtonIcon
-              data-test-subj="syntheticsGroupGridItemButton"
-              isDisabled={groupMonitors.length === 0}
-              className="fullScreenButton"
-              iconType="fullScreen"
-              aria-label={i18n.translate(
-                'xpack.synthetics.groupGridItem.euiButtonIcon.fullScreenLabel',
-                { defaultMessage: 'Full screen' }
-              )}
-              onClick={() => {
-                if (fullScreenGroup) {
-                  setFullScreenGroup('');
-                  document.exitFullscreen();
-                } else {
-                  document.documentElement.requestFullscreen();
-                  setFullScreenGroup(groupLabel);
-                }
-              }}
-            />
-          </EuiFlexItem>
+        isLoading ? null : (
+          <EuiFlexGroup alignItems="center" gutterSize="m">
+            <EuiFlexItem>
+              <EuiButtonIcon
+                data-test-subj="syntheticsGroupGridItemButton"
+                isDisabled={groupMonitors.length === 0}
+                className="fullScreenButton"
+                iconType="fullScreen"
+                aria-label={i18n.translate(
+                  'xpack.synthetics.groupGridItem.euiButtonIcon.fullScreenLabel',
+                  { defaultMessage: 'Full screen' }
+                )}
+                onClick={() => {
+                  if (fullScreenGroup) {
+                    setFullScreenGroup('');
+                    document.exitFullscreen();
+                  } else {
+                    document.documentElement.requestFullscreen();
+                    setFullScreenGroup(groupLabel);
+                  }
+                }}
+              />
+            </EuiFlexItem>
 
-          <EuiFlexItem>
-            <EuiBadge color="danger">
-              {i18n.translate('xpack.synthetics.groupGridItem.monitorsBadgeLabel.downCount', {
-                defaultMessage: '{downCount} Down',
-                values: { downCount: downMonitorsCount },
-              })}
-            </EuiBadge>
-          </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiBadge color="danger">
+                {i18n.translate('xpack.synthetics.groupGridItem.monitorsBadgeLabel.downCount', {
+                  defaultMessage: '{downCount} Down',
+                  values: { downCount: downMonitorsCount },
+                })}
+              </EuiBadge>
+            </EuiFlexItem>
 
-          <EuiFlexItem>
-            <EuiBadge color="success">
-              {i18n.translate('xpack.synthetics.groupGridItem.monitorsBadgeLabel.upCount', {
-                defaultMessage: '{upCount} Up',
-                values: { upCount: groupMonitors.length - downMonitorsCount },
-              })}
-            </EuiBadge>
-          </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiBadge color="success">
+                {i18n.translate('xpack.synthetics.groupGridItem.monitorsBadgeLabel.upCount', {
+                  defaultMessage: '{upCount} Up',
+                  values: { upCount: groupMonitors.length - downMonitorsCount },
+                })}
+              </EuiBadge>
+            </EuiFlexItem>
 
-          <EuiFlexItem>
-            <EuiBadge color="subdued">
-              {i18n.translate('xpack.synthetics.groupGridItem.monitorsBadgeLabel.count', {
-                defaultMessage: '{count, number} {count, plural, one {monitor} other {monitors}}',
-                values: { count: groupMonitors.length },
-              })}
-            </EuiBadge>
-          </EuiFlexItem>
-        </EuiFlexGroup>
+            <EuiFlexItem>
+              <EuiBadge color="subdued">
+                {i18n.translate('xpack.synthetics.groupGridItem.monitorsBadgeLabel.count', {
+                  defaultMessage: '{count, number} {count, plural, one {monitor} other {monitors}}',
+                  values: { count: groupMonitors.length },
+                })}
+              </EuiBadge>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        )
       }
-      isLoading={isLoading}
     >
       <EuiSpacer size="m" />
 
@@ -169,7 +170,7 @@ export const GroupGridItem = ({
           ))}
         </EuiFlexGrid>
       ) : (
-        <OverviewLoader rows={2} />
+        <OverviewLoader rows={rowSize} />
       )}
       <EuiSpacer size="m" />
       <EuiTablePagination

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_loader.tsx

@@ -14,14 +14,12 @@ export const OverviewLoader = ({ rows }: { rows?: number }) => {
   const COLUMNS = 4;
   const loaders = Array(ROWS * COLUMNS).fill(null);
   return (
-    <>
-      <EuiFlexGrid gutterSize="m" columns={COLUMNS}>
-        {loaders.map((_, i) => (
-          <EuiFlexItem key={i}>
-            <OverviewGridItemLoader />
-          </EuiFlexItem>
-        ))}
-      </EuiFlexGrid>
-    </>
+    <EuiFlexGrid gutterSize="m" columns={COLUMNS}>
+      {loaders.map((_, i) => (
+        <EuiFlexItem key={i}>
+          <OverviewGridItemLoader />
+        </EuiFlexItem>
+      ))}
+    </EuiFlexGrid>
   );
 };