Fix Web IDE loading race condition

Issue: [WebIde] Web IDE fails load and display a blank... (#556936 - closed) • Enrique Alcántara • 18.3 • On track

What does this MR do and why?

There is a race condition in which the Web IDE's container is not displayed before VSCode tries to calculate the viewport's available width and height. This race condition causes the VSCode Workbench initial load to fail:

References

Screenshots or screen recordings

Before	After
before_fix.mov	after_fix.mov

How to set up and validate locally

This is a race condition bug. The easiest way to reproduce it consistently is by applying the following patch to the ideContainer.show method to delay the action of displaying the Web IDE container element. When the Web IDE container element is hidden using display: none, and the VSCode workbench attempts to calculate the viewport size, the calculation fails and the user is left with a blank screen:

diff --git a/app/assets/javascripts/ide/lib/gitlab_web_ide/setup_ide_container.js b/app/assets/javascripts/ide/lib/gitlab_web_ide/setup_ide_container.js
index 8dca512e70eb..9fc44362c928 100644
--- a/app/assets/javascripts/ide/lib/gitlab_web_ide/setup_ide_container.js
+++ b/app/assets/javascripts/ide/lib/gitlab_web_ide/setup_ide_container.js
@@ -19,7 +19,11 @@ export const setupIdeContainer = (baseEl) => {
 
   return {
     element,
-    show() {
+    async show() {
+      await new Promise((resolve) => {
+        setTimeout(resolve, 1000);
+      });
+
       element.classList.add('gl-flex');
       element.classList.remove('gl-hidden');
       baseEl.remove();

When applying this patch and opening the Web IDE, the latter won't initialize properly and you will only see a blank screen.

Duo prompt

Update the jest tests written in the file spec/frontend/ide/lib/gitlab_web_ide/setup_ide_container_spec.js to accommodate the changes applied to the module app/assets/javascripts/ide/lib/gitlab_web_ide/setup_ide_container.js

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.