core: frontend: BrIFrame: Change hiding approach

Instead of hiding the iframe with v-show (which sets display: none and gives zero dimensions), the iframe is now always visible but layered behind the loading animation using z-index positioning.

Signed-off-by: Patrick José Pereira <patrickelectric@gmail.com>

Author: patrickelectric

core/frontend/src/components/utils/BrIframe.vue

@@ -2,25 +2,27 @@
   <v-sheet
     width="100%"
     height="100%"
-    style="overflow: hidden;"
+    style="overflow: hidden; position: relative;"
   >
     <spinning-logo
       v-if="!gl_compatible && !iframe_loaded"
       size="15%"
       subtitle="Loading external application..."
+      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2;"
     />
     <canvas
       v-if="gl_compatible && !iframe_loaded"
       ref="webglCanvas"
+      style="position: absolute; top: 0; left: 0; z-index: 2;"
     />
     <iframe
-      v-show="iframe_loaded"
       :title="`iframe-${source}`"
       :src="source"
       height="100%"
       width="100%"
       frameBorder="0"
       allowfullscreen
+      style="position: absolute; top: 0; left: 0; z-index: 1;"
       @load="loadFinished"
     />
   </v-sheet>