[WebIde] Web IDE fails load and display a blank screen sometimes (transient bug)

MR: Fix Web IDE loading race condition (!198930 - merged)

Summary

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:

Steps to reproduce

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:

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.

Example Project

What is the current bug behavior?

When the Web IDE's VSCode workbench initializes before the Web IDE iframe emits the ready event (see code reference), the initialization fails and a blank screen appears.

What is the expected correct behavior?

The Web IDE's VSCode workbench never fails to load.

Relevant logs and/or screenshots

Output of checks

Results of GitLab environment info

Expand for output related to GitLab environment info

   (For installations with omnibus-gitlab package run and paste the output of: \\\\\\\`sudo gitlab-rake gitlab:env:info\\\\\\\`)  (For installations from source run and paste the output of: \\\\\\\`sudo -u git -H bundle exec rake gitlab:env:info RAILS_ENV=production\\\\\\\`)    

Results of GitLab application Check

Expand for output related to the GitLab application check

  (For installations with omnibus-gitlab package run and paste the output of: \\\`sudo gitlab-rake gitlab:check SANITIZE=true\\\`)  (For installations from source run and paste the output of: \\\`sudo -u git -H bundle exec rake gitlab:check RAILS_ENV=production SANITIZE=true\\\`)  (we will only investigate if the tests are passing)   

Possible fixes

Patch release information for backports

If the bug fix needs to be backported in a patch release to a version under the maintenance policy, please follow the steps on the patch release runbook for GitLab engineers.

Refer to the internal "Release Information" dashboard for information about the next patch release, including the targeted versions, expected release date, and current status.

High-severity bug remediation

To remediate high-severity issues requiring an internal release for single-tenant SaaS instances, refer to the internal release process for engineers.