Try to replace CSS visibility with opacity

This is testing for a fix for Safari, in which Safari does not respect `visibility: hidden` on our `<iframe>`

Author: filiptronicek

components/supervisor/frontend/src/index.ts

@@ -64,7 +64,7 @@ const ideService = IDEFrontendService.create();
 const loadingIDE = new Promise((resolve) => window.addEventListener("DOMContentLoaded", resolve, { once: true }));
 const toStop = new DisposableCollection();
 
-document.body.style.visibility = "hidden";
+document.body.style.opacity = "0";
 LoadingFrame.load().then(async (loading) => {
     const frontendDashboardServiceClient = loading.frontendDashboardServiceClient;
     await frontendDashboardServiceClient.initialize();
@@ -162,8 +162,8 @@ LoadingFrame.load().then(async (loading) => {
             if (current === newCurrent) {
                 return;
             }
-            current.style.visibility = "hidden";
-            newCurrent.style.visibility = "visible";
+            current.style.opacity = "0";
+            newCurrent.style.opacity = "1";
             if (current === document.body) {
                 while (document.body.firstChild && document.body.firstChild !== newCurrent) {
                     document.body.removeChild(document.body.firstChild);

components/supervisor/frontend/src/shared/loading-frame.ts

@@ -14,7 +14,7 @@ export function load(): Promise<{
     return new Promise((resolve) => {
         const frame = document.createElement("iframe");
         frame.src = startUrl.toString();
-        frame.style.visibility = "visible";
+        frame.style.opacity = "1";
         frame.className = "gitpod-frame loading";
         document.body.appendChild(frame);