CNV-55107: loading on vm change

kubevirt-ui · Jan 31, 2025 · 255aab0 · 255aab0
1 parent 66df927
commit 255aab0
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 11 deletions.
diff --git 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<HorizontalNavbarProps> = ({ instanceTypeExpandedSpec, pages, vm }) => {
+const HorizontalNavbar: FC<HorizontalNavbarProps> = ({
+  expandedSpecLoading,
+  instanceTypeExpandedSpec,
+  pages,
+  vm,
+}) => {
   const location = useLocation();
 
   const params = useParams();
@@ -73,12 +81,14 @@ const HorizontalNavbar: FC<HorizontalNavbarProps> = ({ instanceTypeExpandedSpec,
           return (
             <Route
               Component={(props) => (
-                <Component
-                  instanceTypeExpandedSpec={instanceTypeExpandedSpec}
-                  obj={vm}
-                  params={params}
-                  {...props}
-                />
+                <StateHandler loaded={!expandedSpecLoading} withBullseye>
+                  <Component
+                    instanceTypeExpandedSpec={instanceTypeExpandedSpec}
+                    obj={vm}
+                    params={params}
+                    {...props}
+                  />
+                </StateHandler>
               )}
               key={page.href}
               path={page.href}

diff --git 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<StateHandlerProps> = ({ children, error, loaded }) => {
+const StateHandler: FC<StateHandlerProps> = ({ children, error, loaded, withBullseye = false }) => {
   const { t } = useKubevirtTranslation();
 
   if (error) {
@@ -22,7 +23,13 @@ const StateHandler: FC<StateHandlerProps> = ({ children, error, loaded }) => {
   }
 
   if (!loaded) {
-    return <Loading />;
+    return withBullseye ? (
+      <Bullseye>
+        <Loading />
+      </Bullseye>
+    ) : (
+      <Loading />
+    );
   }
 
   return <>{children}</>;

diff --git a/src/views/virtualmachines/details/VirtualMachineNavPage.tsx b/src/views/virtualmachines/details/VirtualMachineNavPage.tsx
@@ -32,7 +32,7 @@ const VirtualMachineNavPage: React.FC<VirtualMachineDetailsPageProps> = ({
     namespace,
   });
 
-  const [instanceTypeExpandedSpec] = useInstanceTypeExpandSpec(vm);
+  const [instanceTypeExpandedSpec, expandedSpecLoading] = useInstanceTypeExpandSpec(vm);
 
   const pages = useVirtualMachineTabs();
 
@@ -43,6 +43,7 @@ const VirtualMachineNavPage: React.FC<VirtualMachineDetailsPageProps> = ({
       </Bullseye>
     );
   }
+
   return (
     <SidebarEditorProvider>
       <VirtualMachineNavPageTitle
@@ -51,6 +52,7 @@ const VirtualMachineNavPage: React.FC<VirtualMachineDetailsPageProps> = ({
       />
       <div className="VirtualMachineNavPage--tabs__main">
         <HorizontalNavbar
+          expandedSpecLoading={expandedSpecLoading}
           instanceTypeExpandedSpec={instanceTypeExpandedSpec}
           pages={pages}
           vm={vm}