feat(web-core): add loading state on console

@xen-orchestra/lite/CHANGELOG.md

@@ -3,6 +3,7 @@
 ## **next**
 
 - Fix persistent scrollbar on the right (PR [#8191](https://github.com/vatesfr/xen-orchestra/pull/8191))
+- [Console]: Displays a loader when the console is loading (PR [#8226](https://github.com/vatesfr/xen-orchestra/pull/8226))
 
 ## **0.6.0** (2024-11-29)
 

@xen-orchestra/lite/src/components/RemoteConsole.vue

@@ -1,9 +1,13 @@
 <template>
-  <div ref="vmConsoleContainer" class="vm-console" />
+  <div class="remote-console">
+    <VtsLoadingHero :disabled="isReady" type="panel" />
+    <div ref="vmConsoleContainer" class="vm-console" />
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { useXenApiStore } from '@/stores/xen-api.store'
+import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
 import VncClient from '@novnc/novnc/lib/rfb'
 import { promiseTimeout } from '@vueuse/shared'
 import { fibonacci } from 'iterable-backoff'
@@ -18,6 +22,8 @@ const N_TOTAL_TRIES = 8
 const FIBONACCI_MS_ARRAY: number[] = Array.from(fibonacci().toMs().take(N_TOTAL_TRIES))
 
 const vmConsoleContainer = ref<HTMLDivElement>()
+const isReady = ref(false)
+
 const xenApiStore = useXenApiStore()
 const url = computed(() => {
   if (xenApiStore.currentSessionId == null) {
@@ -54,9 +60,11 @@ function handleDisconnectionEvent() {
 
 function handleConnectionEvent() {
   nConnectionAttempts = 0
+  isReady.value = true
 }
 
 function clearVncClient() {
+  isReady.value = false
   if (vncClient === undefined) {
     return
   }
@@ -109,17 +117,21 @@ defineExpose({
 </script>
 
 <style lang="postcss" scoped>
-.vm-console {
-  flex: 1;
+.remote-console {
+  flex-grow: 1;
   max-width: 100%;
 
-  & > :deep(div) {
-    background-color: transparent !important;
-  }
+  .vm-console {
+    height: 100%;
 
-  /* Required because the library adds "margin: auto" to the canvas which makes the canvas centered in space and not aligned to the rest of the layout */
-  :deep(canvas) {
-    margin: 0 auto !important;
+    & > :deep(div) {
+      background-color: transparent !important;
+    }
+
+    /* Required because the library adds "margin: auto" to the canvas which makes the canvas centered in space and not aligned to the rest of the layout */
+    :deep(canvas) {
+      margin: 0 auto !important;
+    }
   }
 }
 </style>

@xen-orchestra/web-core/lib/components/console/VtsRemoteConsole.vue

@@ -1,10 +1,12 @@
 <template>
   <div :class="uiStore.isMobile ? 'mobile' : undefined" class="vts-remote-console">
+    <VtsLoadingHero :disabled="isReady" type="panel" />
     <div ref="consoleContainer" class="console" />
   </div>
 </template>
 
 <script lang="ts" setup>
+import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
 import { useUiStore } from '@core/stores/ui.store'
 import VncClient from '@novnc/novnc/lib/rfb'
 import { promiseTimeout } from '@vueuse/shared'
@@ -19,6 +21,7 @@ const N_TOTAL_TRIES = 8
 const FIBONACCI_MS_ARRAY: number[] = Array.from(fibonacci().toMs().take(N_TOTAL_TRIES))
 
 const consoleContainer = ref<HTMLDivElement | null>(null)
+const isReady = ref(false)
 
 let vncClient: VncClient | undefined
 let nConnectionAttempts = 0
@@ -43,9 +46,11 @@ function handleDisconnectionEvent() {
 
 function handleConnectionEvent() {
   nConnectionAttempts = 0
+  isReady.value = true
 }
 
 function clearVncClient() {
+  isReady.value = false
   if (vncClient === undefined) {
     return
   }

CHANGELOG.unreleased.md

@@ -9,6 +9,9 @@
 
 ### Enhancements
 
+- **XO 6**:
+  - [Console]: Displays a loader when the console is loading (PR [#8226](https://github.com/vatesfr/xen-orchestra/pull/8226))
+
 > Users must be able to say: “Nice enhancement, I'm eager to test it”
 
 ### Bug fixes
@@ -31,4 +34,6 @@
 
 <!--packages-start-->
 
+- @xen-orchestra/web-core minor
+
 <!--packages-end-->