[maps] fix expand layer control is not clickable when layers are loading (#170912)

Closes https://github.com/elastic/kibana/issues/170911

root problem is that `EuiButton*` components are disabled when passed
`isLoading` property. Re-worked component to not pass `isLoading` to
`EuiButton*`

### Test instructions
1. create new map
2. click "Collapse layers panel" to collapse layer control
3. open browser dev tools. Open network tab and select "Slow 3G"
4. Pan and zoom map to cause basemap tiles to load. "Expand layers
panel" button should be clickable during loading

---------

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

x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/__snapshots__/layer_control.test.tsx.snap

@@ -119,12 +119,8 @@ exports[`LayerControl isLayerTOCOpen Should render expand button 1`] = `
   display="inlineBlock"
   position="left"
 >
-  <EuiButtonIcon
-    aria-label="Expand layers panel"
-    className="mapLayerControl__openLayerTOCButton"
-    color="text"
-    data-test-subj="mapExpandLayerControlButton"
-    iconType="menuLeft"
+  <ExpandButton
+    hasErrors={false}
     isLoading={false}
     onClick={[Function]}
   />
@@ -138,12 +134,8 @@ exports[`LayerControl isLayerTOCOpen Should render expand button with error icon
   display="inlineBlock"
   position="left"
 >
-  <EuiButtonIcon
-    aria-label="Expand layers panel"
-    className="mapLayerControl__openLayerTOCButton"
-    color="text"
-    data-test-subj="mapExpandLayerControlButton"
-    iconType="warning"
+  <ExpandButton
+    hasErrors={true}
     isLoading={false}
     onClick={[Function]}
   />
@@ -157,12 +149,8 @@ exports[`LayerControl isLayerTOCOpen Should render expand button with loading ic
   display="inlineBlock"
   position="left"
 >
-  <EuiButtonIcon
-    aria-label="Expand layers panel"
-    className="mapLayerControl__openLayerTOCButton"
-    color="text"
-    data-test-subj="mapExpandLayerControlButton"
-    iconType="menuLeft"
+  <ExpandButton
+    hasErrors={false}
     isLoading={true}
     onClick={[Function]}
   />

x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/expand_button.tsx

@@ -0,0 +1,41 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiButtonEmpty, EuiIcon, EuiLoadingSpinner } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+interface Props {
+  hasErrors: boolean;
+  isLoading: boolean;
+  onClick: () => void;
+}
+
+export function ExpandButton({ hasErrors, isLoading, onClick }: Props) {
+  // isLoading indicates at least one layer is loading.
+  // Expand button should never be disabled.
+  // Not using EuiButton* with iconType props because EuiButton* disables button when isLoading prop is true.
+  return (
+    <EuiButtonEmpty
+      aria-label={i18n.translate('xpack.maps.layerControl.openLayerTOCButtonAriaLabel', {
+        defaultMessage: 'Expand layers panel',
+      })}
+      className="mapLayerControl__openLayerTOCButton"
+      color="text"
+      onClick={onClick}
+      data-test-subj="mapExpandLayerControlButton"
+    >
+      {isLoading ? (
+        <div style={{ paddingTop: '6px' }}>
+          <EuiLoadingSpinner />
+        </div>
+      ) : (
+        <EuiIcon type={hasErrors ? 'warning' : 'menuLeft'} />
+      )}
+    </EuiButtonEmpty>
+  );
+}

x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_control.tsx

@@ -7,13 +7,13 @@
 
 import React, { Fragment } from 'react';
 import {
+  EuiButton,
+  EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
   EuiPanel,
-  EuiButton,
   EuiTitle,
   EuiSpacer,
-  EuiButtonIcon,
   EuiToolTip,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -21,6 +21,7 @@ import { i18n } from '@kbn/i18n';
 import { LayerTOC } from './layer_toc';
 import { isScreenshotMode } from '../../../kibana_services';
 import { ILayer } from '../../../classes/layers/layer';
+import { ExpandButton } from './expand_button';
 
 export interface Props {
   isReadOnly: boolean;
@@ -35,32 +36,6 @@ export interface Props {
   zoom: number;
 }
 
-function renderExpandButton({
-  hasErrors,
-  isLoading,
-  onClick,
-}: {
-  hasErrors: boolean;
-  isLoading: boolean;
-  onClick: () => void;
-}) {
-  const expandLabel = i18n.translate('xpack.maps.layerControl.openLayerTOCButtonAriaLabel', {
-    defaultMessage: 'Expand layers panel',
-  });
-
-  return (
-    <EuiButtonIcon
-      className="mapLayerControl__openLayerTOCButton"
-      color="text"
-      isLoading={isLoading}
-      onClick={onClick}
-      iconType={hasErrors ? 'warning' : 'menuLeft'}
-      aria-label={expandLabel}
-      data-test-subj="mapExpandLayerControlButton"
-    />
-  );
-}
-
 export function LayerControl({
   isReadOnly,
   isLayerTOCOpen,
@@ -92,7 +67,7 @@ export function LayerControl({
         })}
         position="left"
       >
-        {renderExpandButton({ hasErrors, isLoading, onClick: openLayerTOC })}
+        <ExpandButton hasErrors={hasErrors} isLoading={isLoading} onClick={openLayerTOC} />
       </EuiToolTip>
     );
   }