diff --git a/striker-ui/components/Panels/ExpandablePanel.tsx b/striker-ui/components/Panels/ExpandablePanel.tsx index 302007db..63fd0bcf 100644 --- a/striker-ui/components/Panels/ExpandablePanel.tsx +++ b/striker-ui/components/Panels/ExpandablePanel.tsx @@ -14,8 +14,9 @@ import InnerPanelHeader from './InnerPanelHeader'; import Spinner from '../Spinner'; type ExpandablePanelOptionalProps = { - isExpandInitially?: boolean; - isLoading?: boolean; + expandInitially?: boolean; + loading?: boolean; + showHeaderSpinner?: boolean; }; type ExpandablePanelProps = ExpandablePanelOptionalProps & { @@ -23,15 +24,20 @@ type ExpandablePanelProps = ExpandablePanelOptionalProps & { }; const EXPANDABLE_PANEL_DEFAULT_PROPS: Required = { - isExpandInitially: false, - isLoading: false, + expandInitially: false, + loading: false, + showHeaderSpinner: false, }; +const HEADER_SPINNER_LENGTH = '1.2em'; const ExpandablePanel: FC = ({ children, + expandInitially: + isExpandInitially = EXPANDABLE_PANEL_DEFAULT_PROPS.expandInitially, header, - isExpandInitially = EXPANDABLE_PANEL_DEFAULT_PROPS.isExpandInitially, - isLoading = EXPANDABLE_PANEL_DEFAULT_PROPS.isLoading, + loading: isLoading = EXPANDABLE_PANEL_DEFAULT_PROPS.loading, + showHeaderSpinner: + isShowHeaderSpinner = EXPANDABLE_PANEL_DEFAULT_PROPS.showHeaderSpinner, }) => { const [isExpand, setIsExpand] = useState(isExpandInitially); @@ -40,17 +46,20 @@ const ExpandablePanel: FC = ({ [isExpand], ); const contentHeight = useMemo(() => (isExpand ? 'auto' : '.2em'), [isExpand]); - const headerSpinner = useMemo(() => { - const spinnerLength = '1.2em'; - - return !isExpand && isLoading ? ( - - ) : undefined; - }, [isExpand, isLoading]); + const headerSpinner = useMemo( + () => + isShowHeaderSpinner && !isExpand && isLoading ? ( + + ) : undefined, + [isExpand, isLoading, isShowHeaderSpinner], + ); const content = useMemo( () => isExpand && isLoading ? (