fix(striker-ui): add loading switch to ExpandablePanel

striker-ui/components/Panels/ExpandablePanel.tsx

@@ -7,12 +7,15 @@ import { FC, ReactNode, useMemo, useState } from 'react';
 
 import { GREY } from '../../lib/consts/DEFAULT_THEME';
 
+import FlexBox from '../FlexBox';
 import InnerPanel from './InnerPanel';
 import InnerPanelBody from './InnerPanelBody';
 import InnerPanelHeader from './InnerPanelHeader';
+import Spinner from '../Spinner';
 
 type ExpandablePanelOptionalProps = {
   isExpandInitially?: boolean;
+  isLoading?: boolean;
 };
 
 type ExpandablePanelProps = ExpandablePanelOptionalProps & {
@@ -21,12 +24,14 @@ type ExpandablePanelProps = ExpandablePanelOptionalProps & {
 
 const EXPANDABLE_PANEL_DEFAULT_PROPS: Required<ExpandablePanelOptionalProps> = {
   isExpandInitially: false,
+  isLoading: false,
 };
 
 const ExpandablePanel: FC<ExpandablePanelProps> = ({
   children,
   header,
   isExpandInitially = EXPANDABLE_PANEL_DEFAULT_PROPS.isExpandInitially,
+  isLoading = EXPANDABLE_PANEL_DEFAULT_PROPS.isLoading,
 }) => {
   const [isExpand, setIsExpand] = useState<boolean>(isExpandInitially);
 
@@ -35,11 +40,34 @@ const ExpandablePanel: FC<ExpandablePanelProps> = ({
     [isExpand],
   );
   const contentHeight = useMemo(() => (isExpand ? 'auto' : '.2em'), [isExpand]);
+  const headerSpinner = useMemo(() => {
+    const spinnerLength = '1.2em';
+
+    return !isExpand && isLoading ? (
+      <Spinner
+        progressProps={{
+          style: { height: spinnerLength, width: spinnerLength },
+        }}
+      />
+    ) : undefined;
+  }, [isExpand, isLoading]);
+  const content = useMemo(
+    () =>
+      isExpand && isLoading ? (
+        <Spinner sx={{ margin: '1em 0' }} />
+      ) : (
+        <InnerPanelBody>{children}</InnerPanelBody>
+      ),
+    [children, isExpand, isLoading],
+  );
 
   return (
     <InnerPanel>
       <InnerPanelHeader>
-        {header}
+        <FlexBox row>
+          {header}
+          {headerSpinner}
+        </FlexBox>
         <IconButton
           onClick={() => {
             setIsExpand((previous) => !previous);
@@ -49,9 +77,7 @@ const ExpandablePanel: FC<ExpandablePanelProps> = ({
           {expandButtonIcon}
         </IconButton>
       </InnerPanelHeader>
-      <Box sx={{ height: contentHeight, overflowY: 'hidden' }}>
-        <InnerPanelBody>{children}</InnerPanelBody>
-      </Box>
+      <Box sx={{ height: contentHeight, overflowY: 'hidden' }}>{content}</Box>
     </InnerPanel>
   );
 };