diff --git a/src/utils/components/HorizontalNavbar/HorizontalNavbar.tsx b/src/utils/components/HorizontalNavbar/HorizontalNavbar.tsx index 2bb633a2b..93ef2c863 100644 --- a/src/utils/components/HorizontalNavbar/HorizontalNavbar.tsx +++ b/src/utils/components/HorizontalNavbar/HorizontalNavbar.tsx @@ -7,18 +7,26 @@ import { V1VirtualMachine } from '@kubevirt-ui/kubevirt-api/kubevirt'; import { isEmpty } from '@kubevirt-utils/utils/utils'; import { Nav, NavList } from '@patternfly/react-core'; +import StateHandler from '../StateHandler/StateHandler'; + import useDynamicPages from './utils/useDynamicPages'; import { NavPageKubevirt, trimLastHistoryPath } from './utils/utils'; import './horizontal-nav-bar.scss'; type HorizontalNavbarProps = { + expandedSpecLoading?: boolean; instanceTypeExpandedSpec?: V1VirtualMachine; pages: NavPageKubevirt[]; vm?: V1VirtualMachine; }; -const HorizontalNavbar: FC = ({ instanceTypeExpandedSpec, pages, vm }) => { +const HorizontalNavbar: FC = ({ + expandedSpecLoading, + instanceTypeExpandedSpec, + pages, + vm, +}) => { const location = useLocation(); const params = useParams(); @@ -73,12 +81,14 @@ const HorizontalNavbar: FC = ({ instanceTypeExpandedSpec, return ( ( - + + + )} key={page.href} path={page.href} diff --git a/src/utils/components/StateHandler/StateHandler.tsx b/src/utils/components/StateHandler/StateHandler.tsx index c161029c5..532e418cc 100644 --- a/src/utils/components/StateHandler/StateHandler.tsx +++ b/src/utils/components/StateHandler/StateHandler.tsx @@ -1,16 +1,17 @@ import React, { FC } from 'react'; import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation'; -import { Alert, AlertVariant } from '@patternfly/react-core'; +import { Alert, AlertVariant, Bullseye } from '@patternfly/react-core'; import Loading from '../Loading/Loading'; type StateHandlerProps = { error?: any; loaded: boolean; + withBullseye?: boolean; }; -const StateHandler: FC = ({ children, error, loaded }) => { +const StateHandler: FC = ({ children, error, loaded, withBullseye = false }) => { const { t } = useKubevirtTranslation(); if (error) { @@ -22,7 +23,13 @@ const StateHandler: FC = ({ children, error, loaded }) => { } if (!loaded) { - return ; + return withBullseye ? ( + + + + ) : ( + + ); } return <>{children}; diff --git a/src/views/virtualmachines/details/VirtualMachineNavPage.tsx b/src/views/virtualmachines/details/VirtualMachineNavPage.tsx index bdb2b9c79..45787029a 100644 --- a/src/views/virtualmachines/details/VirtualMachineNavPage.tsx +++ b/src/views/virtualmachines/details/VirtualMachineNavPage.tsx @@ -32,7 +32,7 @@ const VirtualMachineNavPage: React.FC = ({ namespace, }); - const [instanceTypeExpandedSpec] = useInstanceTypeExpandSpec(vm); + const [instanceTypeExpandedSpec, expandedSpecLoading] = useInstanceTypeExpandSpec(vm); const pages = useVirtualMachineTabs(); @@ -43,6 +43,7 @@ const VirtualMachineNavPage: React.FC = ({ ); } + return ( = ({ />