diff --git a/pvc-vue/src/components/pages/vms/VMOverview.vue b/pvc-vue/src/components/pages/vms/VMOverview.vue
index b0bdd2e..7fb561e 100644
--- a/pvc-vue/src/components/pages/vms/VMOverview.vue
+++ b/pvc-vue/src/components/pages/vms/VMOverview.vue
@@ -187,8 +187,18 @@
       </CollapsibleSection>
     </div>
 
+    <!-- Loading State -->
+    <div v-if="!selectedVMData && !showVMList && isLoading" class="no-vm-selected">
+      <div class="spinner-container">
+        <div class="spinner-border text-primary" role="status">
+          <span class="visually-hidden">Loading...</span>
+        </div>
+        <p class="mt-2 text-muted">Loading VM details...</p>
+      </div>
+    </div>
+
     <!-- No VM Selected Message -->
-    <div v-if="!selectedVMData && !showVMList" class="no-vm-selected">
+    <div v-if="!selectedVMData && !showVMList && !isLoading" class="no-vm-selected">
       <div class="alert alert-info">
         <i class="fas fa-info-circle me-2"></i>
         <span v-if="invalidVMSelected">
@@ -253,6 +263,9 @@ const sections = ref({
 // Add new state for tracking invalid VM selection
 const invalidVMSelected = ref(false);
 
+// Add loading state
+const isLoading = ref(false);
+
 // Toggle VM list visibility
 const toggleVMList = () => {
   if (showVMList.value) {
@@ -465,19 +478,25 @@ const filterVMs = () => {
 
 // Select a VM
 const selectVM = (vmName) => {
-  const vmExists = props.vmData.some(vm => vm.name === vmName);
+  isLoading.value = true;
   
-  if (vmExists) {
-    selectedVM.value = vmName;
-    invalidVMSelected.value = false;
-    showVMList.value = false;
-  } else {
-    selectedVM.value = '';
-    invalidVMSelected.value = true;
-    showVMList.value = false;
-  }
-  
-  router.push({ query: { vm: vmName } });
+  // Use nextTick to ensure loading state is shown
+  nextTick(() => {
+    const vmExists = props.vmData.some(vm => vm.name === vmName);
+    
+    if (vmExists) {
+      selectedVM.value = vmName;
+      invalidVMSelected.value = false;
+      showVMList.value = false;
+    } else {
+      selectedVM.value = '';
+      invalidVMSelected.value = true;
+      showVMList.value = false;
+    }
+    
+    router.push({ query: { vm: vmName } });
+    isLoading.value = false;
+  });
 };
 
 // Scroll to the selected VM in the list
@@ -530,6 +549,7 @@ onMounted(() => {
   // Initialize with URL state if present
   const vmFromQuery = route.query.vm;
   if (vmFromQuery) {
+    isLoading.value = true;
     // Check if we already have data
     if (props.vmData.length) {
       selectVM(vmFromQuery);
@@ -583,18 +603,16 @@ watch(() => showVMList.value, (isVisible) => {
   }
 });
 
-// Modify the vmData watcher to handle updates and maintain selection
+// Add watcher for vmData to handle loading state
 watch(() => props.vmData, (newData) => {
-  console.log('VMOverview received vmData:', newData);
-  
-  // If we have a selected VM, verify it still exists in the new data
-  if (selectedVM.value) {
-    const vmStillExists = newData.some(vm => vm.name === selectedVM.value);
-    if (!vmStillExists) {
+  if (isLoading.value && selectedVM.value) {
+    const vmExists = newData.some(vm => vm.name === selectedVM.value);
+    if (!vmExists) {
       invalidVMSelected.value = true;
     } else {
       invalidVMSelected.value = false;
     }
+    isLoading.value = false;
   }
 }, { immediate: true });
 
@@ -922,4 +940,16 @@ const formatStorage = (sizeGB) => {
   padding-top: 0.5rem;
   margin-top: 0.5rem;
 }
+
+.spinner-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.spinner-container p {
+  margin: 0;
+}
 </style> 
\ No newline at end of file